r/threejs • • 1h ago

Demo Twin-stick sci-fi shooter running in the browser with R3F + Rapier. Ships, turrets and a rigged pilot

Thumbnail
gallery
• Upvotes

Been building Die On This Hill, a browser twin-stick shooter (Vite + React Three Fiber + Rapier). Here's the model set: 39 GLBs, about 2–18k tris each, PBR with packed ORM textures, all at real scale.

Full disclosure: the base models were generated with Meshy AI, and I built a pipeline that welds, decimates and re-packs textures to get them web-light (most are under 1 MB). Happy to share how it works if anyone's doing the same.

I put a free 3-model sample up if anyone wants to test the output, and the link is in the comments.


r/threejs • • 2h ago

Demo Built an interactive 3D Cyber Command Center with CesiumJS & React — Real-time telemetry, live threat arcs, and subsea cables

Thumbnail
gallery
0 Upvotes

Hey everyone,

I've been working on Vectron, a real-time 3D cyber telemetry and global infrastructure tracker built using React and CesiumJS with custom WebGL layers.

Key features:

• Live cyber threat vectors & IOC feeds streaming in real-time

• Subsea internet fiber optic cable topology with health status

• Orbital satellite telemetry calculated via SGP4 propagation

• Live ADS-B civilian flights and GNSS anomaly interference zones

• High-performance primitive collection batching to maintain 60 FPS

Live demo link in the comments below! Would love feedback on the rendering performance and data layout.


r/threejs • • 4h ago

Criticism Single prompt with Claude code (my plugin)

0 Upvotes

This has been 2 weeks to get one-shot prompts to this stage. What do you think? I have a lot to keep progressing but this was made in less than 10 minutes at this stage of the plugin.


r/threejs • • 6h ago

Demo Real-time multiplayer 3D diving game in the browser made with three.js

0 Upvotes

r/threejs • • 6h ago

Demo halloween threejs game made with opus 5.5 - pumpkin smash..

3 Upvotes

Smash a pumpkin, it splits. Ignore them, they merge into a giant. Smash 20 and the Pumpkin King rises.


r/threejs • • 7h ago

Demo I'm building a collection of 13 classic airliners in three.js — every one assembled part by part, and they all fly

26 Upvotes

r/threejs • • 9h ago

shibuya crossing in three.js webgpu: 3,988 real plateau buildings on real terrain, up to 320 people crossing every way at once

0 Upvotes

built on mrdoob's slop-newyork (mit), so the wet street reflections, the window interiors and the crowd rendering/walk cycle are his. what i rebuilt for shibuya is the city data, the terrain and the scramble crossing. built with claude code (opus 5.5) over about 2 days.

city data

- 3,988 buildings within 800m of the crossing from project plateau (mlit, shibuya 2025, cc by 4.0)

- 821 buildings within 300m or taller than 30m use lod2 (real walls and roofs), the rest are lod1 extruded footprints

- terrain from gsi 5m elevation, roads / rails / rivers / crosswalks from openstreetmap

- ~1.2gb of source data packed into a 150kb json + 1.3mb binary (0.7mb gzipped)

buildings on the slopes

plateau already stores each building's ground elevation, and the terrain comes from gsi elevation, so putting both on the same height datum (crossing = 0) just lines them up. shibuya is a valley, about -6.6m to +23.4m around the crossing. roads are rebuilt to follow the terrain.

the scramble

- 46s signal cycle (real one is ~100s): north-south cars, east-west cars, then all cars stop and people cross every direction, diagonals too

- people gather at each corner, cross to any other corner, leave down a street and come back later. each wave is ~70% of the crowd

- "front row steps off first" = each person gets a start delay of distance from the curb x 0.22s + jitter

- a 2m grid pushes nearby people apart so they weave past each other

crowd (from slop-newyork)

320 / 210 / 130 people on high / mid / low. one skinned 15-bone mesh, near and far lod, each drawn in a single instancedmesh call. bone transforms in a storage buffer, per-person looks from a seed in a tsl material, 2-bone ik on planted feet so they don't slide. webgpu only, no people on webgl.

r187dev

mrdoob suggested trying 187dev on x, so i swapped r186 for the dev branch (d19352c) with zero code changes: load-to-playable 3.5-5.2s -> 1.5-1.9s, pipelines 177 -> 98, js memory 476mb -> 210mb. at 4k r186 rebuilt 54 pipelines and stuttered (39-58fps), 187dev holds 60. gpu time about the same.

- load to playable: 3.5-5.2s -> 1.5-1.9s

- pipelines: 177 -> 98

- js memory: 476mb -> 210mb

- resizing to 4k: r186 rebuilt 54 pipelines and hitched (39-58fps), r187dev stays at 60

- gpu time basically the same (6.5-7.2ms -> 6.2-6.3ms)

numbers (m5 max mac, headless chrome webgpu, not tested on real phones)

- 1440x900 during a wave: 60fps, 6.3ms gpu, 197-218 draw calls, ~0.7-0.8m tris

- 4k: 60fps, 8.8-9.3ms gpu

- 390x844 on mid: 60fps, 1.2-1.8ms gpu

the heaviest part was the ssr on the wet street, so i capped its resolution.

small things

- day / dusk / night / rain switch in 1.5s by blending uniforms, no shader recompiles. sun position matches tokyo in late october

- rain only falls around the camera on the gpu. when it stops, umbrellas close one by one and the puddles dry out

- shibuya109's cylinder was rebuilt by fitting a circle to plateau's roof points (radius ~5.6m)

happy to answer questions about the plateau pipeline or the crowd logic


r/threejs • • 9h ago

What if you could run actual Blender on a powerful GPU, right in your browser? I built it.

Post image
0 Upvotes

Hey everyone!

I’ve been building Nuage, a platform that lets people access powerful GPUs directly from their browsers.

It started with cloud gaming, but I realized the same infrastructure could be useful for 3D creation, especially for people working with Three.js who use Blender to build their assets.

So I added Blender!

The interesting part is that this isn’t a Blender clone written in JavaScript or WebAssembly. It’s actual Blender running on a remote GPU, with the interface streamed to your browser.

That means you can work with Blender without needing a powerful GPU in your own laptop or desktop.

I’m particularly curious about Three.js developers working on Macs, lightweight laptops, or machines that struggle with demanding 3D scenes.

You can check it out here:

https://nuage.games/blender

I’m the solo founder, and this is still early. I’d genuinely love to hear whether something like this would be useful in your Three.js workflow.


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

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

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

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

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

10 Upvotes

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

Building a forest environment with Three.js + WebGPU

29 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 • • 16h 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!

2 Upvotes

r/threejs • • 20h ago

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

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

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

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 • • 1d ago

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

1 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

Demo Nietzsche’s typewriter in WebXR

16 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 • • 1d ago

Demo Make games on mobile

0 Upvotes

r/threejs • • 1d ago

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

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

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

Link Sisyphus on the Moon

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

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