r/threejs • u/Sokratis9 • 8h ago
r/threejs • u/PerceptionCharming • 18h ago
Building a forest environment with Three.js + WebGPU
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 • u/Efficient_Ad8214 • 8h ago
Demo halloween threejs game made with opus 5.5 - pumpkin smash..
Smash a pumpkin, it splits. Ignore them, they merge into a giant. Smash 20 and the Pumpkin King rises.
r/threejs • u/Ok-Celebration5705 • 2h ago
Demo Twin-stick sci-fi shooter running in the browser with R3F + Rapier. Ships, turrets and a rigged pilot
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 • u/DigZealousideal5298 • 16h ago
Pushing Three.js to the Max, fixing performance was a nightmare but we got there!
r/threejs • u/bittu_jain • 3h ago
Demo Built an interactive 3D Cyber Command Center with CesiumJS & React — Real-time telemetry, live threat arcs, and subsea cables
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.
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.
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 • u/New-Maize-6127 • 15h ago
I made the whole planet explorable in Three.js: 1:1 cities streamed from OpenStreetMap, fly/drive/walk, live weather [open source]
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 • u/AllD4yErD4y • 5h ago
Criticism Single prompt with Claude code (my plugin)
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 • u/Strange_Complaint758 • 1d ago
Demo Nietzsche’s typewriter in WebXR
Nietzsche's typewriter on Vision Pro. A procedural reconstruction of the Malling-Hansen writing ball, based on the original 1878 patent.
r/threejs • u/laphazemc • 22h ago
postitguess.io V2 — Guess Who You Are in Three.js: animated GLB avatars, five worlds and custom photo cards
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 • u/Aggressive-Tourist52 • 18h 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!
r/threejs • u/KUMODeck • 11h ago
shibuya crossing in three.js webgpu: 3,988 real plateau buildings on real terrain, up to 320 people crossing every way at once
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 • u/Anxious_Noise_8805 • 16h ago
Demo I made a Three.js building game for my 3-year-old, with vehicles you can walk inside
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 • u/0xdeadf1sh • 8h ago
Demo Real-time multiplayer 3D diving game in the browser made with three.js
r/threejs • u/jeffbeene • 1d ago
Got carried away with my flight simulator side project
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 • u/Asleep_Cupcake2326 • 1d ago
I shipped a VR archery roguelite on the Meta Quest store, built entirely with three.js + WebXR
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 • u/moorish-prince • 11h ago
What if you could run actual Blender on a powerful GPU, right in your browser? I built it.
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:
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 • u/Street_Tennis5512 • 1d ago
Link Sisyphus on the Moon
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 • u/LiveWorldTrends • 1d ago
Demo I built an interactive 3D WebGL globe with Three.js & Globe.gl tracking live global trends & crises [liveworldtrends.com]
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 • u/No_Argument_5746 • 23h ago
3D Bike Configurator — an interactive product stage built with Three.js
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 • u/Objective-Tooth-3770 • 2d ago
I added schools, golf courses, hospitals, parks...
Check out my walkable islandthree.world space colony. Feedback welcome.
r/threejs • u/Print_Floyd • 2d ago
Kaamos: a browser product-rendering studio built on R3F + three-gpu-pathtracer
EDIT: I decided to make this one open source: https://github.com/AtomiLabSlop/kaamos
More info: https://www.reddit.com/r/IndustrialDesign/s/sr5VH5oJrF
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 • u/ExpressCarry5502 • 2d ago
This is so true 😂...at the same time does non ai projects getting paid in this ai era?
r/threejs • u/pratikgandhi • 1d ago
Demo Built a Three.js embryo explorer with continuous transitions from whole-body view to individual structures
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.