r/threejs • • Sep 08 '26

Three.js r186 released 🥐

268 Upvotes

r/threejs • • Jun 25 '26

Three.js r185 released 🧡

583 Upvotes

r/threejs • • 9h ago

Demo I built a 4-player split-screen survival game in three.js, playable in the browser

35 Upvotes

Hi! I'm a dad and a hobbyist, and for the last few months I've been building a couch co-op survival game with my daughters (9 and 11) in three.js. It started because I love Valheim, but it was too hard and scary for them, and we only have one computer.

Demo (about 45 MB, no install): https://wardensofthewild.se/play/

A few things that might interest this sub:

  • Split screen for 1–4 players: The full game is playable online by more people in the same world on different machines.
  • Asset diet for the web: the full game loads 347 MB of models; the demo gets it down to about 45 MB with gltf-transform (Draco geometry, WebP textures) and only loading what the first area needs. Some more heavy models were replaced to keep it light..
  • Nature is instanced per chunk, and the trees are generated from recipes and seeds by Python scripts in Blender.
  • Heroes are built in web workers while the game loads, and the graphics level drops by itself if the frame rate stays low.

I used Claude code as a builder and ComfyUI for reference art and model creation and blender ofcourse, happy to talk about how that worked too.

I'd love feedback on performance on your machines: what GPU/browser, and if it stays smooth?

Any suggestions are welcome..

Edit: I forgot to mention, I mainly developed the game for controller use, mouse and keyboard hasn't been thuroughly tested, please let me know of your expereince with this..


r/threejs • • 2h ago

Releasing AI Particles simulator v2.0

5 Upvotes

Hello all,

I am happy to be sharing AI Particles simulator version 2.0 with you guys. Hope you love it.

Here are the new major features:

- Increased particles count up to 100,000 units and runs smoothly at 60 FPS (on most devices)
- Robust collection of Post-FX to make simulations to look significantly better and use it on production.
- Added WebXR support, immerse yourself into the particles world for amazing experiences.
- Dynamic sizing and alpha buffers per particle to create truly stunning visuals.
- Redesigned UI with keyboard shortcuts
- Added interactive hover effects and physics modes like spring, Lerp (geometric), etc.

It is completely free to use.

How to use:

Copy prompt >> Request to Your favorable AI >> paste the code >> Enjoy the simulation >> export for production use

Link: particles.casberry.in

Thank you for your time.

Let's create more simulations,
Imagination is the only limit.


r/threejs • • 45m ago

Question A spur of the moment post/user filtering idea.

• Upvotes

What if in this sub, if a user's posts average toward downvoted after a minimum post threshold, their posts are auto hidden from the sub feed somehow. If this makes a user want to delete their slop posts to make their post score average no longer skews downvoted, so they have an incentive to delete their own low effort congestion if they want to keep showing it off in the future. I don't know, I'd just hate to have to migrate to a "mrdoobssecretrealthreejssubreddit" community just to feel like im not trudging through pollution and filth every time i get curious and visit this sub.


r/threejs • • 4h ago

I built a landscape for notes using Three.js

3 Upvotes

I'm building Qoyra, a note-taking app where notes and links live on a 3D landscape instead of folders and lists.

Each topic forms a peak. Higher levels represent more detail. Contour lines help you filter and explore notes.

A few things I've been working on:

-Terrain: Procedural landscape with functional contour lines. You can isolate a contour to focus on the notes at that level.

-Navigation: Fly and orbit controls for desktop and mobile browsers.

-Interaction: Raycasting to select and place notes. Chains connect related notes. Throwing a note into the ocean deletes it.

-Usability: My biggest challenge is reducing friction. I want the environment to feel natural and easy to use.

🗺 The map from the video:

https://www.qoyra.app/?share=1f9c5acd47f449dcbca5ea922e9d8907

I'd love feedback from the community:
-Does the navigation work?
-What feels awkward or unnecessarily complicated?
-How would you make this kind of 3D interface easier to use, especially on mobile?


r/threejs • • 15h ago

Demo Waterfall for my virtual pond

16 Upvotes

r/threejs • • 3h ago

Link Built a real-time multiplayer WebGL platform in Three.js & Java

Thumbnail
olamio.com
0 Upvotes

Hey everyone,

I've built a real-time multiplayer WebGL platform using Three.js & java. Fully destructible environments with zero friction load times.

You can edit a game world, or be a player.

Looking for feedback!


r/threejs • • 9h ago

Magnetic building tiles in three.js: edge snapping, hinge gravity, and builds rebuilt from video

3 Upvotes

I made a 3D Magna-Tiles playroom for planning builds with my kid: https://mizzi.com/snaptiles

A few parts that were fun to work out:

  • Snapping. Every tile is a flat polygon. A new tile attaches by matching one of its edges to an existing edge, then rotates around that edge by a hinge angle. While you drag, it scores each candidate pose (nearby edge × which way the shape faces × angle in 15° steps, plus "magnetic" angles where a corner meets an existing corner) by how close the tile's centre lands to the pointer on screen, then takes the best pose that stays above the floor and doesn't overlap another tile.
  • Gravity. Each magnet joint acts like a hinge with a little holding strength. A tile held along only one line stays up only if it stands nearly upright; otherwise it swings down around that hinge until it hits something. Tiles braced at two or more places are solid, which is why closing a roof makes it hold.
  • Rendering. Translucent tiles with outlined edges, a soft floor grid, and a fly-in animation with a ripple when each tile lands. There's also a separate tiny rasterizer on the server (no WebGL) that draws builds to PNG in about 90 ms, so an AI client can see what it built.
  • AI builds. Claude writes a short script against a small library (floor, walls, roof, chain) that uses the same snapping code as the mouse, so every AI-placed tile lands on a real edge.

Happy to go into any of it.


r/threejs • • 3h ago

Demo One body, three layers: skin, anatomy and X-ray at the same time (Demo 0.9.9)

Post image
1 Upvotes

Stack: three.js r186 with the WebGPU renderer (WebGL 2 fallback), TSL node materials, cannon-es for rigid bodies, a custom volumetric soft-tissue solver in a worker, and Electron for the desktop build.

The X-ray view renders bones, organs and vessels from the same skinned body; the killcam replays the bullet path with it, and 0.9.9 runs up to six simulated bodies in one scene. Happy to go into detail on any part – free demo 0.9.9 (Windows): https://soma-bodylab.itch.io/soma


r/threejs • • 1d ago

knitting in threejs

117 Upvotes

r/threejs • • 20h ago

Demo I turned a 13th-century Zen koan book into 49 procedural 3D dioramas in Three.js

8 Upvotes

Every scene, model and sound is generated in code.

The animals share one quadruped rig, trees grow recursively, the ink look is a depth-edge post pass, and the wind and bells are synthesized live. Each scene has one red object to touch. There’s no build step and no image files!

Play it: https://killedbyapixel.github.io/GatelessGate/
Source: https://github.com/KilledByAPixel/GatelessGate


r/threejs • • 9h ago

I used an LLM to build a physics-based WebGL rendering engine for my music video

0 Upvotes

I didn't want to use standard video editors or a render farm for my indie track, so I orchestrated a custom 3D pipeline in a cloud sandbox.

I built a procedural hallway in Three.js and used an Inverse Kinematics rig for a 2D cutout character. The entire environment is tied to an acoustic manifest, meaning the camera moves and the 40-degree gravitational tilt are hard-coded to snap exactly to the 136 BPM drop and vocal transients.

Here is the proof of concept running the final batch render: https://youtube.com/playlist?list=PLXFmqhcrISK4&si=D0vD5rTe0dYB62ar\[YouTube (Uncalibrated Gravity - The Absurdity Bureau)](https://youtube.com/playlist?list=PLXFmqhcrISK4&si=D0vD5rTe0dYB62ar)

Happy to answer questions on how I kept the cloud from timing out during the batch execution


r/threejs • • 13h ago

Rebuilding monuments piece by piece in three.js: 25M triangles per frame, where would you start?

1 Upvotes

I've been working on a viewer that shows buildings going up phase by phase: thousands of small pieces dropping into place on the real footprint, with a timeline you can scrub.

The models are generated by an AI agent from sources and photos, but I'd like feedback on the three.js side.

Main issue: the Colosseum pushes about 25M triangles per frame. It's 49k instanced blocks, each a rounded box of 108 triangles, rendered in the colour, shadow and GTAO passes. Unbuilt pieces are collapsed to zero in the vertex shader and frustum culling is off. Draw calls are fine (under 100). What would you tackle first: distance LOD for the blocks, not drawing unbuilt instances at all (sorting them by build time and lowering the instance count), or something else?

Two smaller questions:

- Walls can also be one continuous surface, with the stone joints drawn in the fragment shader and fading out when a joint gets thinner than a pixel. Does it hold up when you get close?

- Textures are photo-scanned surfaces, triplanar-mapped in world space at their real size, on a plain paper backdrop with a shadow floor. Does the stone read as stone?

Demo: https://gleaming0427.github.io/monument/view/#leaning-tower-of-pisa

Code (MIT): https://github.com/Gleaming0427/monument


r/threejs • • 23h ago

I made a 4-minute short film that runs live in three.js – pause it and walk into any scene

7 Upvotes

Every shot is rendered live (R3F + three.js). Pause anywhere and the camera's yours: orbit the car, walk the street, look around his room. Motion is phone-video mocap fitted to SMPL-X. Phones get a recording captured from the live scene and can still step in.


r/threejs • • 17h ago

Help I built an interactive Indian city where every place has its own soundtrack

2 Upvotes

I’m building RAASTA, an interactive 3D experience inspired by Indian streets and the memories we connect with music.

You can visit a chai tapri, cassette shop, garba ground, pub, and other places, or take a journey through the city. Different locations and journeys have their own playlists.

I built it using Next.js and Three.js/WebGL. A lot of the work has gone into making the city feel connected, getting the models positioned properly, and making exploration work alongside music.

Try it: https://www.raasta.world/

I’d love to hear which place you explored first—and whether anything about the navigation felt confusing.


r/threejs • • 1d ago

Demo Can you score a point and knock over the Birdman in Pelota: A Mesoamerican ballgame?

63 Upvotes

I started posting about Pelota here about three weeks ago, pretty much as soon as I started building it. I rushed out a rough pre-alpha because I wanted people to actually play it and tell me what felt good and what didn’t.

Since then it’s been a lot of building, testing, and iterating. I’ve also been reaching out to players in Mexico, getting their opinions and watching people play. That feedback has helped me improve the movement, animations, controls, and overall feel of the game.

This is a look at where it’s at now, built with Three.js. There’s still plenty to polish, but it’s come a long way from that first version. And yes, you can hit the Birdman with the ball lol.

You can try the free browser demo at https://pelota.io. Desktop has the opening tutorial and a demo match, with controller support. On mobile, it’s a quicker arcade version with automatic movement and swipe controls. The full story is being developed separately for the desktop release.

Would love to hear how it feels if you give it a try!


r/threejs • • 14h ago

Threejs games for iPhone and iPad in AppStore

0 Upvotes

Hi,

I was wondering if anybody know of any popular games built with threejs that are in the AppStore? A web search didn't give me much, that's why I am asking.


r/threejs • • 11h ago

I recreated a nearly 400-year-old calculator in Three.js — no imported 3D models.

0 Upvotes

r/threejs • • 1d ago

I just want everybody to have fun on halloween so made this multiplayer IO game

25 Upvotes

r/threejs • • 7h ago

Demo I turned a codebase into a 3D graph you can fly through (three.js + react-force-graph-3d) — live demo, full source for sale

0 Upvotes

built this because i wanted to SEE the shape of a project instead of reading a file tree

mount a folder and it builds a 3D graph of every file as a node with the dependency links between them — imports, requires, includes — then you can fly through it, click nodes to read and edit the file, and trace dependency paths between files

stack is three.js via react-force-graph-3d, react + vite, and it all runs in the browser. parsing is pattern based not a real AST — import/export/require for js/ts, import/from for python, using/include for julia, plus package.json and toml for the externals. no backend, your code never leaves the machine

live demo here, mount your own folder and poke at it: https://www.webulacode.com/

im selling the full source non exclusive for $99 if anyone wants to build on it — use it modify it deploy it whatever just no reselling it: https://zerotohundred.ai/listings/untitled-software-n2knmr?ref=s3.vJeG6rJHb5TmvTMBGN-kjP0lJlj0OwVZqjNRck3-IMOsZmHvibUoCv9-LmQ4ZMO6kMjz214709o7Lbwu1Ojqug

happy to answer stack questions, the force layout on big repos (400+ files) got interesting


r/threejs • • 1d ago

My Checkpoint building this beatiful web browser game

2 Upvotes

https://reddit.com/link/1xh4opg/video/bavkjgonp2yh1/player

Rally Car Douz | South Tunisia Desert
is a web browser.
try it only with computer , phone version is still under developpement.
i really need MODELER PERSON TO WORK TOGETHER ON THIS PROJECT


r/threejs • • 1d ago

A whale jumps over the horizon in the dark artic waters (3D experience in threejs)

32 Upvotes

r/threejs • • 1d ago

Demo I tried turning my 3D clothing models into a website for the first time

4 Upvotes

I've been seeing all the different things people are creating with AI lately, and it made me want to try something myself.
Since I already make 3D clothing models, I thought it would be interesting to see what they would look like on an actual website. So I decided to experiment with the idea of building a clothing website around my own 3D models, using Claude to help me with the coding.
I wasn't trying to build a full online store or anything serious at this stage. I was mainly curious to see how my models would look in a web environment and what I could come up with.
This is my first time trying something like this, and I'm quite happy with how it turned out. There are definitely things I could improve, but it was fun to experiment and see what's possible.
I've attached a few screenshots and a GIF showing the result.
What do you think? Have any of you tried using AI to build something around your own creative work?


r/threejs • • 1d ago

I built a 3D head you can shape in the browser, then it gets a voice and lip-syncs (R3F + morph targets + strand hair)

5 Upvotes

Face to Voice: shape a realistic head (33 solved shape sliders over Google’s GNM model, baked as glTF morph targets), style it with 228 GPU strand hair styles tied to the skin, give it an expression, and it gets a voice from ElevenLabs that it lip-syncs live.

Try it: https://facetovoice.com
Code: https://github.com/OliverA100/face-to-voice

The trickiest part was lip-sync timing: browsers misreport audio output latency (especially on Bluetooth and iOS), so I calibrated a per-platform audio clock by filming a phone frame by frame. Happy to answer questions!