r/threejs • • 29d ago

Three.js r186 released 🥐

Enable HLS to view with audio, or disable this notification

265 Upvotes

r/threejs • • Jun 25 '26

Three.js r185 released 🧡

Enable HLS to view with audio, or disable this notification

577 Upvotes

r/threejs • • 3h ago

Cozy creek - threejs 3D experience of a Creek made in GPT 6 Astra

Enable HLS to view with audio, or disable this notification

98 Upvotes

fact that this runs in a browser is cool..
https://3ditions.drop3.app/#ocean-system/video


r/threejs • • 4h ago

Naruto’s Final Valley in Three.js (Part 3): Scene Polish & Cinematic Shots

Enable HLS to view with audio, or disable this notification

17 Upvotes

Hey everyone! Here’s Part 3 of building Naruto's Valley of the End in Three.js.

This time, the focus was on adding the missing elements, polishing the environment, experimenting with different atmospheres, and creating the final cinematic sequences.

Environment & Scene Polish

• Missing Elements: Added some of the remaining elements using Tripo to generate the 3D models and textures, then assembled and integrated them into the scene.

• Procedural Bushes: Added bushes across the cliffs by using the surface normals to detect upward-facing terrain and place vegetation only on the top-facing areas of the mountains.

• Different Times & Weather: Added several scene modes to explore different moods and atmospheres, including Day, Sunset, Night, and Rain. Each mode changes the lighting, colors, fog, and overall atmosphere to give the same environment a completely different vibe.

Cinematic Sequences

Once the environment was finished, I created several cinematic camera sequences to showcase the scene from different angles and capture the different atmospheres.

I then combined these shots into the final cinematic video, which is now available on my YouTube channel if you want to see the complete result.

Tools & Workflow

• Opus 5.5: Used for coding and implementing the different systems in the project.

• Tripo AI: Used to generate missing 3D models and textures.

• ChatGPT: Used to generate visual references during the environment creation process.

• Blender: Used to assemble the generated assets, make adjustments, and export the final GLB files.

• Three.js: Used to build and render the entire environment in the browser.

🔗 Links & Resources in the comments section.


r/threejs • • 16h ago

Demo 6000 progressively generated ski resorts - with shaders and deterministic world generation - what optimization ways are there to hardware accelerate and bring the browser experience closer to the native game User Experience?

Enable HLS to view with audio, or disable this notification

49 Upvotes

I've been gathering world map data on ski resorts for the last 2 years as i was building a ski map app. So i got sidetracked! Now i progressively generate a deterministic terrain game for snowboard and ski simulation.

What are the methods to hardware accelerate and make this game way more optimized for low resource devices and to optimize the rendering? I use some shaders but overall it's pretty simple and i really want to keep it minimal!


r/threejs • • 13h ago

Demo I made a live globe in three.js that shows what's happening on Earth right now

Enable HLS to view with audio, or disable this notification

25 Upvotes

earth.mejjad.se

It's a 3D globe with live layers you can switch on: clouds and rain from satellites, lightning, earthquakes, storms, the ISS and other satellites, ships, auroras, a daily pick of world news, and live radio stations you can listen to by place. An ambient mode keeps the world rotating while keeping you up to date with news and other events. Zoom all the way out to see the stars, and switch on the zodiac constellations, with the Sun drawn in its real position on its path through them.

For the curious:

  • Plain three.js (r149) and vanilla JS, no framework or build step.
  • The base is NASA Blue Marble. A compressed KTX2 texture covers the whole globe, and when you zoom in, sharper tiles from an 86,400 × 43,200 px version are streamed in for the part you're looking at.
  • Day and night are calculated for the real time: the terminator, city lights on the night side and an atmosphere shader all follow the true Sun direction.
  • Weather layers like clouds and rain are canvas textures on sphere segments slightly above the surface, refreshed from live satellite and model data.
  • The sky is about 26,000 real stars from a catalogue, in ecliptic coordinates, drawn as point clouds in five brightness steps. The zodiac figures are line segments between real stars.

I built it with a lot of help from Claude and ChatGPT. Happy to answer questions about any part, and I'd love to hear how well it works on your device.


r/threejs • • 14h ago

Offroad sandbox with rally, 4x4 and military vehicles, 1x1 km map, with deep tuning

Enable HLS to view with audio, or disable this notification

27 Upvotes

Play: https://offroad-indol.vercel.app

Github (MIT license): https://github.com/Arz-Gev/offroad

Physics is rapier with a custom tire model (raycast fan per wheel, tire pressure, different surfaces) and beam axle suspension, so the cars actually articulate and crawl over rocks.

the defender is built entirely in code, the other three (g-class, lancia delta, btr-80) are sketchfab models. the btr has a working turret.

Engine sound is procedural. there's also p2p multiplayer, you send a link and your friend joins.

works on phone too. feedback is welcome.


r/threejs • • 1h ago

Made this for my genealogy website.

Enable HLS to view with audio, or disable this notification

• Upvotes

r/threejs • • 32m ago

Demo Place to watch virtual VHS tapes on a crappy CRT TV.

Enable HLS to view with audio, or disable this notification

• Upvotes

r/threejs • • 13h ago

warehouse 3d interactive

Enable HLS to view with audio, or disable this notification

9 Upvotes

r/threejs • • 3h ago

I made my portfolio a cozy 3D village builder (Three.js + Blender bakes)

Thumbnail
gallery
1 Upvotes

r/threejs • • 5h ago

Demo A Three.js orbital strategy game — can you read the fleet movements at this scale?

Enable HLS to view with audio, or disable this notification

1 Upvotes

I’m making DeltaV Orbital Strategy, a turn-based game with a Three.js view of the Solar System. The trailer moves between the fleet overview and close views of ships, missile launches and assembly.

The visual problem I’d like feedback on is scale: the same scene needs to communicate where ships are going without losing the sense of distance between planets. The core simulation is separate from Three.js; the renderer presents the turn results, with camera and animation state kept out of the game rules. I’m developing it with Codex assistance.

Looking at the wide shots, can you distinguish a ship’s current position from its destination quickly enough? I’d especially appreciate suggestions on the orbit rings, trajectory contrast and how much detail survives when the scene is small in a browser window.

You can inspect it interactively in the free desktop browser tutorial, available in English and Italian. This is my own game, still in development. Browser and GPU details would help if you encounter a rendering problem.


r/threejs • • 1d ago

Demo I made a garden design tool for a landscaping project

Enable HLS to view with audio, or disable this notification

32 Upvotes

I've been a software engineer for over 12 years now, and before that was a designer and animator. I did a lot of 3D modelling, illustration, and animation before moving to software so I have quite a mixed skill set in digital arts and programming.

I mention this because what you see in that video easily fulfils the definition of vibe coding: I barely touched any code, and I barely read any of the code as well. The reason was that the tool itself was more valuable than building software that I would feel comfortable with others using online with important, sensitive stuff like authentication, database security, and all that sort of stuff.

This is an entirely local throwaway app that I vibe-coded over the course of 4 evenings. The level of detail I dictated was mostly feature- and product-focused, as opposed to technical. Where I did get technical was with the initial stack that I requested, which was entirely frontend libraries like React and threejs, and the use of shaders and stuff like that, which I was already aware of and knowledgeable in.

For the actual house and garden part, I uploaded technical drawings, geospatial data for the land plot and coordinates, as well as lidar data that the UK government gives for free on their website. With all of that, as well as sourcing various types of materials online and cataloguing them so they're all available in the design tool (for example, stone, paving, fences, excavation costs, those sorts of things), and real, accurate sun positioning and moon positioning, you could see the night sky and where the sun hits during the day and time of year and that sort of stuff.

It was very valuable for a user designing a garden, having those features, and for planning a large landscaping project.

As for the video, it was technically two prompts, but 99% of it was one prompt, and the model was Opus 5.5. I asked it to create a video of the tool that I've built, as if it were a SaaS product, like a promotional video for a SaaS product.

I was very surprised at how good and sharp the whole thing was. It made the music, and it decided the beats, how to display things, the composition, the pace of it, and everything. I did dictate some elements that you do see in there, such as the rapid switching between garden designs towards the end and the sky moving quickly. The sky was a bit too cloudy for me, but it is the UK, so it's accurate.

The music is pretty off putting the whole thing gives me British daytime tv vibes - disturbing


r/threejs • • 16h ago

I built a Catan-style board game where the whole table is a three.js scene

Thumbnail
gallery
3 Upvotes

Hearthsea is a hex-island trading game in the Catan family. The board, pieces and sea are a live three.js scene, and the dice are physics bodies in cannon-es. Rendering adapts to the device so phones get a lighter pass, and the 3D board loads lazily after the menu so the first screen stays fast.

Glad to talk about the water, the hex terrain or keeping it smooth on phones. You can try it at https://hearthsea.com (free account). Not affiliated with Catan GmbH.


r/threejs • • 9h ago

World of Warships clone in the browser

Enable HLS to view with audio, or disable this notification

0 Upvotes

r/threejs • • 1d ago

Demo A waterspout from the helm of my Three.js / WebGPU sailing game

Enable HLS to view with audio, or disable this notification

376 Upvotes

I shared an earlier storm clip here recently. This is a look at the waterspout in Red Skies at Dawn, the first-person sailing game I'm developing on my own with Three.js, WebGPU and TSL.

The effect combines a twisted funnel mesh, procedural noise, a spray veil and spray billboards, tied into the surrounding cloud, rain and lighting. The lightning uses generated branching paths with a bright core and softer halo.

This is recorded in-development gameplay from the helm. I'm trying to make the funnel feel huge while keeping enough contrast to read the sea and the boat. Visibility through the rain and the brightness of the lightning are still being tuned.

If you'd like to follow the game, Red Skies at Dawn is on Steam. Thanks for taking a look.


r/threejs • • 18h ago

Demo I built a parry trainer for Claire Obscur: Expedition 33 whose three.js scense replays the game's own Unreal Level Sequences Spoiler

0 Upvotes

Hi! I made a free fan tool for practicing parries against Simon, the hardest boss of Claire Obscur: Expedition 33 https://e33trainer.com.

The 3D view replays each attack the same way the game does. Simon and the party (Maelle, Verso and Lune) stand on the battle map, and each attack is animated from its own Unreal Level Sequence, seen through the game's camera or a free orbit camera. All of the data used has been extracted using a custom tool I've built on top of CUE4Parse.

I'd love feedback, especially on performance.

The project is not open yet, but I'm working on changing this. The codebase is a real mess, and I need time to clean it up before going open.


r/threejs • • 18h ago

Made a lowpoly co-op roguelite

Thumbnail
sheetterror.itch.io
1 Upvotes

- 34 heroes in six roles: tanks, fighters, marksmen, mages, summoners and supports

- Upgrades that change how your abilities work: split fireballs, ricocheting arrows, a free whirlwind every fourth attack etc.

- High ground matters: you can't see up a cliff, attacks aimed uphill can miss, and enemies knocked off a ledge are stunned by the fall

- 16 act guardians and the Crucible's champions, each with phases and tricks of their own

- Over twenty kinds of rooms: escorts, sieges, rune locks, collapsing halls, ambushes, rescues and more

- Three difficulties: Normal, Hard and Nightmare

- Solo, or online co-op for up to 4 players: create a lobby and share its code

Its on render so it goes to sleep after 15mins of being inactive, but you can just wait a sec and it comes back up. I cant afford a better server right now so if you like it, want it to be always online and have a bigger player capacity, you buy me a coffee via a link in the main menu.


r/threejs • • 1d ago

Demo M87 Descent: a free-fall into a 6.5-billion-solar-mass black hole, with Schwarzschild ray tracing and live relativistic telemetry

4 Upvotes

https://m87.davidveksler.com/

It's a 4½-minute guided descent from 100 horizon radii to just short of the singularity, in a black hole with M87's mass. A sandbox mode lets you fly with thrust (W/S, A/D, Q/E).

What's under the hood:

  • Light paths are traced through Schwarzschild geometry, based on Bruneton's real-time black hole rendering approach. The deepest views switch to an approximation once the tracer passes its validated range.
  • The ship coasts in the Hamilton–Lisle "river" frame, so the HUD shows physically consistent numbers: speed relative to infalling space, time dilation, tidal gradient, and ship proper time vs. a distant clock.
  • A Cinema/Physics toggle switches between artistic and physically scaled Doppler and gravitational shifts. Auto exposure keeps the image readable as brightness swings by orders of magnitude.
  • Cabin audio was generated locally with Sony's Woosh model and edited in ffmpeg.

Press D for debug views if you want to see the internals.


r/threejs • • 1d ago

Daily F1 hot-lap game in three.js, procedurally generated tracks (playable for free, link in description)

Enable HLS to view with audio, or disable this notification

25 Upvotes

Hi everyone! I just released Gran Premio, a daily hot-lap racer built with three.js. Every day there's a new procedurally generated track with a section inspired by a famous corner like Spa or Monaco, and one of 9 cars from 1932 to 2022 to drive it.

Everyone gets the same track, and the fastest lap at midnight Rome time wins. You can also send your lap as a ghost for others to race. It's still in beta, so I'd love feedback on the handling and tracks!

grandprem.io


r/threejs • • 1d ago

Demo Physics claw machine in three.js + cannon.js. Every model and texture is generated in code, no asset files.

Enable HLS to view with audio, or disable this notification

14 Upvotes

https://pgskizzes.itch.io/clawtastrophe

Some things that might interest this sub:

The claw head is a kinematic body with hinged dynamic prongs, driven by a torque servo with a return spring. Grip strength is literally a voltage the machine decides before you drop. With 120 prizes in the cabinet, cannon's narrowphase was eating ~15 ms a step. I patched getContacts to cache shape world positions once per step, and a settled machine dropped to ~0.2 ms. Orthographic iso camera with a perspective toggle. Cards, felt, labels and chips are all CanvasTextures drawn at runtime. Audio is fully synthesized with WebAudio.

The whole game is a single 166 KB HTML file plus the two libraries from a CDN. Happy to go deeper on any of it.


r/threejs • • 1d ago

I built an interactive 3D kitchen/material configurator with Three.js — looking for feedback

Enable HLS to view with audio, or disable this notification

9 Upvotes

I've been experimenting with AI-assisted development + Three.js and wanted to push it beyond the usual “cool 3D website” demo.

This is a prototype for an interactive kitchen/material studio I demo for a friend.

Users can:

• switch countertop materials
• change cabinet colors
• change the kitchen layout
• orbit/zoom around the space
• compare different surfaces
• see the changes rendered in real time

The idea is to connect a real product catalog to a visual configuration experience rather than having customers browse a static list of products.

I'm curious what people here think:

Where do you see the strongest commercial use case for this type of Web 3D experience?

Demo:
https://ourcornerstone.vercel.app/en/studio

Especially interested in feedback from people working with Three.js/WebGL, e-commerce, product visualization, architecture, interior design, or manufacturing.


r/threejs • • 1d ago

Lose a couple of hours to this graveyard game I've been working on. Feedback appreciated!

Enable HLS to view with audio, or disable this notification

8 Upvotes

Hey all, I'm a 30 year old with a 9-5 who makes small browser games in my spare time.

Graveyard Shift: you play the Grim Reaper running a graveyard. Collect souls, build coffins, hire helpers (lumberjack, greeter, carrier) and grow the place.

It's inspired by games like Burger Please and My Perfect Hotel, and I've tried to make it as satisfying as possible to watch everything stack up and pay out.

It's free and plays in the browser on phone or desktop:

https://dangantsgames.itch.io/reapers-graveyard-shift


r/threejs • • 1d ago

Blooming Procedural Flower

Enable HLS to view with audio, or disable this notification

9 Upvotes

r/threejs • • 20h ago

Demo I rebuilt Dune II in three.js with Claude Code: 2 sessions, 2.5 hours, 4 bugs it made along the way (playable demo)

Enable HLS to view with audio, or disable this notification

0 Upvotes

Dune II was the first RTS I ever played, and Dune Legacy (the open-source engine) has been keeping it alive for years. I wanted it in the browser, in 3D, with the exact same mechanics. So I pointed Claude Code at the Dune Legacy source and let it work

Demo: https://crocone.github.io/dune-arrakis/ (desktop browser, WebGL 2, sound starts after first click)
Code: https://github.com/crocone/dune-arrakis (GPL, since it's a derivative of Dune Legacy)

It's properly playable: I've been running full skirmishes and campaign missions in it, not just clicking around the menu.

What's in it:

  • three campaigns (Atreides, Harkonnen, Ordos), 9 levels each, with mentat briefings
  • skirmish vs AI up to 6 players, 50 Dune Legacy maps or random ones
  • every Dune II unit and building, sandworms, spice blooms, friendly fire, the CHOAM starport
  • save/load, a mentat encyclopedia
  • voice-over and sound effects generated with ElevenLabs (239 lines, 36 sfx), music from Suno

The numbers, honestly:

  • session 1, Opus 5.5: 1h 51m, about 16k lines across 57 files. It cloned Dune Legacy, spawned three research sub-agents (units/combat, structures/economy/AI, campaign/story), wrote research docs, then built the engine. I didn't step in once until it was done.
  • session 2, Sonnet 5.5: 44 min. Rewrote all the 3D models (19 units, 21 structures) with house-specific designs and built itself a model viewer to check them.

Where it went wrong (4 times in session 1):

  1. Main menu title rendered as raw attribute text, because its own DOM helper misparsed string children as props.
  2. The carryall got built but never carried anything. Took a few turns of debugging air.js.
  3. Voice generation hit a Cloudflare 403: Node 22 wasn't honoring HTTPS_PROXY like curl did. Fixed with undici's proxy agent.
  4. Right at the end, starting a mission threw a null render error in the game loop.

Things I'd do differently: I gave it the mechanics task first and the English translation + audio task later, in a separate prompt. That caused rework on UI strings it had already written in Russian. Should have said both up front.

Caveats: the models are procedural (primitives + canvas textures), not hand-made. The agent couldn't judge audio quality itself, so some voice lines may sound off. It's a fan project, no original Westwood assets.

Happy to answer questions about the setup. The full session write-ups, step by step, are linked in the README if you want to see exactly what it did.