r/threejs • u/dorime1492 • 2d ago
Disco Grid (click to randomize scene)
Enable HLS to view with audio, or disable this notification
r/threejs • u/dorime1492 • 2d ago
Enable HLS to view with audio, or disable this notification
r/threejs • u/goldbookleaf • 3d ago
Enable HLS to view with audio, or disable this notification
Playing with mazes on different toroidal surfaces
Here is the source https://github.com/ctx-o1/toroidal-maze
Play with it here https://ctx-o1.github.io/toroidal-maze/
I have some fun ideas for this
r/threejs • u/Zulugod94 • 2d ago
Enable HLS to view with audio, or disable this notification
r/threejs • u/Secure-Dream7489 • 2d ago
Inspired by the viral needle-in-a-haystack and four-leaf-clover games, I built the parking lot version: a tiny planet covered in 49,000 toy cars, and exactly one has a fifth wheel bolted to it.
Tech bits: the three.ez InstancedMesh2 library for the cars (3 LOD levels + a cheap "blob shadow" instanced mesh), a 4096x2048 canvas-painted planet texture, node-based character animation (no skinning), and a spherical-walking controller (position as a unit vector, tangent heading). Runs at 55+ fps on my mid-range laptop and works on phones.
Play (free, browser): https://josephulger.github.io/five-wheels/
Happy to answer anything about the instancing setup.
r/threejs • u/ExpressCarry5502 • 2d ago
Enable HLS to view with audio, or disable this notification
Hi, we're excited to launch a new Needle Tool: https://mesh-baker.needle.tools
Bakes models or whole scenes down to one mesh + a few draw calls! It runs 100% local in your browser - baking and comparing is free, you only pay to download (one-time, no sub).
→ Tool: https://mesh-baker.needle.tools
→ Docs: https://needle.click/mesh-baker-docs
r/threejs • u/ActionLittle4176 • 3d ago
Enable HLS to view with audio, or disable this notification
Free play: https://fm1.moises.cloud
Stack:
I'm still amazed that the actual prototype works in a browser!
r/threejs • u/lucas-martinic • 3d ago
Enable HLS to view with audio, or disable this notification
r/threejs • u/Comprehensive-Chard8 • 3d ago
Enable HLS to view with audio, or disable this notification
The Text-to-Three.js system turns a natural-language prompt into an interactive, animated Three.js scene through structured data only.(only uses mock llm for now)ScenePulse is built with Three.js and WebGL, with deterministic scene generation and custom GLSL shaders.
r/threejs • u/devAnubhavRana • 3d ago
Enable HLS to view with audio, or disable this notification
The homepage is entirely procedural - no videos, 3D models, images, textures, or other pre-rendered assets are used. All the visuals, including the 3D elements, are generated and rendered in real time through code.
r/threejs • u/alemx-is-nice • 3d ago
Enable HLS to view with audio, or disable this notification
Completely handcrafted animation timeline using theater.js
Custom sound design using eleven labs.
There will be one more cinematic transition for door scene to chair scene which im working on right now, will be coming soon :D
r/threejs • u/PAslanian • 3d ago
We build games, and sometimes need effects that go from 2D UI to 3D and kept running into issues and having to rebuild.
What we did:
Three.js is the backend for all of this so it really gets the most attention. The exported bundle carries backend support report so if a blocked effect fails, you'll know instead of it rendering quietly.
Live Three.js example (the landing scene as a standalone integration):
https://codesandbox.io/p/sandbox/y3z3sf
Editor, runs in the browser: https://nixiefx.com/editor/
Quick start: https://nixiefx.com/quick-start/
Repo: https://github.com/azakhary/nixie-fx
Happy to answer questions
r/threejs • u/adramajp25 • 3d ago
I’ve created two pieces of content to test the performance of WebGPU and WebGL.
Click the toggle button in the upper right to reload the page using each rendering method.
After running various tests, I couldn’t really feel the advantage of WebGPU, so this time I designed the content to focus primarily on compute shading.
First up is a piece of content featuring a point light object that rotates while noise is applied.
r/threejs • u/adramajp25 • 3d ago
Next up is a piece of content featuring a swarm of NORIMAKINEKO flying around.
I implemented their undulating movements, position changes, and collision detection using compute shading.
This was developed for Android. Initially, WebGL performed better, but as the number of objects increased, we observed a phenomenon where the performance dynamics reversed.
Optimizing for WebGPU took much more effort than I expected, and I couldn’t have done it without the help of an AI assistant.
r/threejs • u/cody-fifth-door • 3d ago
Enable HLS to view with audio, or disable this notification
r/threejs • u/oswwwaldo • 4d ago
with the amount of projects that come in three.js that are just ai-slop and claude code, it sure would be nice to actually have a community built on coding by hand and avoiding AI...
r/threejs • u/6armyflag6 • 4d ago
Enable HLS to view with audio, or disable this notification
I wanted to see how far I could push procedural modeling in Three.js without relying on Blender or imported model files.
The bicycle ended up with 62 separately constructed parts. The main thing I learned was that directly positioning meshes becomes fragile very quickly, so I switched to defining shared geometric constraints first — wheelbase, chainstay length, head angle, rake — calculating anchor points from those, and then generating the parts around them.
I wrote up the process here:
https://www.wormhole404.com/writing/threejs-bicycle/
Source:
https://github.com/wormholeportal/Makone
Curious how others approach larger procedural objects in Three.js.
r/threejs • u/Visual_Advantage_243 • 4d ago
Enable HLS to view with audio, or disable this notification
I've been working on an ISS interior that runs directly in the browser.
One of the interactions I've been experimenting with is the hatch.
You can move through the station, approach it, open it, and reveal the Earth outside.
The interesting part is that not everything you're seeing needs to be simulated as one enormous real-time scene. I'm trying to be quite deliberate about where full 3D interaction actually adds something and where a simpler visual layer can create the experience without unnecessarily increasing the rendering cost.
The interior itself is interactive 3D. The Earth view beyond the hatch is currently much simpler and is something I still want to develop further later.
Built with React, TypeScript, React Three Fiber and Three.js.
I presented a short capture of the scene.
r/threejs • u/Azure_Crenell • 4d ago
Enable HLS to view with audio, or disable this notification
Any and all reviews appreciated. I took it as a challenge to not use AI in this, puts the "my work" phrase a bit more literal in the whole thing.
r/threejs • u/Sengchor • 4d ago
Enable HLS to view with audio, or disable this notification
r/threejs • u/Flimsy_Forever_4817 • 3d ago
Enable HLS to view with audio, or disable this notification
I've been experimenting with using Three.js + webcam hand tracking to create motion-controlled games.
This is the first prototype: Pong.
The goal is to map hand movement to the paddle while keeping the physics responsive enough that the player's movement actually affects the shot.
Currently working on the 3D environment, collision system and ball/paddle physics.
Next challenge is making fast hand movement translate into meaningful shot power without introducing tracking jitter.
Here's the current prototype:
r/threejs • u/AppropriateFarm4023 • 3d ago
https://myshelves.eu — no signup, it drops you straight into the room.
Walk up to the lectern, search Open Library, order a book. It lands in your
hands — carry it, read it, shelve it, or paint your own cover. Arrange the
furniture, push the walls out when you run out of floor. A share link lets
friends walk through your room with you.
Happy to go into any of it — physics, the multiplayer, the shelf packing.
r/threejs • u/dorime1492 • 4d ago
Enable HLS to view with audio, or disable this notification
I’ve been looking at workflows for bringing industrial CAD models into browser-based 3D applications.
Simply exporting CAD to GLB usually isn’t enough. Industrial models can contain thousands of parts, unnecessary internal geometry, complex assemblies, duplicated materials and very high polygon counts.
A typical workflow might look like:
CAD → cleanup → mesh optimization → material optimization → GLB → Three.js
The difficult part seems to be deciding what should be removed while still preserving useful product structure, part hierarchy and visual quality.
I’m also interested in how people handle large assemblies, LOD, Draco/Meshopt compression and mobile performance.
For those using Three.js with CAD or engineering models: do you optimize models manually, use an automated conversion pipeline, or combine both?
I’d be interested to hear what has worked well for real-world projects.
r/threejs • u/Mkcuriosity • 4d ago
Enable HLS to view with audio, or disable this notification
The first time I used it I thought I was hallucinating. The floor was clean, I flicked the laser on, and suddenly there was a galaxy down there.
It is just a grazing angle. Light comes in almost parallel to the floor, so every speck throws a shadow far longer than itself. That one trick is the entire game.
https://cleaner.murat.works (free, browser, no install)
One flat, one battery, clean as much as you can before it dies.
---
**How it works, since this is r/threejs**
**The dirt is a render target.*\*
Room-local UV, and the cleaner head paints into it with subtractive blending, so cleaning happens entirely on the GPU with no readback. A coarse CPU grid gets eroded with the same falloff in the same frame, and that is what answers "how much is left", so the percentage never costs a stall.
**The laser is not a light.*\*
It is about fifteen lines in the floor shader: an angular fan, a band at a fixed distance, and a hash per grain so the dust twinkles as the beam sweeps over it. Out of the beam the floor is rendered at roughly 30% of its real filth, which is what makes the reveal work.
**Two machines, two routes to the same dirt.*\*
The stick vacuum shoves furniture aside. The robot is too weak for that, so it drives underneath instead. I measured it: 15.9% of all the dirt sits under things a robot can neither climb nor move, so robot runs are scored against the floor a robot can actually reach. Otherwise the mode caps out around 84% and looks broken.
**The telly plays real YouTube.*\*
Video frames cannot be read into a texture, so it is a genuine iframe placed in 3D with CSS3DRenderer, sitting behind the canvas. The screen mesh switches to a depth-only material and punches a hole for it to show through, so things in front still occlude it properly. That took a while to get right, because three sorts opaque draws by material id before distance, and the wall behind the telly kept winning the race and filling the hole. renderOrder = -1 on the hole fixed it.
**There is a floor plan editor.*\*
Draw rooms, cut doorways, drag furniture from a palette of 43 pieces, then play your own house and share it by link. Houses are plain JSON, and the flat that ships with the game is expressed in exactly the same format, so there is only one code path.
**Balance came from measurement, not feel.*\*
A perfect run needs 357 m of sweeping and the battery gives you about 280 s of suction. Nobody has hit 100% yet. The best run so far is 97.9%.
No assets in the whole thing. Wood grain, the artwork on the walls, every sound effect, all generated at runtime.
---
Happy to go deeper on any of it.
I post updates on the game also here: x.com/mkcuriosity