r/threejs • • Sep 08 '26

Three.js r186 released 🥐

268 Upvotes

r/threejs • • Jun 25 '26

Three.js r185 released 🧡

579 Upvotes

r/threejs • • 2h ago

Using box3d to simulate real sailing physics - Tally Ho Sailing Game

22 Upvotes

I'd previously tried to use the classic physics libraries (ammo, cannon, rapier etc) to recreate sailing physics and found them to be unstable or inconsistent.

Box3d was released in June so I wanted to see if it would work any better - which it seems to!

Playable demo:
https://tally-ho-game.vercel.app/

To be clear this is not a fluid simulation (although I think that is possible!!), but its a step up from just force vectors on the overall boat which is what I have seen done in the past.

Details for those interested:

- Sails are coarse grids of point masses connected by spring joints. Lift and drag applied to each panel using apparent wind, this is again an approximation as in real life the wind is very affected as it flows over the sails, although with an older and slower style yacht like this (Gaff rig) it would be less noticeable than a modern rig.
- Spars and masts are... well just spars
- Ropes/ sheets are linked joints
- Anchor and chain is joints but with collision and mass
- Hull shape is a collection of spheres, with buoyancy and drag coefficients.

The physics is quite CPU intensive but putting in a webworker seems to work well as it not a fast paced game, it doesn't need to match 60 FPS.

If you are interested in the physics you can access the Lab in the top left menu. There is also a rig designer where you can modify the rig but its quite easy to make it... not functional 🤣

It uses real location data, cached for now but I have a steaming server, which means technically you could sail anywhere in the world. My plan is to also use real wind and weather data at the players location.

For the environment I found a nice way to blend COP30 (30m detail) elevation and GEBCO (460m detail) bathymetry data. Building envelopes are from OSM but proc generated with a different style. Vegetation and Ocean is from Dan Greenhecks amazing Tidewater demo although simplified to maintain performance.

And for those that recognise the boat, I also managed to use the Tally Ho lines plan to recreate the hull. Its not perfect but if people like it I can spent more time.

I was thinking to turn this into a idle style game where you sail the world if people enjoy it.


r/threejs • • 12h ago

Demo Using Three.js for scene data and asset loading around a custom WebGPU renderer

25 Upvotes

I've been working on a tropical island for RED SKIES AT DAWN, and Three.js still does a useful job in the engine even though rendering is handled separately.

I use Three.js for CPU scene objects, geometry, maths and asset loading. Junklab Engine owns the WebGPU renderer and shaders. That boundary lets me keep the scene and loading tools while developing the ocean, clouds, vegetation and coastal effects in the renderer.

The island combines procedural terrain and vegetation placement with authored routes, landmarks and imported assets. This is an offline Ultra capture from the development build on Mac.

Is anyone else using Three.js mainly as a CPU scene and asset layer around their own renderer?

AI use: AI-assisted coding and post copy, plus some AI-generated reef textures.

If you'd like to follow the game, you can wishlist RED SKIES AT DAWN on Steam:

https://store.steampowered.com/app/5268580/


r/threejs • • 2h ago

Demo I made ruby and sapphire chess pieces with refraction, gold inlays and reflective boards in Three.js

3 Upvotes

I've been working on Morph Chess, a visual playground for chessboards and pieces in Three.js. I wanted to explore sculpted gemstone forms, deep colours and changing reflections as you move around the board.

The video follows the same order as the README:

0:00 — Ruby: all six pieces rotating in ruby and sapphire.

0:09 — Ruby × Dusk Mirror: pure gemstone pieces on smoky black crystal, with red light beneath the board.

0:18 — Night Oath: the same silhouettes with polished champagne-gold inlays.

0:27 — Night Oath × Midnight Silver: midnight-blue stone and celestial metalwork.

The gemstone shaders use view-dependent refraction, internal reflections and light absorption. These are recordings of the project's actual models and shaders.

Code, GIFs and local setup (MIT): https://github.com/AmethystineAlpaca/morph-chess

You can orbit, zoom and rearrange pieces. The current build focuses on board and piece design; chess rules and full gameplay are still to come.

Which combination do you prefer? I'd also love feedback on the gemstone and metal balance.


r/threejs • • 36m ago

Some progress screenshots

Thumbnail
gallery
• Upvotes

Building a super relaxing game where you pick berries and see the semi-procedural landscape grow and evolve.


r/threejs • • 53m ago

Link I'm Building an Endless Multiplayer Driving Game with Svelte (Self-Promo)

• Upvotes

I've been working on Planet 0 Drive, a relaxing, low-poly 3D driving game built with Svelte, Three.js, and peer-to-peer multiplayer.

It's an endless driving experience where you can cruise around at your own pace, explore the world, discover interesting spots, chase new records, or compete and coordinate with friends.

On the technical side, the game features:

  • Three.js for 3D rendering, procedural world, and weather
  • Peer-to-peer multiplayer with optimized network updates and movement interpolation
  • Spatial audio and performance optimizations for smooth gameplay
  • Version-compatible rooms to keep multiplayer sessions in sync

Planet Zero Drive started with the idea of a relaxing drive through a landscape that keeps unfolding. It also gave me a place to experiment: how much world could I generate, how far could I render it, and what would it take to keep driving (fairly) smooth on a phone?

Play: https://planet0drive.vercel.app/

Blog https://zackwebster.com/blog/building-planet-zero-drive


r/threejs • • 13h ago

My Home: generated apartments you can explore as a little 3D diorama

18 Upvotes

My Home generates a floor plan, makes up the people who live there, and furnishes every room around them.

Free, no sign-up, nothing leaves your browser.

https://home.jannchie.com

Source: https://github.com/Jannchie/my-home


r/threejs • • 2h ago

swapped two people in a music video for three.js cubes

2 Upvotes

wanted to see if i could do a "character replace" without any AI video tools. pose tracking finds the shoulders/elbows/wrists every frame, the people get painted out of the background, and two rounded-box cubes get rendered on top in three.js, following the arms and head tilt.

the orange one's mouth opens with the loudness of the vocals, the green one just vibes.

arms are still a bit noodly lol. any tips on making them less stiff?


r/threejs • • 1d ago

Tip A tip if your scene has a lot of textures: use KTX2 (took my video memory from 1.5 GB to 335 MB)

69 Upvotes

In my VHS room (Dany’s Video) every tape has its own cover, so the scene has a lot of textures. I had them as JPG and WebP, which keep the download small, but on the GPU every texture is unpacked to full size. A single 2K texture takes ~22 MB of video memory, and with hundreds of them, weaker machines lost the WebGL context and the page went white.

KTX2 stays compressed on the GPU, at a fraction of the size.

Convert your textures offline (the ktx2-encoder npm package works, or gltf-transform for models) and load them with three’s KTX2Loader. In my scene it took video memory from around 1.5 GB to 335 MB.


r/threejs • • 4h ago

I was left unsupervised with 15,191 images of my brain. Made a neat browser based, threejs visualiser, like nothing quite else I could find.

Thumbnail
brain.adamch.com
1 Upvotes

r/threejs • • 14h ago

Formula Cat: a Three.js racing game about cats on robot vacuums, packaged with Electron for Steam

8 Upvotes

Title: Formula Cat: a Three.js racing game about cats on robot vacuums, packaged with Electron for Steam

Formula Cat was built with JavaScript and Three.js, then packaged as a desktop game with Electron for Steam.

The original idea was pretty simple: a cat riding a robot vacuum. That was developed into a racing game with 22 cats, 11 teams, 31 circuits, and Story, Career, and Single Race modes. Actual racing was taken surprisingly seriously for a game where your car is a vacuum cleaner.

Three.js was used for rendering, with the simulation kept separate from rendering and input. Race state was stored in preallocated typed arrays using a data-oriented structure. With that separation, complete races could also be run without rendering, so opponent behavior and lap times could be tested.

The cat animations were tied to driving: forward lean was increased with speed, the tail was straightened behind the cat, and movement was added to the scarf and ears.

Physical pit lanes were added too. Your vacuum has to be stopped in its marked box before its battery is replaced by a robot arm. One box was shared between each pair of teammates, so a badly timed stop could be delayed behind your teammate.

For the Steam version, the web game was packaged with Electron and loaded inside its Chromium window. The Three.js renderer and JavaScript simulation were carried over into the desktop application.

Astra was used throughout development for implementation, debugging, tools, and tests. The direction and playtesting were handled by me. Plenty of adjustments were made after driving laps, including two banked corners that had been tilted the wrong way despite passing their automated test.

The Formula Cat Steam page is live! If racing cats on robot vacuums looks like your thing, a wishlist would be very much appreciated :)

More details about the Three.js side, simulation structure, or Electron packaging can be shared in the comments.


r/threejs • • 4h ago

Assetto Corsa like game for drifting, has steering assist for keyboard / gamepad

1 Upvotes

play here: https://onroad-slop.vercel.app/

github: https://github.com/Arz-Gev/onroad

On the video I play with keyboard (it's hard), the car settings aren't fully there yet but you can try to setup it yourself in Tab menu or ask your agent to tweak it.

link with falg for flat map: https://onroad-slop.vercel.app/?map=flat


r/threejs • • 18h ago

Question Thanks for everything, Mr.doob.

Post image
12 Upvotes

r/threejs • • 10h ago

ThreeJS GLB File Quick Viewer for MacOS

1 Upvotes

hi guys, i made a GLB 3D File quick view viewer for macOS
Sourcode: https://github.com/wonglok/glb-viewer-quicklook/tree/main
release link: https://github.com/wonglok/glb-viewer-quicklook/releases/tag/v1.0


r/threejs • • 10h ago

Help Does anyone have a discount code for Bruno Simon's Three.js Journey course?

1 Upvotes

Hey everyone!

I'm planning to learn Three.js and have heard great things about Bruno Simon's Three.js Journey course.

I'm really interested in taking it, but the price is a bit out of my budget right now.

Does anyone have active discount codes, or any upcoming sales that could help bring the price down?

Would really appreciate any help. Thanks in advance!


r/threejs • • 22h ago

Finally a use case for the flying Roadster.

8 Upvotes

I made a little game where you can drive forever, explore different biomes, and deliver cargo along the way.

Try it out: https://easycargo.almondhawk10.chatgpt.site


r/threejs • • 1d ago

Demo I made my portfolio a 3D room on a spaceship

11 Upvotes

Spent two weeks on this. You sit at my desk, use my computer and look through my work. I wanted it to feel like my actual space rather than another site with a grid of projects.

There's a robot called Milo, a gravity switch, and a button you probably shouldn't press.

Modelled in Blender, designed in Figma, built in three.js with AI-assisted coding (ChatGPT and Claude). Happy to answer questions on any of it.

Desktop only. www.urquhart.design


r/threejs • • 20h ago

Devlog: an interactive 3D listening room instead of a traditional artist website

3 Upvotes
I wanted my discography to feel like spending time in a record room rather than scrolling a streaming app. So I built this: the character walks to the shelf, picks the record, places it on the turntable, and sits down while it plays.

Stack: three.js + [resto]. Built with a lot of help from Claude.
Interesting bits: [ej. sincronizar audio y animación, carga del audio sin delay, mobile]

www.jrndm.com/sala3d
Feedback on performance and feel is very welcome.

r/threejs • • 1d ago

A full visual novel built on three.js + VRM — lip sync via WASM, layered painted backgrounds

5 Upvotes

I wanted visual novels with real 3D characters instead of static sprites,

so I built an engine on three.js + pixiv/three-vrm and made a full game with it:

"5 Seconds to Confess".

Tech bits:

- VRM avatars with Mixamo-style FBX motions, expression blending, auto blink

- Lip sync: vowel + mouth-open analysis from the voice audio in WASM

- Backgrounds: layered AVIF (far / mid / near) so characters can sit "behind" tables,

plus simple painted-3D sets for some locations

- Post-processing: bloom, god rays, MSAA + SMAA

- Assets streamed during scene transitions to keep the initial load small

Voice acting is Japanese only, but all text can be switched to English

(EN button on the title screen).

Game: https://game.megyo.jp/confess_in_5sec/?lang=en

Engine (AnimeVRM): https://github.com/uemegu/AnimeVRM

Happy to answer questions about the VRM pipeline.


r/threejs • • 1d ago

Demo Made a 4-player co-op zombies game that runs in your browser, built with Claude

2 Upvotes

grew up playing bo2 and bo3 zombies with my friends and always wanted to make my own. so i did with claude

its free, runs in your browser on pc or phone, no download. solo or up to 4 players, and quick play matches you with randoms.

put it out a few days ago and a few hundred people have played. two strangers who found each other through quick play made it to round 25 together in a 60 minute game which really made my week.

Want to know what you like and what you'd change. and if anyone wants to help build it out more, send me a dm :)

https://deadhertz.com/?ref=threejs


r/threejs • • 17h ago

I've been working on a medieval siege game called "Beyond the Rhine". Is this something you would play?

0 Upvotes

So... I've been developing a medieval strategy game named "Beyond the Rhine" and want to gauge interest from the community.

The game focuses on large-scale sieges against intricately designed, concentric walled cities. You can deploy vast armies consisting of cavalry, infantry, and cannons from the surrounding forests to attack these fortifications. The combat features dynamic destruction where cannon fire blows holes in the town walls, towers collapse in fiery explosions, and fires spread through the city buildings as your troops push through the breaches.

The tactical experience is supported by detailed campaign mechanics and customizable environments. You plan your army's movements on a regional map, such as preparing for the "Siege of Quedlinburg". During gameplay, you can use the settings menu to adjust environmental factors like the day/night cycle, rain, and fog to change the atmosphere of the battle. After securing a victory, the game provides a detailed breakdown of your casualties and plundered loot, followed by narrative events where you make decisions about the conquered town, such as seeking out mercenaries in the woods.

I'm trying to see if this mix of tactical deployment and explosive real-time destruction appeals to strategy fans. There is pixel mode graphics and normal 3d graphics, to mix things up...

THIS IS PRE-ALPHA, THE GAME MAY LOOK SUPER BAD IN SOME SCENES.


r/threejs • • 1d ago

Demo I made a browser toy where particles, liquids and light react to your mouse, touch or hands (three.js + WebGL2)

9 Upvotes

Each scene is custom GLSL (noise/fBm) in three.js r186, with live Web Audio synthesis and optional hand tracking in a Web Worker. Sound is off by default and the video has none. Happy to answer questions about how any of it works.


r/threejs • • 1d ago

Demo Escher’s ants in WebXR

99 Upvotes

Just a fun recreation of M. C. Escher’s famous Möbius Strip II (1963), built as a small procedural locomotion study. The ants’ movements are driven by IK and based on Cruse’s classic gait rules. You can grab the ants and throw them away, but they’ll always find their way back to the Möbius strip.
Use a two-hand pinch gesture to open a portal and explore their kinematics up close (0:12).
Works in both VR and AR; tested on Quest, Vision Pro, and Snap Spectacles.

Link: escher-ants.vercel.app


r/threejs • • 17h ago

Demo Racing sim in Three.js: 500 Hz vehicle physics, GPU tyre deformation and physics simulations

0 Upvotes

Side project, 3 days in. Everything runs client-side: Next.js static export, Three.js for rendering, Web Audio for the engine sound.

Rendering: AgX tone mapping, a PMREM sky environment, a car-tracking sun shadow, bloom, clearcoat paint, and tyres that deform on the GPU (contact patch flattening, sidewall bulge) driven by the physics.
Physics: a separate fixed 500 Hz loop with 2 kHz substeps for the tyres and suspension.

Play: https://khazp.github.io/rwanda-f1-2026-sim/
Code (public repo): https://github.com/KhazP/rwanda-f1-2026-sim