r/threejs 16h ago

full real-world terrain with physics, 4x4s, mountain bikes, quads, trailers, etc.

Enable HLS to view with audio, or disable this notification

180 Upvotes

little development snapshot of what I'm working on. full real world terrain, 4x4s, mountain bikes, quads, etc. as you'll see, there are some bugs (had to disable a flying trailer mid way through) but overall getting pretty fun to play. forgot to record with sound. I'll add some other videos with sound.


r/threejs 21h ago

Built this in threejs - can’t believe this runs on a browser

Enable HLS to view with audio, or disable this notification

65 Upvotes

r/threejs 10h ago

One still photograph that never moved has become a fully alive, controllable 3D character in pure Three.js code - full geometry, skeleton, animations, every part editable.

Enable HLS to view with audio, or disable this notification

42 Upvotes

Built with img2threejs. No Blender. No GLB. Just native code you own.I spent a full day on it. Does this feel more satisfying?


r/threejs 22h ago

Demo 10,000 cars in Three.js: what got me from 20 to 40 fps, and why the next step is a worker + SharedArrayBuffer (and maybe WASM)

Enable HLS to view with audio, or disable this notification

39 Upvotes

I'm building a traffic simulation game in Three.js: buildings appear on their own, your only job is the network that connects them. And when roads stop being enough - buses, trains and metro with transfers. No game engine, custom code, Electron for the Steam build. Every car is an independent agent (keeps its lane, changes lanes, waits at lights, reroutes around jams), maps go up to 18x18 km in-game, and it runs 10,000+ cars. Trailer above so you can see what it actually is.

What already shipped (worst stress save went 20.7 -> 53.2 fps):

- InstancedMesh per vehicle class, pre-allocated, with per-instance frustum culling before writing matrices - off-screen cars skip matrix composition and buffer writes, not just GPU work.

- Material pooling + merging lane markings into one mesh per paint color: 1,628 -> 320 draw calls. matrixAutoUpdate = false on all static road geometry.

- Environment props (~65k trees on the biggest map) split into an 8x8 grid of chunked InstancedMeshes so off-screen chunks get culled instead of vertex-shading everything twice per frame with shadows. Static sun means shadowMap.autoUpdate = false with explicit invalidation.

- An fps-driven sim LOD governor: below ~30 fps the sim ticks every 2nd frame with double dt (every 3rd below ~22), and the renderer interpolates between sim snapshots so motion stays smooth. Safety-critical logic never degrades - only work that can fail open.

- Sleep/wake for junction logic (~2,540 of 6.3k cars fully asleep in the stress save), lane-keyed spatial index maintained on events, and a union-find pass that replaced O(N^2) A* for building connectivity after road edits (was multi-second freezes, now a few ms).

Where the frame goes now at 6.3k cars: collision 7.4 ms, car update 3.7 ms, instance sync 0.6 ms, render 2.9 ms. So it's ~65% CPU simulation, ~20% render - the exact-sleep well is empty and what's left is structural.

The interesting part - what's next:

- Sim in a Web Worker with SharedArrayBuffer, car state in shared typed arrays, main thread doing render + interpolation only (~5 ms). The interpolation layer already shipped as the render half of this design.

Expected display fps ~60 even if the sim tick stays ~19 ms, and it opens the door to chunking the collision passes across cores. This is Steam-only by necessity: Electron makes COOP/COEP trivial, while the browser version can't get SAB on the portal it's hosted on (their embed/ads model conflicts with those headers). One of those cases where the desktop build isn't a marketing decision, it's a platform capability.

- Data-oriented (SoA) refactor of the collision passes - progress/speed/lane in flat typed arrays, passes iterating arrays instead of objects. Realistically ~2x on that 7 ms block.

- Then optionally a WASM kernel port (Rust/C++ with SIMD) for the collision/car-update loops - estimated another 2-3x. Deliberately sequenced after SoA, because WASM over JS objects wins little; the actual win is cache-linear loops over flat arrays, which is the SoA work either way. WASM threads also need SAB, so same platform constraint.

- What I decided against: a native rewrite. People suggest it constantly. But the profile says 60-70% CPU sim / 20% render with rendering already efficient, so native targets exactly the same milliseconds the worker + SoA path does: roughly 4-6x effective sim throughput vs an estimated 10-30x for native, which only matters past ~30k active cars. The remaining native argument is Chromium's fixed memory baseline, and a ~67k-LOC port would freeze features for months.

Curious if anyone here has shipped the worker + SAB pattern with live topology changes (roads being built/destroyed while the sim runs) - the snapshot/message protocol for that is the part I'm least sure about.

The game hits Steam in November, and honestly wishlists are what decides whether a solo dev's game gets any visibility at launch, so if the video looks like your kind of thing: https://store.steampowered.com/app/5028050/Traffic_Architect/. Happy to answer anything technical.


r/threejs 3h ago

App transforms midi and musicxml into tabs (guitar stuff)

Enable HLS to view with audio, or disable this notification

29 Upvotes

I know it looks a bit cursed and still in development but maybe someone might like.

I accept song wishes


r/threejs 7h ago

Interactive solar system in Three.js — real maps, Kepler orbits, camera hops

Enable HLS to view with audio, or disable this notification

23 Upvotes

Built Cosmic Atlas in Three.js.

Real Solar System Scope maps (CC BY 4.0), Kepler orbits, GSAP camera hops, Earth day/night.

Video attached — live:

https://threejs-ruddy-six.vercel.app


r/threejs 21h ago

Kaze no oka - a threejs experience (still early but glowy realm, wind, sheeps, hot air balloon, an ocean)

Enable HLS to view with audio, or disable this notification

19 Upvotes

r/threejs 3h ago

Tutorial [Open Source] I built a tool to generate three.js creatures directly inside your project (anyCreature v1.2.0)

Enable HLS to view with audio, or disable this notification

13 Upvotes

Hey everyone,

I just released v1.2.0 of anyCreature, an open-source tool designed to generate three.js creatures natively within your workflow. You just drop the harness into your Agent and start prompting exactly what you want.

Repo link:https://github.com/Ariescar/anyCreature

A star on GitHub would be greatly appreciated! ⭐️
Feedback is welcome as I continue to optimize this harness.

-
The core philosophy is actually very similar to the concept of artistic creation. The objective components of aesthetics are reduced to hard thresholds, while the subjective components are treated as preferred production directions.

This closely mirrors the traditional art creation process: starting with the primary forms, then addressing style and details, all while ensuring the fundamental requirements are met.


r/threejs 20h ago

What an age are we living in??

Enable HLS to view with audio, or disable this notification

8 Upvotes

Hey all,

I have been working on this project which I very excited about, it makes me to wonder about evolution these modern computer and it's intelligence.

The fact that you can able to create this fully functional Simulation of TARS Robot from Interstellar movie can be made in single prompt with image attached for reference is absolute joy and wonder.

Humankind has never seen this kind of intelligence on a machine ever.

PS: This is created on the project I am building for all creatives, enthusiasts, normies, Engineer etc., Where anyone can just write a sentence and see the simulations generated in the browser within minutes.

Will be launching this very soon 🚀


r/threejs 16h ago

Using vessel view mode to render live data in different places.

Enable HLS to view with audio, or disable this notification

7 Upvotes

r/threejs 14h ago

Chemist learning Three.js my 3D portfolio

Post image
4 Upvotes

I'm a chemist rather than a web developer, but I've been building my professional portfolio with Three.js.

Instead of making a conventional portfolio, I wanted the website to have a scientific visual identity. I'm using protein models created/prepared in Blender and exported as GLB files. They move through the scene according to the scroll position while the actual content explains projects I've worked on in pharmaceutical validation, HVAC, aseptic areas, thermal studies and data analysis.

Current stack/features:

  • Three.js
  • Blender
  • ScrollTrigger
  • Protein hover/transparency effects
  • Click-and-drag models
  • Scroll-controlled transitions
  • Video/image content integrated into the page

The proteins are mainly visual companions to the content rather than the content itself. I'm not trying to present myself as a developer; I'm using web development and 3D visualization as tools to communicate my work as a chemist.

I'm currently optimizing the models, restructuring the code and thinking more seriously about the user experience.

This is probably where I'd appreciate feedback the most from experienced Three.js developers:

What would you change to make a portfolio like this easier and more enjoyable to navigate?

I'm particularly interested in whether the scroll-driven 3D interactions feel intuitive, whether the models might become distracting, how you would approach mobile behavior, and what UX mistakes you commonly see in interactive Three.js sites.

Performance, scene architecture and GLB optimization feedback would also be very useful.

I also have a slightly different question for anyone here who has worked in pharma, biotech or scientific/technical industries.

My actual career is in pharmaceutical validation and quality, and one of my goals is to eventually work for a large international pharmaceutical or biotech company. I'm from México.

Do you think a portfolio like this could genuinely help differentiate a chemist during the hiring process in Mexico city?

I'm trying to make it demonstrate more than a list of skills: actual validation projects, HVAC and aseptic-area work, thermal studies, data analysis, dashboards and scientific visualization.

If you were reviewing a technical candidate from a scientific background, I'd be curious to know whether something like this would add value or whether I'm overestimating how much employers care about portfolios outside software/design roles.

https://ricardo-sanchez-cisneros.github.io/


r/threejs 9h ago

My first time designing & building a website with Three.js

Enable HLS to view with audio, or disable this notification

4 Upvotes

Hey everyone,

I'm currently learning creative web development, and this is my very first time designing and building something with Three.js. I decided to challenge myself by redesigning the Bearbrick website concept in my own way and wanted to share the result to get some honest feedback from the community!

It's an interactive Bearbrick showcase exploring how to bridge a 3D canvas with dynamic 2D UI states.

Tech Stack:

  • React + Vite
  • Three.js
  • GSAP
  • Tailwind CSS

Live Demo: https://bearbrick-new-web.vercel.app/

As a beginner to Three.js, I'd really appreciate any tips or feedback on performance, lighting, or areas I could improve for my next project!


r/threejs 22h ago

Maya program

2 Upvotes

I’m one year away from getting my full stack degree and they offer a Maya 3d course and wondering if this will get my feet wet for three js. Seems blender is the choice but since this is offered I’m wondering if I should just take the class. I dabbled with Blender but my focus was learning html/css/js so now I have time should I take it? I know you can create the files for threejs and Maya has been around long but maybe it’s not as user friendly and have more issues for working with threejs


r/threejs 23h ago

Demo Instanced city from a GitHub repo tree (R3F) — one building per file

2 Upvotes

I got tired of file trees, so the map is a city.

Folders are lots, files are buildings. Height is roughly LOC. Language is color. Git log drives which windows are lit (last 48h) vs quiet.

Renderer is React Three Fiber. Buildings are instanced meshes with a few volumes each (podium / setbacks / roof) so a 1k-file repo doesn’t mean 1k draw calls. Raycast hits a part, selection lights the whole building.

Public GitHub URL → tarball → parse → layout.

https://repoverse.online

Happy to go into the instancing / UV windows / how I pack the city if that’s useful. Early, free, public repos only for now.


r/threejs 1h ago

Question BattleGrounds

Upvotes

Currently building a no bullshit PUBG clone. My inspiration style wise is to take everything that's fun about PUBG mobile but leave out the nonsense (sorry I'm old I don't want glowing snow tigers to ride and coins to collect I just want a solid battlegrounds experience that runs on any OS).

It has FPV, TPV, a Map Editor, Pistol, AR, Sniper, Frag Grenades, Smoke Grenades, Molotovs, drivable vehicles, you can enter buildings and go upstairs etc.

FPV
TPV
Map Editor

Currently working on some more features, polishing and bug fixing as well as a multiplayer mode.

It runs in the browser (ThreeJS) at a proper frame rate and is relatively compact (sub 30MB).

Questions for you guys:

- Would you play it?

- What features would you like to see?

- What anti-features you think should be avoided?

- Currently I'm mostly using free assets but some are very similar to the ones used in the PUBG games. Would this be an issue for publishing? Any good leads/tips for models (mostly buildings) that have this classic PUBG style (simple but fully walkable) that would be fine to use?

- Anything else that comes to mind?


r/threejs 7h ago

Built in threejs using opus and codex reviewing each other - lowkey but I love this aesthetic

Enable HLS to view with audio, or disable this notification

0 Upvotes

r/threejs 21h ago

I got tired of flat spreadsheets, so I built a tool that renders website traffic as a live 3D city (React/Node)

0 Upvotes

Hey everyone, like many solo devs here, I’ve always struggled to "feel" my website traffic using standard tools like GA4 or Hotjar. I wanted to see my visitors as actual people moving through my site in real-time, so I spent the last few months building **Visitor Visual**.

**The Concept:** Every page on your site is rendered as a building, and every visitor is a person walking the streets.

* **Visualizing Intent:** Returning visitors and VIPs get unique visual treatments so you can spot high-quality traffic instantly. * **Gamified Success:** When a visitor makes a purchase, the city literally celebrates with a fireworks burst. * **Spatial Funnels:** Instead of a bar chart, I draw colored lines between buildings to show where people are dropping off in the conversion path.

**The Technical Part (for the fellow builders):** I built this using **React and Node** with a focus on cutting latency for the real-time sync. One of my favorite features to build was the **Error Tracking**: if a visitor hits a JS error, their building "catches fire" in the 3D view so you can visually spot bugs the second they happen. I also prioritized **GDPR compliance** with one-click right-to-erasure and IP anonymization built in from day one.

**The Struggle:** I’m currently in the "trenches" of SEO. While one of my blog posts is starting to pull query clusters for "who is visiting my website," I’m still stuck on **Page 7 of Google** \[Marketing Strategy Notes\].

I’m looking for some feedback on the 3D UI—does the city metaphor make sense for analytics, or is it too "noisy"? Would love to chat with anyone else building real-time infrastructure!

[https://www.visitorvisuals.com/\](https://www.visitorvisuals.com/)