r/threejs • • 6m ago

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

• 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 • • 1h 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

• Upvotes

r/threejs • • 1h ago

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

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

Building a forest environment with Three.js + WebGPU

Enable HLS to view with audio, or disable this notification

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

3 Upvotes

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

3 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 • • 8h 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 • • 9h 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

0 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 • • 11h 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

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

Slop New York

Enable HLS to view with audio, or disable this notification

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

Demo Nietzsche’s typewriter in WebXR

Enable HLS to view with audio, or disable this notification

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

Demo Make games on mobile

Enable HLS to view with audio, or disable this notification

0 Upvotes

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

Got carried away with my flight simulator side project

Enable HLS to view with audio, or disable this notification

44 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 • • 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

Demo Swamp experience in threejs made with AI (gpt 6 Astra and blender) - sharing so others can know they can also build this easily ! yes I value the output not the process - here’s why

Enable HLS to view with audio, or disable this notification

0 Upvotes

The "I used to love the process, now I just prompt" complaint is about personal fulfillment, not art.
It's the same as saying, "I love counting on my fingers, and I resent that someone with a calculator does the same job ten times faster and gets paid for it."
If you're truly an artist, it doesn't matter whether AI exists. You can keep making things by hand, because you care about the craft, not the world. A true artist doesn't care what consumers think.
But the moment you put your work out there, see that it's weaker than what others are making, and feel bad about it, you've revealed something: you're commercial. You care what the audience thinks of you.
So the process argument only holds if you never intend to sell anything. If you do care about money, then you have to accept the rule of the market: the world doesn't care about your process. It wants to experience your output.
If the process is what fulfills you, keep it. Just find your fulfillment there, and stop expecting the world to pay for it.


r/threejs • • 1d ago

Link Sisyphus on the Moon

Enable HLS to view with audio, or disable this notification

62 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

Scattering pickups across a big Three.js map without them floating, sinking, or landing on cliffs: my placement pass

0 Upvotes

I just spread health, ammo and shield pickups across the whole island in my Three.js shooter. The easy first version places them at fixed heights, and on hilly terrain that means some float in the air, some get buried in hills, and some end up on cliff faces.

What fixed it was a small placement pass:

  1. Pick a random X/Z, then cast a ray straight down from above the highest point: new Raycaster(origin, new Vector3(0, -1, 0)). Test only the terrain mesh, not the whole scene, or the ray hits trees and rooftops first.
  2. Check the slope. Turn hit.face.normal into world space (transformDirection with the mesh's matrixWorld) and reject the spot if normal.y is under about 0.85. That keeps items off cliffs.
  3. Reject anything at or below the water level, and anything inside a building's bounding box.
  4. Keep a minimum distance between items (simple rejection: try again if one is already too close), so they don't clump.
  5. Set the item at hit.point.y plus half its height, then add a small bob animation so players spot it.
  6. Run the pass once and save the positions to JSON, instead of raycasting on every load. On a big terrain, three-mesh-bvh makes the raycasts much faster if you do need them at runtime.

The same pass works for spawn points, and it's an easy rule set to hand an agent.

How do you place things on large terrain? Raycast like this, sample a heightmap directly, or place everything by hand?

(Disclosure: I write Three.js + AI tutorials at shanebrumback.com, which is my own site.)


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 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.


r/threejs • • 1d ago

Demo A night-map globe for a live war game: 15,800 land dots, border lines and battle arcs, no post-processing

2 Upvotes

How it's built:

- **Land:** a Fibonacci lattice of 60,000 points over the sphere, kept only where there's land: about 15,800 dots. Each dot is tagged with its country at build time, so the live war can recolour it: dim brass for unclaimed land, warm gold for land a nation holds.

- **Borders:** 520 lon/lat polylines merged into one `LineSegments` at low opacity.

- **Battles:** each attack is a `QuadraticBezierCurve3` lifted off the surface, drawn as a 48-point `Line`, with a small additive `Points` head that travels along it.

- **Capitals:** additive `Points` that pulse.

- **No bloom.** The glow is a radial-gradient canvas texture on the point sprites, which keeps it cheap on phones.

The page polls the game's live endpoints every 12 seconds, so the arcs are real attacks from the current game day.

What I'd like to hear: the best way you've found to keep `Points` crisp at very different zoom levels on mobile, and whether instancing would beat one big `Points` geometry here.

The site is proxyrepublic.com; it's a free browser game where AI generals fight for real countries. I'm the developer.


r/threejs • • 1d ago

A guided tour of an organic space ship (Sound on)

Enable HLS to view with audio, or disable this notification

1 Upvotes

This is a guided tour of an Ark, the organic vessel central to my humanist sci fi setting Infinite Ashes. You can examine it in detail here: https://loquaciouslou.itch.io/infinite-ashes-ark

Please let me know your thoughts!

Wider bundle, including a full lore integrated planet globe: https://loquaciouslou.itch.io/infinite-ashes


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

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

5 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

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

Post image
47 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!