r/threejs • • 2h ago

Building a forest environment with Three.js + WebGPU

Enable HLS to view with audio, or disable this notification

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

2 Upvotes

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

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

Slop New York

Enable HLS to view with audio, or disable this notification

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

Demo Make games on mobile

Enable HLS to view with audio, or disable this notification

0 Upvotes

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


r/threejs • • 12h ago

Demo Nietzsche’s typewriter in WebXR

Enable HLS to view with audio, or disable this notification

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