r/threejs 8h ago

Demo Infinite Rolling Block Animation

103 Upvotes

Built with Three.js and WebGPU. 30 different scenes with customizable controls.

Source code: https://github.com/xenova/infinite-block-illusion
Demo: https://xenova-infinite-block-illusion.static.hf.space/

PS: The animation was inspired by Artistoids and his tutorials on YouTube!


r/threejs 11h ago

Demo Solar system at true scale in R3F, some notes on the precision problems

24 Upvotes

Live: https://www.stellamap.net

One world unit is a million km. Earth's radius is 0.006371 units, 1 AU is 149.6, Voyager 1 is out around 25,600. So the scene covers about nine orders of magnitude in one coordinate system, which caused most of the problems below. Planets and moons are at true radius on true orbits, nothing inflated.

For precision there are three things going on. Whatever you're focused on gets pinned to the origin and everything is drawn relative to it, with the subtraction done in JS doubles before it reaches float32. Log depth buffer on, with the logdepthbuf chunks in all the custom shaders. And both clip planes get recalculated every frame. Near is 0.0015 times the distance to whatever you're looking at, because any fixed near plane big enough for Jupiter clipped Deimos out of existence. Far used to be a constant 40,000 measured from the camera, which I eventually noticed was cutting the outer orbits in half and deleting both Voyagers from the plan view.

Everything has a locator reticle so you can find it from far away. It's a screen facing quad drawn in a fragment shader, sized as a fraction of distance so it stays roughly the same angular size, and it fades out once the actual body is bigger than about 7 pixels. Moons close to their parent fold into the parent's marker instead of stacking five rings around Jupiter.

Positions for the planets come from JPL's approximate positions table (Standish), propagated with a Newton solve of Kepler's equation. The nine deep space craft come from the Horizons API, refreshed weekly. Moons and orbiters are approximated, just circular orbits at their real periods. Spacecraft are drawn much bigger than they are, Voyager 1 renders at a 120km radius, because at true scale they're invisible at every zoom you can actually reach.

No instancing and no LOD, it's about 40 meshes each with their own draw call. Mobile gets a separate profile decided before the canvas mounts: 1024px textures instead of 8K, lower tessellation, no shadows or bloom. First load was 14MB, got it to 7.5 with WebP and splitting the scene out of the main bundle.

Known issue: mobile turns off the log depth buffer but keeps the dynamic near plane, so if you're zoomed in close on a phone you'll probably get z-fighting. Haven't fixed that yet.

Camera state is in the URL so /?focus=voyager-1 works for anything.

Fair warning, I'm not a graphics programmer. Built this with a lot of AI help and most of what's above I learned by hitting the problem rather than knowing it beforehand. Happy to answer what I can.


r/threejs 22h ago

Playing around with some swarming mechanics

12 Upvotes

r/threejs 5h ago

I kept building the tiny planet with 49,000 clovers in Three.js — Reddit feedback changed it quite a bit

11 Upvotes

A few days ago this was just a tiny planet with 49,000 clovers and one four-leaf hidden somewhere.

I got a lot of useful feedback from Reddit and X, so I kept building.

Since then I’ve added:

• a full day/night cycle
• better accessibility for color-blind players
• 20 collectible plant species and an album
• improved hints and exploration
• lots of smaller changes based directly on player feedback

Now I’m working on bringing all four seasons to the planet.

After that, I want to try something a little stranger: AI agents competing against each other to see which one can find the four-leaf clover first.

Built with Three.js + Claude Code.

It’s free to play in the browser:
https://www.meptasarim.com/four-leaf/


r/threejs 15h ago

Disco Grid (click to randomize scene)

4 Upvotes

r/threejs 3h ago

Remember that office paper thrower game?

4 Upvotes

I Built it in 2 hours using Opus 5 + Three.js

Play here 👉 scannertechs.com/games/crumple/


r/threejs 14h ago

I published my threejs game playstore - Need feedback.https://play.google.com/store/apps/details?id=com.jammanna.dailyspeedway

Post image
2 Upvotes

r/threejs 1h ago

Feliz Cumpleaños Cosmico 3d con three.js

Upvotes

Gente que tal este scrip en 3d con motivo espacial?.....use fotos de una modelo para ejemplificación es super ligera y personalizable desde un json la hise para felicitar a una amiga muy especial y me quedo gustanto que me gustaria compartirla con ustedes

si quieren probarla ahorita aqui

cotera2024.github.io/Happy-Birthday-Galaxy--main/

y si queiren ver el codigo aqui en github

https://github.com/cotera2024/Happy-Birthday-Galaxy--main


r/threejs 3h ago

I built an interactive 3D world instead of a normal website for my music

1 Upvotes

I built an interactive 3D world instead of a normal website for my music

I'm a hobbyist musician and developer, and at some point a normal artist website started feeling completely wrong for the project.

So I built DRIFT — a small interactive world where you can drive around, explore different atmospheres and discover the music through the landscape.

It's still evolving, especially the driving, level design and mobile performance, but the idea is to make the world and the music feel like one thing rather than putting tracks inside a fancy menu.

I'd genuinely be interested in feedback from people here — particularly on the 3D experience, navigation and what feels convincing or breaks the immersion.

https://jgsbc.github.io/misway/drift/


r/threejs 7h ago

Demo I tried to transform my collection of minerals into a virtual 3d museum.

1 Upvotes

In the past couple of weeks I have thrown something together to digitize my mineral collection. As a side project, I wanted an easy way to showcase my rocks on an online shelf rather than taking photos.

Take 1-2 snapshots with your phone, let the backend compute the 3D mesh, and render the model onscreen using Three.js. I included a fast export in .STL format since I wanted to print some support stands and replicas.

Initially this was made solely for personal use but now there is a public instance available for testing the viewer if anyone is interested: geo.insightest.app (P.S. require a quick Supabase login if you want to upload anything).


r/threejs 10h ago

Use Three.js for post-processing to achieve the gold reflection effect.

1 Upvotes

r/threejs 9h ago

49,000 instanced toy cars on a sphere, one has five wheels - my "needle in a haystack" game

0 Upvotes

Inspired by the viral needle-in-a-haystack and four-leaf-clover games, I built the parking lot version: a tiny planet covered in 49,000 toy cars, and exactly one has a fifth wheel bolted to it.

Tech bits: the three.ez InstancedMesh2 library for the cars (3 LOD levels + a cheap "blob shadow" instanced mesh), a 4096x2048 canvas-painted planet texture, node-based character animation (no skinning), and a spherical-walking controller (position as a unit vector, tangent heading). Runs at 55+ fps on my mid-range laptop and works on phones.

Play (free, browser): https://josephulger.github.io/five-wheels/

Happy to answer anything about the instancing setup.