Hey everyone!! I'm trying to see if we can make three.js/creative 3D websites to help mental health attrition rates, this is an example concept and I'm open for feedback!! It's still a prototype, but I'm gonna start reaching out to mental health pros. Thanks in advance!

The general idea is that attrition rates for e-mental health are painfully low, but if you personalize a site around an indvidiual I feel like that will signfigantly boost usage until it's no longer needed. Scalability should become more accesible as more abstration tools come into play. Still in the process of validating it with random controlled tests first though, everything is still prelimnary!

Site: https://john-and-patricias-comfort-site-about-attachment-styles.com/

Code, Blender File, & Credits: https://github.com/andrewwoan/john-and-patricias-romantic-comfort-website

Theory Video & Breakdown: https://www.youtube.com/watch?v=w2MnkhTGJQA

Solo project, runs entirely in the browser. Stack: React Three Fiber + drei + Rapier physics + Zustand.

Play free: dodgefight.com

Happy to answer anything about the homing/seeker cone logic, the near-miss slow-mo system, or perf tuning for mobile.

Feedback welcome!

Demo and Source Code: https://codepen.io/sabosugi/full/MYbmpya

(Work in Progress)
I render the model from four sides and project the generated images back onto the model.
Using nano banana 2 for texturing.

100% Frameless

Does anyone have any easy/cheap ideas on esoteric effects I could use to improve the overall aesthetic?

Live: https://unfor-polish-design.vercel.app

Tech stack: Three.js • React Three Fiber• GSAP • GLSL

u/threejs #threejs #webgl #r3f #creativedeveloper #gsap u/greensock u/gsap #shader #immersiveweb

I posted a WIP on this a few days ago, but happy to release it fully!

More levels will be added as time goes on. Feedback is always appreciated!

You can add the game to your glasses here: Laser Run

Demo and Source Code: https://codepen.io/sabosugi/full/gbLmRZd

Can anyone tell me that how maker of this website https://oryzo.ai/ is implemen the soft shadow in the font page and this shadow is moving look so natural. but thing is that it is not a video. it totaly made by three js is anyone tell me that how this work

Hey y'all,

Last week I posted about GitBiome, allowing you to view any github repo as a unique, 3D world. I appreciate all of the feedback so far!! In the meantime I was working on a way to explore the indexed repos as a galactic system, which was listed as a "beta" feature last week

Took me a bit, but I'm happy with where it is now :)

First, https://gitbiome.com/galaxy is a 3D map of the ~170 most popular repos on GitHub, grouped into 8 star systems. Each planet is a real repo that you can click into to view its world

A friend of mine mentioned that this was cool, but he wanted his own system 😆

So the part I'm most excited about: every public GitHub user can now have a personal galaxy. Each planet is one of your repos, which can be used to navigate to their worlds. Sign in with GitHub, claim the galaxy, and the URL is ready in a few seconds. Stick it on your resume, your bio, wherever :) (mine for example: https://gitbiome.com/dylandubois)

A few small things on top:

- QR code generator for sharing your galaxies

- Resync button to pull your repos from GitHub anytime

- OG cards so the link looks clean on Discord, Twitter, etc

At the moment you can only pull in your public repos, but I'm planning to change this as most of mine are private :)

Would love any feedback or feature requests <3

— Dylan

(p.s. shoutout to this post yesterday, my graphics aren't nearly as sick)

https://fqgame.itch.io/dfunrv

I wanted to share the rendering architecture of a project I’ve been working on. It’s a browser-based 3D game called KosmoKode, where players control a space fleet using real JavaScript algorithms.

Since I needed to run untrusted user code, handle WebSockets, and render a space battle simultaneously, performance was my top priority. I decided to skip React Three Fiber (R3F) and heavy frameworks, building the entire visualization in Vanilla Three.js (ES6+). Here is how I structured the scene to maintain a stable 60 FPS.

1. Rendering Hundreds of Objects with InstancedMesh

Space battles require a lot of debris, asteroid fields, and particle effects (like laser beams, engine trails, and explosions). Rendering these individually would kill the CPU with too many draw calls.

• Solution: I heavily utilized THREE.InstancedMesh. All asteroids of the same type, engine thruster particles, and laser projectiles are grouped into single draw calls. Updating the Matrix4 for thousands of instances directly in the animation loop kept the performance incredibly smooth even on integrated laptop GPUs.

2. Decoupling the Render Loop from Game Logic

In a game where users write while loops and heavy pathfinding logic, keeping that code on the main thread would freeze the Three.js requestAnimationFrame loop completely.

• Architecture: All user code and heavy logic run in a separate Web Worker (codeExecutor.js). The worker calculates the state and sends a compressed payload via postMessage to the main thread.
• The Three.js main thread only does what it does best: interpolates the coordinates and updates the scene graph. The camera, orbit controls, and mesh transformations are completely isolated from the game logic.

3. Asset Management and GLTFLoader

The game currently features 6 distinct ship classes (Fighters, Destroyers, Cruisers, etc.).

• I used GLTFLoader to load compressed .gltf models. To prevent frame drops during gameplay, all core geometries and materials are pre-loaded and cached during the initial loading screen. When a new ship spawns, the engine just clones the cached scene graph instead of parsing the model again.

4. Reactive UI vs WebGL Canvas

To keep the DOM updates from interfering with WebGL performance, the UI (built with Vanilla JS) sits in a separate layer over the <canvas>. It updates reactively based on WebSocket events, ensuring the Three.js renderer isn't blocked by DOM reflows.

Would love to hear your thoughts on this setup! How do you guys usually handle massive particle systems or asteroid fields in Vanilla Three.js? Any advanced techniques for frustum culling with InstancedMesh I should look into?

Hi everyone!

I’ve just finished the core prototype for my very first game and would love to hear what you think. It’s a browser-based 1v1 online game where your body is the controller. Instead of using a mouse or keyboard, it uses your webcam to detect head movements and hand gestures to outmaneuver your opponent and shoot spells to them.

My plan is to polish the visuals and UI to eventually release it as a free-to-play online game for friends to jump into quickly.

I’d love your feedback on:

1. Does this "no-controller" 1v1 concept sound fun to you?
2. Are you aware of other games that do this? I want to make sure I’m bringing something unique to the table!

Thanks youu

First serious voxel mesher I’ve worked on.

The mesher is Rust and builds to browser (wasm), iOS (xcframework), and native desktop.

The thing that surprised me most: chunk seams in Dual Contouring / MDC are way nastier than the papers make them look.

Tiny QEF differences across chunk boundaries were enough to create little cracks/open edges.

After digging through a bunch of voxel projects (fast-surface-nets-rs, Veloren, godot_voxel, etc.), I kept seeing the same pattern:

• padded SDF
• halo Hermite data
• single-owner boundary edges

So the Rust port is converging on the same setup with a 73³ Hermite-data cache for baked chunks.

Also lost an embarrassing amount of time because my wireframe debug overlay was gated on brush authority instead of actual terrain rendering, so it hid almost every important LOD/padding chunk I needed to inspect :)

Debug visualization bugs are evil

Demo and Source Code: https://codepen.io/sabosugi/full/XJNpVNe

Demo and Source Code: https://codepen.io/sabosugi/full/dPONVYy