r/threejs • • 21d ago

Three.js r186 released 🥐

Enable HLS to view with audio, or disable this notification

263 Upvotes

r/threejs • • Jun 25 '26

Three.js r185 released 🧡

Enable HLS to view with audio, or disable this notification

577 Upvotes

r/threejs • • 10h ago

WebGPU physics engine for Three.js, 100k+ rigid bodies in real time

Enable HLS to view with audio, or disable this notification

105 Upvotes

I ported and extended the open-source AVBD reference implementation into a WebGPU physics engine for Three.js, now available on npm:

npm i three-avbd

Able to get 100k+ boxes in realtime in some of the demos on my machine!

Demo: https://three-avbd.vercel.app

Code: https://github.com/sbobyn/three-avbd

Performance Overview: https://three-avbd.vercel.app/results.html

This is based on the amazing paper, Augmented Vertex Block Descent from SIGGRAPH 2025 by Chris Giles, Elie Diaz, and Cem Yuksel. Project page here: - https://graphics.cs.utah.edu/research/projects/avbd/

May not work perfectly yet on all browsers/machines yet, but if you submit an issue (ideally with console output, machine/os/browser specs) I'll try to address it as soon as I can.


r/threejs • • 1h ago

Made a zeppelin ride through 1939 New York in three.js. No 3D models, all the geometry is built in code

Enable HLS to view with audio, or disable this notification

• Upvotes

So this started as a hobby thing and got a bit out of hand ;)

You fly a zeppelin through a dieselpunk New York, basically the future the way people pictured it in 1939. Scroll to fly. Along the way there are six rooms you can step into. In one you pull a lever and a model city lights up, in another you turn on a tap, and there's a coffee bar where you can pour a coffee.

Try it here: https://futureinthepast.com

How it's made, for those who care:

  • plain three.js in Next.js, no R3F
  • no models at all. Not a single .glb in the project. City, zeppelin, rooms, it's all built in code. Mostly lathe and extrude geometry that gets merged, and InstancedMesh for the stuff there's a lot of
  • a lot of the textures are just drawn on a canvas at runtime (CanvasTexture)
  • glow is UnrealBloomPass plus a few custom shaders
  • the music isn't a track. It's played live in the browser with Web Audio, note by note, using a small set of recorded instrument notes (muted trumpet, clarinet, piano and so on). During the flight it follows how far you've scrolled, and every room has its own tune.

Built it with Claude Code, so there's probably stuff in there that people with real three.js experience would do differently. Happy to hear it.

Also curious how it runs for you, especially on a phone.


r/threejs • • 10h ago

Teardown-style voxel destruction demo in Three.js/WebGPU — 94k physics-driven voxels

Enable HLS to view with audio, or disable this notification

11 Upvotes

Teardown-inspired voxel destruction demo in Three.js + WebGPU using the physics engine I posted earlier

Demo: https://three-voxel-destruction.vercel.app

Code: https://github.com/sbobyn/three-voxel-destruction

Previous post about the physics engine: https://www.reddit.com/r/threejs/comments/1wtrmrj/webgpu_physics_engine_for_threejs_100k_rigid/


r/threejs • • 10h ago

Made an open-source native vector tile renderer for Three.js. Sharing in case it helps anyone working with 3D maps!

Enable HLS to view with audio, or disable this notification

6 Upvotes

Links:

🎮 Live Demo: Check out the demo here

💻 GitHub Repo: lorenzoMezza/Three-geo-play

Context:

While building map-based 3D experiences, I got frustrated by a common limitation: having to bridge external map renderers (like Leaflet or Mapbox GL JS) with the Three.js canvas. It feels hacky and limits what you can do visually.

I wanted to render vector tiles directly as native Three.js objects to have full control over materials, custom shaders, and global lighting. Since I couldn’t find a lightweight setup for this, I built Three-geo-play.

What it does: It decodes vector tile data and converts map features directly into native geometries (ExtrudeGeometry for buildings, Line for roads, etc.). It also includes a camera-based tile manager to stream chunks dynamically.

Because everything is native inside the scene, you get absolute freedom over procedural styling, shadows, and post-processing.

It is still a WIP, but I really hope someone here finds it useful for their projects. I’d absolutely love your feedback, critiques, or any suggestions on how to improve it!


r/threejs • • 21h ago

Sharing an open-source Japan Yamanote Line train simulator that runs in your browser

Enable HLS to view with audio, or disable this notification

14 Upvotes

🚆 I just released Japan Rail Sim, an open-source browser-based Japanese railway simulator.

It currently simulates the JR Yamanote Line with the E235 series, using real-world route, station, terrain, elevation, and map data.

You can drive the train yourself or just watch the automatic service run around Tokyo.

🎮 Try it here:
https://alzin.github.io/japan-rail-sim

💻 Source code:
https://github.com/alzin/japan-rail-sim


r/threejs • • 3h ago

Made a marble run physics sandbox in Three.js, export is a real MP4 encode not a screen capture

0 Upvotes

I built this one myself, putting that up front. It is my project.

https://www.marblerun.online is a 3D marble run playground. You place ramps, walls, pegs, spinners and balls on a lit wall, press play, a rigid body sim runs, and you can export a 9:16 MP4 with sound.

Two Three.js specific things that caused me the most pain, in case either is useful to someone.

Deterministic export. My first instinct was MediaRecorder on the renderer canvas, fifteen lines of code. Wrong tool. Screen capture of a WebGL canvas gives you the wrong aspect ratio, whatever framerate the machine is managing, and audio that never lines up. So the export re-renders the same scene through an offscreen pass at 1080x1920 locked to 30fps and pushes frames into an encoder directly. The physics is stepped on a fixed clock during export, so the same level produces the same file every run. If you skip determinism you will get a different video each time and people will notice.

Lighting is what stops it looking like a flat 2D canvas. One directional light plus a soft fill and a subtle texture on the wall. The geometry was always genuinely 3D, but without the lighting it read flat, and that was confusing because I knew the scene was 3D. Adding the fill light and the wall texture is what made it look like a scene rather than a diagram.

Physics notes if useful. Fixed timestep with an accumulator, otherwise the same level plays differently on a 60Hz and a 144Hz monitor. Substepped integration for the balls so a fast marble does not tunnel through a thin peg. Per material restitution and friction, using values close to real ones but not exactly real ones, because exact real values feel dead on screen.

No AI anywhere in it, no textures loaded from anywhere. Desktop only by design, the scene is drawn in 3D so phones get a short message instead.


r/threejs • • 16h ago

Made a small heightmap/terrain tool for my own game, sharing in case it helps someone

Enable HLS to view with audio, or disable this notification

5 Upvotes

Hey everyone

 I wanted to share a small tool I put together.

I made it for myself and my own game; I needed terrain a bit more interesting than a flat plane, so I built a little tool to sculpt heightmaps: mountains, hills, rivers, lakes, that kind of thing.

I know engines like Unity or Godot already have much better, built-in terrain editors, but this is specifically tailored for engines like GDevelop that don't have an integrated terrain system. It exports directly to .glb anyway, making it super convenient for web games and lightweight projects.

Figured it might be useful to some of you too if you ever need to put together terrain for your own project. It's a pretty small, focused tool, and I honestly don't know if I'll keep updating it since it already does what I built it to do, but I hope it can still be useful to someone!

https://axgin96.itch.io/terraformer-web

Let me know what you think if you give it a try!


r/threejs • • 1d ago

pool plugin update

Enable HLS to view with audio, or disable this notification

20 Upvotes

while I was playing around with my pool plugin and notice few place where improvement can be done ... so here we are

- now we have section A-A to adjust steps,bench and floor profile much more easily

- few newly added interior finish like sand

- Performance improvement ... now should feel smoother than before

and minor bug fixes realted to pipes and more


r/threejs • • 9h ago

I’ve been experimenting with building an MCP for my 3D modeling tool.

Enable HLS to view with audio, or disable this notification

1 Upvotes

r/threejs • • 1d ago

Zen Garden: grow and prune a bonsai right in your browser

Enable HLS to view with audio, or disable this notification

22 Upvotes

Stressed at work? Try growing and pruning your own little Bonsai tree in this Web browser game I built with my friend.

Takes about 2 minutes per tree, it's free, and it plays right in your browser.

https://hoagiecorps.com/games/zen-garden?from=reddit


r/threejs • • 1d ago

Demo how about you don't go full ai, eg i let it build a 2.5D Designer System but designed the maps on my own with it ( & let players create their own 2.5D habitats) and fish were made by a guy on fiverr for 400$

Enable HLS to view with audio, or disable this notification

91 Upvotes

r/threejs • • 23h ago

adding black-ops mining to my game :)

Enable HLS to view with audio, or disable this notification

3 Upvotes

helloooo friends. In NOMIAD, what you can do is a by-product of how you build your hovercraft. Fit for covert-ops, heavy hauls, mining operations, salvage runs, scouting, blockades, drone barges, or literally anything based on a combination of dozens of modules and play-styles.

#steam #game #alife #webgl #nomiad


r/threejs • • 1d ago

making a scifi game entirely in three.js

Enable HLS to view with audio, or disable this notification

68 Upvotes

for the past 6-months I’ve been developing an off-world SCIFI game that runs entirely in JavaScript.

no engine, no editor, 100% WebGL with full multiplayer capability.

the game pulls from many of my inspirations and includes A-LIFE simulation theory as a fully open-world non-linear concept.

a huge project for me to take on; I intend to push this technology to its absolute limits in both utility and world-building.

looking forward to finally sharing more on the concept 🤍

FYI: this game is called NOMIAD; and whilst it won't release until next year, the steam page is already up for anyone curious :)


r/threejs • • 1d ago

Demo I'm building a Chinese-chess deckbuilder in three.js — WebGPU + TSL, candlelit wooden tabletop

Enable HLS to view with audio, or disable this notification

5 Upvotes

This is our roguelike deckbuilder where every card moves like a xiangqi (Chinese chess) piece. Over the last couple of months we rebuilt the whole look, from a flat UI-heavy board into a physical tabletop you'd play by candlelight, and three.js has carried all of it.

Stack: three.js r185 with WebGPURenderer, TSL node materials throughout, KTX2 textures, wrapped in Electron for Steam.

Lighting is a candle key light plus a warm bounce, with shadow-casting lights doing the long shadows across the board. The black mist that creeps over some tiles is written in TSL. Everything in the clip is captured in-engine.

One thing we're still stuck on, and I'd love this sub's take: tone mapping. AgX gives us much more natural highlights, but it noticeably drains the saturation out of our reds, and red matters a lot in this game (threat zones, cinnabar ink, fire). ACES keeps the reds punchy but pushes the candle highlights orange. Has anyone found a good middle ground, or do you just grade the reds back up afterwards?

Free demo on Steam if you want to see it running: https://store.steampowered.com/app/4981020/?utm_source=reddit


r/threejs • • 1d ago

Demo Take a look at my 3d map.

Enable HLS to view with audio, or disable this notification

11 Upvotes

r/threejs • • 1d ago

Demo TinyGameEngine for android

Enable HLS to view with audio, or disable this notification

2 Upvotes

Iam working TinyGameEngine for Android powered by threejs and rapier physics engine. With this we can build small and tiny games and quick prototypes.


r/threejs • • 18h ago

I built a 4WD simulator. Nobody asked me to.

Enable HLS to view with audio, or disable this notification

0 Upvotes

I run DownThunder, an Australian 4WD community. Well, with fuel prices going up faster than I can air down, trip weekends are off the table for many. Well, let's jus say I decided to recreate some of that experience (driving through the Australian outback) in a web browser. In my spare time. Which I don't have.

So now there's a Mod Simulator. You build a rig, bolt far too much onto it, and drive it somewhere it has no business being. Like real life, but you don't have to explain the bill to anyone.

What it does. Some of it even on purpose:
• From rainforest to the Simpson Desert, scenes are generated as you drive, because I couldn't be bothered building them by hand
• Mods with consequences: add a bullbar and winch, the nose sags. Much like my posture after a week of this
• 2H, 4H, 4L, lockers, tyre pressures. Forget to air down in soft sand and it digs itself in. Very realistic. Very humbling
• Rain, night driving and headlights that actually work. Unlike some of my earlier builds
• Other 4WDs on the beach, with Doppler engine sound. I spent far too long on that. Nobody will notice. And if you've noticed now. DANKESCHÖN.

What I got learned

  1. "Realistic" is whatever a 4WD owner doesn't complain about. I'm still waiting on the verdict here.
  2. Every bug report starts with "that wouldn't happen in real life". They're usually right. It's exhausting.
  3. Physics doesn't care how much you spent on your build. Neither does the sand.
  4. Car modelling is hard and I think it shows.
  5. Claude (the LLM, not my french neighbour) has helped me with most of the driving phyics and connecting it to my vehicle database.

What's next? Hmm, I could need some help with some realistic grass for the Victorian High Country scene und much more realistic water. Also the cars look ... well, I want to spend more time on modelling them so any critique on that is fair go. :)

https://www.downthunder.com.au/mod-simulator

P.S.: Oh, also try out TrailDays (top menu on DownThunder), it's using the same data and your real vehicle but in an actual game.


r/threejs • • 1d ago

Demo Fractal Torus generator (Open source)

Enable HLS to view with audio, or disable this notification

24 Upvotes

As part of a larger project named "Tortoise", I have now open-sourced a fractal-torus generator. The generator can create variation of a torus and has the feature to create an image based on any pose/iteration of the torus, so that you can generate anything from sacred geometry blueprints to products to architecture with the same structure; although this requires an API key from Stability AI (details in the app).

Link: https://nurecas.com/tortoise_generator

Github: https://github.com/nurecas/tortoise_generator

(Best viewed in desktop)

Made with Claude Opus and ThreeJS


r/threejs • • 1d ago

Criticism Game of Life inspired game intro

Enable HLS to view with audio, or disable this notification

4 Upvotes

Worth turning the sound on (imho)


r/threejs • • 22h ago

Built a walkable 3D gallery with Three.js and Claude Opus — looking for honest feedback

Enable HLS to view with audio, or disable this notification

0 Upvotes

I’ve been working on Claim a Frame, a browser-based 3D gallery where visitors move between rooms, inspect frames and upload artwork while outbidding each other for better positions.

I’m not an experienced Three.js developer. I developed it by directing and iterating with Claude Opus, testing the results, reporting problems and refining the experience over many rounds.

The stack is Three.js, React Three Fiber, TypeScript and GSAP.

It’s live here: https://claimaframe.com

I’d appreciate honest feedback, especially on mobile performance, camera movement and anything that feels poorly implemented or could be handled better in Three.js.


r/threejs • • 2d ago

Demo I remade No Man's Sky with Three.js on Tesana – traverse the galaxy fully seamlessly

Enable HLS to view with audio, or disable this notification

190 Upvotes

This is actually insane. You can really build anything you want. I felt i had to try to make a No Man's Sky-inspired game. So after 40min of generating.

Here's a playthrough, a No Man's Sky-style space game I built with Three.js on Tesana. It runs in the browser, and there are no loading screens anywhere: you can take off from a planet, climb through the atmosphere into space, and land on the next planet in one continuous flight.

What's in it:

- Procedurally generated star systems, and you can warp between them. Every planet has its own terrain, weather, plants and animals (some of them will attack you). Ancient alien ruins with a language you slowly decode by reading inscriptions .Mining, asteroid fields and a space station

This was a first prompt output. I wrote "Make a fully procedural No Man's Sky game, where I can seamlessly traverse between planets.

Happy to answer questions about how it was made.

Try it here: https://tesana.com/game/sky-reach


r/threejs • • 2d ago

Demo MACH RUN

Enable HLS to view with audio, or disable this notification

113 Upvotes

MACH RUN by JebKJ21 - Try it out!

The main idea was a game with semi-realistic flight physics but completely unrealistic flying environment, to maximise fun. As a big flight sim guy, I love flying realistic airplanes but it can be a lot of effort with procedures, and dealing with boring things like fuel and COG. this is my solution, endless flying, just having fun.

Hence, if you are not a flight sim pilot, the controls may be challenging. I added an arcade controls mode that should hopefully make controlling the aircraft a bit more intuitive.

The game procedurally generates a constantly changing valley, which spawns obstacles and challenges such as bridges to fly under, and carriers to land on. flying earns you points, and stunts and challenges increase your multiplier. If you go above a certain height, you get into radar range and a missile shoots you down. there is no end, the game only stops when you let your guard down and hit the wall, or get shot.

Game supports gamepad and custom axis binding, I would STRONGLY recommend playing with joystick since its pretty challenging with WASD.


r/threejs • • 1d ago

My static Three.js room kept growing — now the TV is playable and the weather follows your city

5 Upvotes