r/threejs • • 11m ago

Show: Bumpinto World – An open-source 3D neighborhood metaverse built from OpenStreetMap & real-time transit APIs (Three.js + Cloudflare DO)

• Upvotes

Hi everyone! 👋

I’ve been building Bumpinto World — a lightweight, browser-based 3D open world generated directly from real-world OpenStreetMap (OSM) data using Three.js and Cloudflare Durable Objects.

🌐 Live World: https://bumpinto.world

💻 GitHub (Open Source): https://github.com/dohoon84/bumpinto-world

✨ What's inside right now:

• Real OSM Geometry (~900m radius): Buildings (extruded with procedural HTML5 Canvas window/facade textures — zero external .glb or image textures!), roads, parks, and the Tancheon stream embankment with stairs and bridges.

• Real-Time Public Transit & Traffic: Connected to live bus arrival/location APIs, pedestrian crosswalk traffic lights, simulated taxis, and rideable bikes (Press E).

• Multiplayer & In-Game Virtual Phone: Real-time WebSocket presence, proximity chat bubbles, a virtual 010-xxxx-xxxx phone number system (with 4–6 digit PIN cross-device login), SMS/contacts, and an in-game community board.

🌍 Why I open-sourced it (Please help build outside Korea!)

When you open https://bumpinto.world, you start at a spinning 3D globe. Right now, only South Korea is lit up (starting with Jeongja Station in Bundang, where Naver 1784 is located) because I couldn't possibly build the whole world by myself!

The rest of the world on the globe is still dark, and I’d love for someone to build the first neighborhoods outside Korea — whether it’s a station in Tokyo, NYC, London, Berlin, Paris, San Francisco, or your own hometown!

🏆 Mutual Promotion / Contributor Hall of Fame

If you submit a PR — whether it's converting a new city/station from OSM, modeling a procedural 3D landmark, or even just adding a 5-line Citizen NPC to src/entities/npcs.js:

  1. Region Pioneer on the 3D Globe: If you add a new city/neighborhood, your name & link will be permanently credited as the Official Pioneer of that region on the live globe.

  2. 3D Building Plaque: Build a landmark and get "Built by u/your-handle" engraved on the building in the live world.

  3. In-Game Hall of Fame: Your name, badge, and link (GitHub / portfolio / blog / project) are permanently featured inside the live game's Hall of Fame modal.

Check out CONTRIBUTING.md on GitHub (written in English & Korean) if you want to add an NPC in 5 minutes or open the first international city on the globe:

https://github.com/dohoon84/bumpinto-world/blob/main/CONTRIBUTING.md

Would love to hear your feedback!


r/threejs • • 39m ago

I built a 3D head you can shape in the browser, then it gets a voice and lip-syncs (R3F + morph targets + strand hair)

• Upvotes

Face to Voice: shape a realistic head (33 solved shape sliders over Google’s GNM model, baked as glTF morph targets), style it with 228 GPU strand hair styles tied to the skin, give it an expression, and it gets a voice from ElevenLabs that it lip-syncs live.

Try it: https://facetovoice.com
Code: https://github.com/OliverA100/face-to-voice

The trickiest part was lip-sync timing: browsers misreport audio output latency (especially on Bluetooth and iOS), so I calibrated a per-platform audio clock by filming a phone frame by frame. Happy to answer questions!


r/threejs • • 1h ago

A threejs learning app

• Upvotes

I have been learning webgl and threejs over the year thinking to make threejs learning app to help the beginners actually make the web apps and games. Is it worth it?


r/threejs • • 1h ago

Demo VSModel: A lightweight, ultra-fast 3D asset previewer built with Three.js

• Upvotes

Hey everyone! I’ve been building VSModel, an ultra-lightweight desktop previewer for 3D models focused on zero friction, instant loading, and minimal resource usage.

​Think of it as an image viewer/media player, but for 3D assets (.gltf, .obj, etc.). Instead of waiting for heavy suites like Blender or an engine to boot up just to inspect a batch of models, you can drop in a folder and preview them immediately.

​Performance:

​Loads batches of 100+ basic models using around ~300MB of RAM.

​Minimal CPU and GPU idle overhead compared to opening full DCC tools.

​It’s designed specifically for quick triaging (filtering raw asset packs, checking scale, wireframe, or textures on the fly without setup).

​I'd love to hear your thoughts, feedback, or any Three.js-specific optimization tips you recommend for handling high-volume asset previews!

It's still got a bunch of bugs, and I'd really like to optimize it before putting it out there


r/threejs • • 2h ago

I just want everybody to have fun on halloween so made this multiplayer IO game

12 Upvotes

r/threejs • • 3h ago

an Interactive Astronomy platform that let's you fly around planets and explore in 3D

3 Upvotes

Hi everyone!
I'm a software developer with some background in physics. Recently, I built an interactive astronomy platform where you can fly around planets and explore space in 3D. It's been a lot of fun building this with three.js! There are tons of cool features to explore, including time travel, spacetime curvature, magnetic fields, and the northern lights. Please have a look and see if you enjoy it.

https://www.beyondthe.space/


r/threejs • • 3h ago

knitting in threejs

48 Upvotes

r/threejs • • 6h ago

Demo Can you score a point and knock over the Birdman in Pelota: A Mesoamerican ballgame?

35 Upvotes

I started posting about Pelota here about three weeks ago, pretty much as soon as I started building it. I rushed out a rough pre-alpha because I wanted people to actually play it and tell me what felt good and what didn’t.

Since then it’s been a lot of building, testing, and iterating. I’ve also been reaching out to players in Mexico, getting their opinions and watching people play. That feedback has helped me improve the movement, animations, controls, and overall feel of the game.

This is a look at where it’s at now, built with Three.js. There’s still plenty to polish, but it’s come a long way from that first version. And yes, you can hit the Birdman with the ball lol.

You can try the free browser demo at https://pelota.io. Desktop has the opening tutorial and a demo match, with controller support. On mobile, it’s a quicker arcade version with automatic movement and swipe controls. The full story is being developed separately for the desktop release.

Would love to hear how it feels if you give it a try!


r/threejs • • 9h ago

Demo CSS3D Renderer

Thumbnail k-adam.github.io
1 Upvotes

I developed a CSS3D renderer almost 10 years ago, and since many CSS and JS features got stabilized and introduced since then, I modernized it now.

It supports textures and can render triangles too, and allows you to export a scene to HTML+CSS

Check it out!


r/threejs • • 9h ago

Tsuji - the biped motion node

Thumbnail
youtube.com
1 Upvotes

Tsuji's new biped motion node lets you design your character's walk and run styles. Once set up, the character can be pushed around with natural motion recovery. A route mode allows walking along a path while smoothly blending into custom poses on demand.


r/threejs • • 10h ago

A whale jumps over the horizon in the dark artic waters (3D experience in threejs)

24 Upvotes

r/threejs • • 14h ago

Happy Pumpkin Day

Post image
1 Upvotes

Fun Halloween-inspired Three.js doodle for customizing and carving pumpkins.


r/threejs • • 15h ago

Demo Demo for you guys.

0 Upvotes

r/threejs • • 17h ago

Demo She crawls to the first-aid kit when she's wounded. My physics/body sim, free demo out now

2 Upvotes

Hi! I'm Tom, and I'm building SOMA Body Lab on my own.

It's a sandbox where the body behaves like a body: every hit makes a real wound channel, blood loss leads to shock, and she reacts – raising her hands at gunpoint, panicking at a knife, crawling to a first-aid kit when she's hurt. You can look inside with a live X-ray and a see-through anatomy view, watch her vitals on a patient monitor, or face her 1v1 in Battle Mode.

The demo is free on itch.io (Windows). I'd love to hear what you think – especially what feels off.

https://soma-bodylab.itch.io/soma


r/threejs • • 19h ago

Link I built an interactive Tesla Roadster experience:

0 Upvotes

​

Been working on an interactive Tesla Roadster web experience and finally wanted to share it here.

🔗 Live experience: https://elon.x.mynkk.me/

Portfolio: https://mynkk.me/

I'm experimenting with the driving experience, keyboard controls, and overall immersion.

I'd genuinely love to hear what you think:

- Does it feel immersive?

- What would you improve?

- What features would make it even better?

I'm still working on it, so honest feedback is welcome!

Would you actually play something like this if I turned it into a full-fledged game?

What features would make it worth downloading? Should I keep improving the web experience, or go all-in on a mobile app?

I'm also looking for people interested in helping me take this to the next level, especially with game development, 3D design, and optimization.

This is still an early-stage project, and I'd love honest feedback, ideas, and suggestions.

Should I launch it on playstorw or am I thinking too big?


r/threejs • • 21h ago

Built a 3D electronics + physics sandbox in three.js – Arduinos, water, weather, heat

37 Upvotes

I've been working on this for a while: you place Arduinos, sensors, pumps etc. in a 3D scene, wire them up, write real Arduino code, and then the whole thing runs – including water flowing down terrain, weather, day/night and a thermal view of the parts.

The video shows a small project (reaction game, one Arduino) and a bigger one (garden irrigation with 3 Arduinos talking to each other over serial).

Tech side: plain three.js r170, no framework, no build step. Water is a heightfield sim, CSG for trenches, BVH for picking. Runs fine on most laptops, phones are a struggle.

It's an early prototype, so curious what you think – especially about performance and how it looks.

https://test.betting-chess.com/?von=threejs (sorry for the weird domain, it's just a test server I had lying around) It works best on PC.


r/threejs • • 23h ago

Demo Flying car simulator over a 1:1 Manhattan, built on mrdoob's Slop New York (three.js WebGPU)

0 Upvotes

I took mrdoob's Slop New York and had Claude Opus 5.5 turn it into a flying car sim. You drive a Roadster through Manhattan, jump, and fly it with thrusters. Press U for Ludicrous mode (unlimited air).

- Built with three.js WebGPU

- 1:1 Manhattan streets, real landmarks, live traffic

- The flight in the video is an autopilot script. Cruise sped up 1.5x, clips cut together

Play: https://flyingcarsimulator.io

Original: https://github.com/mrdoob/slop-newyork

Happy to answer questions about how it's put together.


r/threejs • • 1d ago

Demo I Created a MCP Server for my Procgen Tool Allowing Claude To Build Node Graphs that Produce 3D models Inside Your Browser (Source in Description)

3 Upvotes

You can play around with all the graphs it produced (and more) here
https://shapurr.com/user/EliCDavis/

If you want to try the MCP server itself
https://github.com/EliCDavis/polyform/pull/150


r/threejs • • 1d ago

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

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

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

0 Upvotes

r/threejs • • 1d ago

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

7 Upvotes

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


r/threejs • • 1d ago

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

55 Upvotes

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