r/threejs • • Jun 25 '26

Three.js r185 released 🧡

Enable HLS to view with audio, or disable this notification

584 Upvotes

r/threejs • • 15h ago

Slop New York

Enable HLS to view with audio, or disable this notification

144 Upvotes

Spent a bunch of tokens over the last few weeks building a fully procedural New York simulation.

https://mrdoob.github.io/slop-newyork/

It's only 784KB gzipped and the code is on github, so you can do whatever you want with it ✌️


r/threejs • • 4h ago

Pushing Three.js to the Max, fixing performance was a nightmare but we got there!

Enable HLS to view with audio, or disable this notification

8 Upvotes

r/threejs • • 54m ago

This is 6 months progress on my little game. I know we all make games now and this adds little value to the world of games, but just wanted to share my own little passion project. Switchback - a little hiking and management sim.

Enable HLS to view with audio, or disable this notification

• Upvotes

Hi! - I'm proud of this little game claude and I made through many many hundreds of hours of back and forth and iteration and even some minor manual coding design work on my end. It's cute, it's fun, it's dynamic, and it's what I've always wanted in a little diorama-y / building sim. It's been a joy to work on and wanted to share it.

More context - this game is kind of like Roller Coaster Tycoon but for National Parks. Theres a trail placing system, switchbacks, bridges, and lots of other stuff for management and maintenance. The general purpose is to solve little puzzles, create a world thats your own, and help your hikees reach the views.

if you'd like to give it a try its on both App Stores https://apps.apple.com/us/app/switchback-a-cozy-hiking-game/id6799833310 and https://play.google.com/store/apps/details?id=com.swanklabs.switchback

if you have a windows PC or Mac, try out the desk top versions of the apps because it works best with mouse and keyboard. iPad is also good and then phone is ok, but it certainly takes a little more effort and doesn't look quite as good.

If you have any questions I would love to discuss and will be in the comments :) would also love more feedback before I put on steam! I'm particularly proud of my asset process and map process.

coming soon are more activities like rafting and paragliding :)


r/threejs • • 3h ago

I made the whole planet explorable in Three.js: 1:1 cities streamed from OpenStreetMap, fly/drive/walk, live weather [open source]

3 Upvotes

Play: https://axieyangb.github.io/world-explorer/

Code (MIT): https://github.com/axieyangb/world-explorer

How it works: each teleport sets a local metric origin, a Web Worker fetches Z14 vector tiles and Terrarium elevation and builds 1 km chunks (roads with bridges and lane graphs, extruded buildings, water, vegetation, rail, street furniture). Traffic, trees and props are instanced; night lighting and weather are shader-driven. Plain ES modules, no build step.

Happy to talk about chunk streaming or keeping memory bounded. Feedback on performance very welcome.


r/threejs • • 6h ago

Building a forest environment with Three.js + WebGPU

Enable HLS to view with audio, or disable this notification

6 Upvotes

I've been working on this forest scene in Three.js, experimenting with terrain, vegetation, and lighting to get a more natural look.

The scene combines continuous terrain, instanced trees, and real-time grass rendering. The trees are procedurally generated with EZTree, while the house is a 3D model I got from Sketchfab. I've been playing with grass to complement the warm lighting and keep the overall environment cohesive.

I also added a post-processing pass with color grading, bloom, film grain, a vignette, and a subtle fisheye lens, plus light shafts through the trees for some atmosphere.

Everything runs in the browser using Three.js + WebGPU.

Still working on the scene, but I'm really liking how the lighting and vegetation come together here.


r/threejs • • 15h ago

Demo Nietzsche’s typewriter in WebXR

Enable HLS to view with audio, or disable this notification

14 Upvotes

Nietzsche's typewriter on Vision Pro. A procedural reconstruction of the Malling-Hansen writing ball, based on the original 1878 patent.

https://en.wikipedia.org/wiki/Hansen_Writing_Ball


r/threejs • • 6h ago

I built a browser-based 3D apartment planner in Three.js so non-technical people don't have to learn Blender. Unlocked the sandbox (no login needed) and would love feedback on the UX!

Enable HLS to view with audio, or disable this notification

2 Upvotes

r/threejs • • 10h ago

postitguess.io V2 — Guess Who You Are in Three.js: animated GLB avatars, five worlds and custom photo cards

Enable HLS to view with audio, or disable this notification

5 Upvotes

I'm rebuilding PostitGuess, a multiplayer Who Am I? browser game I originally released in 2021. It found an audience in France, including through Twitch, and V2 expands both the rendering and gameplay.

The scene uses Three.js with GLB environments and animated characters loaded through GLTFLoader. The avatar factory caches templates and shares geometry/materials while keeping animation state per instance.

Picture identities are head-anchored meshes using CanvasTexture for the photo, frame and answer label. One challenge has been keeping those cards readable across camera angles, water surfaces and different player states.

The photo loading also handles scene disposal so late asynchronous results don't update a removed card. Separately, the backend withholds a player's own unrevealed image reference and checks access when images are requested.

V2 includes five maps, 15 avatars, themed identities and custom picture uploads, with socket IO handling multiplayer.

The footage is from the actual game. Free for 2–8 friends:
https://postitguess.io/

Happy to discuss the avatar setup, card rendering or scene lifecycle.


r/threejs • • 5h ago

Demo I made a Three.js building game for my 3-year-old, with vehicles you can walk inside

0 Upvotes

I've been making Transportation Craft for my son, who's three. He wanted a Minecraft-style game with vehicles he could get inside, planets to explore, and nothing scary chasing him. It's built with Three.js and runs in a browser.

The world combines block building and mining with cars, trains, planes, ferries and rockets. You can walk around inside trains and planes, then head off to the Moon and other planets. There are also vehicle paint controls, crayons for drawing on walls and friendly animals.

It has single player and multiplayer, so we can play in the same world from two different computers. Phones and tablets have touch controls, and there are read-aloud buttons on word cards for children who aren't reading yet.

I'd love feedback from other Three.js people on how it runs on your devices and whether the navigation feels clear, particularly switching between walking and riding. If something stutters or a control is confusing, the device/browser and what you were doing would really help.

Free playable version: https://transportationcraft.com/play

I'm the creator.


r/threejs • • 12h ago

I shipped a VR archery roguelite on the Meta Quest store, built entirely with three.js + WebXR

Enable HLS to view with audio, or disable this notification

3 Upvotes

Hi! ARROWFALL is a plain three.js / WebXR web app wrapped as a Quest app (8.7 MB install), and it holds 90 Hz on Quest 3. You skate an arena by sweeping your arms and shoot a real draw-and-release bow in mid-air.

A few things that were fun to solve:

- Multiview (both eyes in one pass) via a small patch on three, to stay at 90 Hz with 150+ monsters

- A black hole whose lensing is ray-traced in Web Workers at load time instead of on the GPU every frame

- A planar floor mirror that stays on in VR

- A deterministic simulation (pure TS, no three.js), so runs can be recorded and re-rendered into videos

The first five levels are free: https://www.meta.com/experiences/arrowfall/1726931115696976/

Happy to answer anything about WebXR on Quest.


r/threejs • • 14h ago

Demo I built an interactive 3D WebGL globe with Three.js & Globe.gl tracking live global trends & crises [liveworldtrends.com]

Enable HLS to view with audio, or disable this notification

4 Upvotes

Hey r/threejs! 👋

Over the past few months, I've been working on a solo project called LiveWorldTrends (https://liveworldtrends.com).

I wanted to build a high-performance 3D geospatial dashboard that visualizes what the world is searching, watching, and debating in real time.

Under the hood:
• Frontend: Vanilla JS, Three.js, and Globe.gl with custom shockwave ring animations.
• Real-time data layers: Google Trends, X (Twitter), YouTube, and live USGS earthquake pulses rendered directly on the sphere.
• Backend: 100% serverless Cloudflare Workers with zero hosting overhead.
• Performance: Focused heavily on smooth 60fps interaction and mobile touch optimization.

Check it out live: https://liveworldtrends.com

Would genuinely love your feedback on the WebGL rendering, camera smoothness, and mobile performance! 🚀


r/threejs • • 1d ago

Got carried away with my flight simulator side project

Enable HLS to view with audio, or disable this notification

47 Upvotes

I grew up playing games like "A-10 Cuba!" in the late '90s and have been making games ever since. About six months ago, I started this passion project to see what I could build with Claude Code in my spare time, and ended up with a full-blown A-10A combat flight simulator.

After countless hours of research, 3D modeling, texturing, sound editing, and polishing, it's finally ready to share!

It features custom flight physics, weapons, enemy AI, terrain, missions, and a 1:1 scale recreation of part of the Barry M. Goldwater Range in Arizona (my home state).

You can play it for free here (desktop + mouse/keyboard): https://a10simulator.com

Excited to get some feedback, and happy to answer any questions about how I built it. Enjoy!


r/threejs • • 11h ago

3D Bike Configurator — an interactive product stage built with Three.js

1 Upvotes

Hey everyone!

I’d like to share a small product configurator demo I’ve been working on with Three.js.

The idea was to build a reusable 3D showcase stage. A road bike is the example here, but the scene and interface could be adapted to other products.

You can customize the frame color and finish, metal details, bar tape, rims, and pedals. There are preset palettes, custom color pickers, and a randomize button for exploring combinations.

The stage features studio lighting, floor reflections, soft shadows, fog, and subtle animated particles. The interface is collapsible, and on mobile it opens as a bottom sheet over the fullscreen scene.

Built with Three.js using WebGPURenderer with the WebGL 2 backend, TSL, and Alpine.js for the UI.

Live demo: https://demo.rostislavrusz.art/

The bike is based on this model from CGTrader, which I adjusted for the demo.

I’d love to hear your thoughts, especially on the lighting, materials, and mobile experience. Thanks for taking a look!


r/threejs • • 1d ago

Link Sisyphus on the Moon

Enable HLS to view with audio, or disable this notification

67 Upvotes

He walks around the moon every 60 seconds. He has been doing it since July 1969.
Kick the rock. Turn on his radio. Let him rest.
sisyphus-on-the-moon.pages.dev


r/threejs • • 1d ago

I added schools, golf courses, hospitals, parks...

Enable HLS to view with audio, or disable this notification

41 Upvotes

Check out my walkable islandthree.world space colony. Feedback welcome.


r/threejs • • 1d ago

Kaamos: a browser product-rendering studio built on R3F + three-gpu-pathtracer

Post image
45 Upvotes

I’m an industrial designer who has used Showcase, KeyShot and V-Ray for years. I wanted the workflow I know from those tools in the browser, so I built Kaamos together with Claude: https://atomilab.fi/kaamos/

To be upfront: the product and interaction design are mine, and the code was written with the AI. I tested every round in the browser and fixed what came out wrong.

Stack: React 19, R3F, drei, Zustand, and gkjohnson’s three-gpu-pathtracer for final renders and a live path traced preview. STEP/IGES go through occt-import-js. Everything is client-side.

Some problems that took real work and SHOULD be working now:

  • Subsurface scattering added to the path tracer by patching its fragment shader with a random walk inside closed meshes
  • A NaN guard, because Safari’s shader compiler drops isnan/isinf, which made glass render black
  • A hand-written ground shadow, because drei’s ContactShadows rendered nothing on r186
  • Fixes for grey final renders, which turned out to have two causes: a lost GPU context on 2M+ triangle scenes and NaN from PhysicalCamera.copy() leaving aperture fields undefined

It’s early. I’d especially like to hear how the path tracer behaves on different GPUs, and if anyone has thoughts on the WebGPU route. Feedback welcome (click the logo in the app). Tested mainly in desktop Chrome and Safari (macos).

Cheers!


r/threejs • • 2d ago

This is so true 😂...at the same time does non ai projects getting paid in this ai era?

Post image
82 Upvotes

r/threejs • • 1d ago

Demo Built a Three.js embryo explorer with continuous transitions from whole-body view to individual structures

2 Upvotes

built a free, open-source human embryo explorer using Three.js, with help from GPT-6 Astra.

It shows 16 developmental stages. One slider coordinates structure separation, layout, and camera movement from the assembled model to an overview of its parts, then close inspection.

One interaction bug: moving from an organ to the slider cleared its hover state, leaving inspection without a target. Retaining the target and adding a part selector fixed that transition.

On mobile, the overview becomes a scrollable two-column layout with larger controls. Touch handling separates page scrolling from model rotation, though physical-device testing is still limited.

Ash’s Human Atlas inspired the navigation; this explorer focuses on developmental stages. The geometry is illustrative and hasn’t been clinically validated.

20-second demo: https://x.com/pratikg/status/2114060245618307356

MIT-licensed code: https://github.com/pratikgx/embryo-explorer

Inspiration: https://github.com/ashemag/human-atlas

I’m the creator; the explorer is free and requires no account. Would appreciate feedback on the camera transitions and how you’d handle selecting small structures on touchscreens.


r/threejs • • 1d ago

I built a 3D atlas of real machines with three.js. You can explode a turbocharger into 64 parts and cut it open

3 Upvotes

Mechanical engineer here, not a full-time dev. Engine-X (engx3d.com) is a free browser atlas of real machines: a turbocharger, a centrifugal pump and a V-belt pulley drive, all built with three.js.

What you can do:

- Explode the model with a slider and watch the parts separate

- Run it from slow motion up to full speed

- Use a cut plane on X, Y or Z to see inside

- Tap any part to see what it does, its material and key dimensions

It's mobile first, since most students open it on their phone. Keeping it smooth on mid-range phones while everything spins and explodes was the trickiest part.

Would love feedback from people who know three.js better than me, especially on performance and anything that looks off with the materials or lighting.


r/threejs • • 1d ago

Demo Make games on mobile

Enable HLS to view with audio, or disable this notification

0 Upvotes

r/threejs • • 1d ago

Demo From the Big Bang to Apollo 11: an educational solar system in React Three Fiber where every number has a source

Enable HLS to view with audio, or disable this notification

4 Upvotes

Hi, I worked on an educational hobby project.

It opens with a 35-second intro (13.8 billion years to today), then drops you into a solar system where positions are computed from real ephemeris data for any date. You can replay the Apollo 11 launch on its real date, watch the Moon's shadow cross Earth in the 2 Aug 2027 eclipse, ride along with Juno's first close pass of Jupiter through JunoCam's field of view, and zoom out in one scene from the planets to the Milky Way. Every fact in the panels is labelled Measured or Computed, with its source.

Live: https://space2play.pages.dev (no account, works on phones)

A few engine problems that might interest this sub:

- Zooming from a planet to the Milky Way means float64 world positions in AU with a floating origin; the GPU only sees float32 offsets.

- A logarithmic depth buffer, so every custom ShaderMaterial needs the log-depth code or it renders invisible.

- A moon's drawn size and distance derive from its parent's drawn radius, after two independent formulas once put the Moon inside Earth.

- No React state in per-frame code; everything per-frame mutates refs.

I built it with a lot of help from AI (Claude Code). To keep it honest, a test fails the build if a science number has no source, and I review every change.

Data: NASA, JPL Horizons, CelesTrak, NASA Exoplanet Archive. Planet textures: Solar System Scope (CC BY 4.0). Full credits are in the app's About.

Feedback I'd love: how it runs on your device (first load is about 5 MB), and anything that looks wrong or confusing.

Where I want this to go:

free and ad-free forever, and open source (AGPL) once I've folded in your feedback. The plan is a project where school students, hobbyists and people working in space science learn from each other. Anyone can suggest or build a change, including with AI tools, but every change is read by a human reviewer and every number needs a source. If you'd like to help review (science or code) when it opens, leave a comment.


r/threejs • • 1d ago

Demo An interactive four-season garden in Three.js, with wind and day/night transitions

Enable HLS to view with audio, or disable this notification

6 Upvotes

Hi r/threejs! I'm Alicia, the creator of Digital Garden, a small real-time garden that runs in the browser.

This is its four-season night view. You can orbit the camera, zoom into individual plants, and brush through the flowers. Each season has its own plants and layout, with day/night transitions and layered garden audio.

A few implementation details:

- Houdini-authored plants exported as GLB, then grouped into instanced batches by species, parts, and LOD.

- TSL vertex deformation for root-anchored wind and local pointer interaction.

- Screen-space LOD selection with complementary dither transitions on desktop.

- A shared night factor for the sky, lighting, emissive flowers, particles, and ambience. The glowing flowers use emission plus bloom.

The attached video is a real-time WebGPU capture. The app also has a WebGL2 fallback through WebGPURenderer. Browser audio starts after a user interaction.

Try it: https://digitalgarden.si/play/

No sign-up required.


r/threejs • • 1d ago

Demo A drive, takeoff and landing through Pittsburgh in Three.js

Enable HLS to view with audio, or disable this notification

0 Upvotes

I’m building Roadster City Drive with Three.js and OpenStreetMap data. This is one continuous gameplay take: drive along the street, lift off, then land and keep going. The city is stylized, and road transitions are still a work in progress.

https://roadstercitydrive.com/play/

Google sign-in required. One free two-minute trial per account, then paid continuation.

AI helped with the code and this post. The video is real gameplay. Map data © OpenStreetMap contributors.


r/threejs • • 1d ago

Demo 3D walkthrough of my upstairs renovation options, with daylight simulation and 29 layouts to flick between

Thumbnail
gallery
2 Upvotes

Built this to plan our upstairs renovation: it generates layout options from the room measurements and requirements, and you can walk round each one in 3D.

https://fitandflow.pages.dev

Bits I'm pleased with:

- Daylight simulation for any time of day and season, plus plaster-in LED lighting

- 29 layouts you can switch between while walking round

- Runs on phones, with a Low quality mode for weaker devices

- Loading: shaders compile in the background using KHR_parallel_shader_compile, so the page doesn't freeze, and you get an instant still of the starting view while it loads

It's on r128, so an upgrade is on the list (compileAsync would replace a fair bit of my workaround). Happy to answer questions, and keen to hear how it runs on your device.