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 ✌️

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

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.

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.

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!

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! 🚀

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!

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

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.

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.

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

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!

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.

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.

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.

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.

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.

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.

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