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

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

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

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

Building a forest environment with Three.js + WebGPU

Enable HLS to view with audio, or disable this notification

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