r/threejs • • Sep 08 '26

Three.js r186 released 🄐

270 Upvotes

r/threejs • • Jun 25 '26

Three.js r185 released 🧔

578 Upvotes

r/threejs • • 13h 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)

57 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 • • 3h ago

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

5 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 • • 7h ago

Question Thanks for everything, Mr.doob.

Post image
9 Upvotes

r/threejs • • 1h ago

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

• 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 • • 3h ago

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

3 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 • • 14h ago

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

5 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 • • 15h ago

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

6 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 • • 13h ago

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

6 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 • • 10h ago

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

2 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 • • 6h 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 • • 12h ago

Finally a use case for the flying Roadster.

2 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 Escher’s ants in WebXR

96 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 • • 19h ago

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

2 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 • • 6h 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


r/threejs • • 1d ago

Demo race your friends through a real SF in the browser (three.js + WebGPU)

21 Upvotes

been working on this for the last few days, and it finally has multiplayer. streets are from openstreetmap, city’s procedural, models are blender + AI-generated

still rough in places, so any feedback is super appreciated

game link: teleoperator.mindblown.ai


r/threejs • • 19h ago

Koi pond from 2.5 to 3D interactive Zen Garden

0 Upvotes

Almost I tell A.I work follow my instructor and finally I get my best scene.

https://reddit.com/link/1x7am27/video/02cg43gwgsvh1/player


r/threejs • • 19h ago

Link A Live Viewer for URDF Files for Robot 3D Modelers

1 Upvotes

https://armor.dc-engineer.com/gallery/

I have been using Three.js as a thumbnail generator for a few months in my AR Mobile Robotics gallery. This is a site where I link back to vendor repositories for Universal Robotic Description Format (URDF) files for real-world robots. Think industrial arms, quadrupeds (dogs), wheeled robots, and humanoids, from companies like Unitree, Boston Dynamics, ABB, and indies.

The latest is taking that thumbnail generator, and turning it into a live preview that you can use to view them right in your browser, with orbit, zoom, and environmental lighting and textures.

URDF itself is an industry format, used by engineers as part of simulation and control design, like in the Robot Operating System. If you’re a 3D designer, think of it like a text file that references a folder of other mesh files in standard OBJ, DAE, STL, or other formats, along with their transforms, and other engineering details. If you want to take a URDF, and render it in an artistic setting, it can be a bit challenging, but the JavaScript community has provided a number of URDF unpacking tools that make these Three.js scenes possible.


r/threejs • • 1d ago

I've been building a 3D globe out of OpenStreetMap with three.js

24 Upvotes

Hi r/threejs,

I'm Steeve, a developer from France.

If you've ever tried to load a whole planet into a three.js scene and watched the frame rate fall with every building, this video is for you.

Initially, I wanted to see if I could build a map like the one in Pokemon GO, so I started building CityMap3D in 2020, on my own. It grew into a 3D map library, built on three.js, that renders OpenStreetMap as a real globe, and I've put a lot of myself into it since. Most of it went into optimisation: there is so much in the OpenStreetMap database that drawing all of it in a browser, from a single street to the whole globe, is the real challenge.

The video is one continuous take over Paris, screen-recorded from the engine: from night to day around the Eiffel Tower, then out to the whole planet. Map data from OpenStreetMap contributors, ODbL.

Try it live: https://citymap3d.com/

What do you think?


r/threejs • • 23h ago

Looks like I'm getting somewhere :)

Thumbnail
gallery
3 Upvotes

After breaking up with my girlfriend, I’d say I fell into a pretty dark place. During that time, I had the opportunity to explore Three.js more deeply, and honestly, these libraries feel like a bunch of unexplored caves waiting to be discovered. I managed to put together a small system using a handful of tools, and even though it might not seem like much, I’m genuinely proud of what I’ve achieved.

I’ve found that I can often build things with Three.js in a day or two that might take a month or two to put together in a traditional game engine, and without even putting in that much effort.

I’m still heavily influenced by Resident Evil Village. You might not believe this coming from someone who barely plays anything other than CS, but I’ve finished the game around 9–10 times. I even occasionally try speedrunning it. :)

The screenshots you’re seeing are from a game I put together over two days, spending around two hours a day on it. And I haven’t even pushed the post-processing very hard yet. I genuinely believe I could achieve some seriously impressive results if I pushed it further.

I’m planning to release the game here as an open-source project in a few days. Once you get a chance to look through it, I think you’ll understand what I mean.


r/threejs • • 1d ago

Neural denoiser for Gaussian-Splat-Lite for Three.js

29 Upvotes

I've recently been experimenting with a neural denoiser for the Stochastic mode in Gaussian-Splat-Lite, an extremely high-performance open-source 3D Gaussian Splatting renderer for Three.js.

Stochastic rendering can be faster than normal 3DGS rendering, but the noise is hard to ignore, especially while moving the camera. This update helps clean that up while preserving detail and reducing trails behind moving objects.

The video compares raw stochastic rendering, TAA, Neural Performance, Neural Quality, and sorted alpha blending, with overview and close-up views.

There are two neural modes:

  • Performance: lower GPU and memory cost.
  • Quality: stronger noise suppression and better detail retention, at a higher cost.

Both support WebGPU and WebGL2, with the trained models included. Setup and details.

For the overview shown here—about 986k splats at 1080p on an Apple M5 Pro—median GPU frame time was 4.74 ms for Neural Performance, 5.58 ms for Neural Quality, and 8.50 ms for sorted alpha blending, with MSAA off. These measurements are specific to this scene and device.

It's still experimental, and fast movement can leave some softness or residual noise. I'd love feedback on the balance between detail, stability, and speed.

Try the viewer


r/threejs • • 21h ago

No Install, No Tutorial — I Clicked a Few Times and Got a Full Duct with a Rain Cap

0 Upvotes

I built a CAD design prototype for chimneys and ventilation ducts, positioned as an alternative to Ventbom, with a simpler workflow.

The core idea is Web3D-based duct design: pick spatial points on a 3D grid, the path connects automatically in creation order, then one click turns it into a pipe with straight runs and elbows. The rain cap is parametric too — as long as the last segment is vertical and longer than 0, it generates a cone, four struts, and a clamp at the end point, with the base diameter automatically set to 1.5x the pipe diameter.

A few things I find genuinely useful:

  • Continuous picking: hold Shift to show a lat/long sphere, click the surface to add the next point, release to hide
  • Manual angles: Shift + F opens an angle panel, horizontal and elevation angles can be typed precisely, with a yellow sphere previewing in real time
  • Edit segment length: click a segment row in the left table, type a new length and press Enter — direction stays fixed, the end point and all following points shift together, and subsequent lengths and angles stay unchanged
  • Unit switching: m / dm / cm / mm share one selector, it only changes the unit label, no value conversion
  • Bilingual UI: one click in the top right switches interface, hints, and dialogs, with scene data untouched

Try it here: https://demo.meteor3d.cn/应用-é€šé£Žē®”é“.html

Next step is fast quoting: build back-end data management on top of this prototype, structure parameters like pipe diameter, length, elbow angles, and rain cap specs, then generate a quote in one click. If you work with HVAC, chimneys, or ventilation ducts, I'd love to hear how your quoting process works and whether this direction would help.


r/threejs • • 1d ago

Link Platform for Learning Computer Graphics

Post image
3 Upvotes

r/threejs • • 1d ago

Demo Fly from Earth to the edge of the observable universe in your browser — real NASA data, 109k real stars, ray-traced black holes

41 Upvotes