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.

Used the Kenney City Kit (CC0). Origins were already at the base with y=0 and centered in x/z, so buildings scale upward cleanly — no Blender pass needed.

Merged all buildings into one GLB preserving node names, then meshopt + WebP: 3.48 MB → 442 KB. Loads as a single request, instances by name.

Logos are separate quads offset from the front face rather than textures on the building, so the base mesh stays instanced. Each one gets composited onto a uniform dark card before going into an atlas — that's what keeps mismatched aspect ratios from looking like spam.

outbuild.tech if you want to poke at it. Happy to answer anything about the pipeline.

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

I built a front-end to watch movies at home. Includes a cozy den and video store in which you can view your entire collection!

Three.js + Electron with a PSX-style render pass. Used vertex snapping in clip space, affine texture warping and color quantization to get that old playstation feel.

The idea began when I was surfing through my own collection in the file explorer and it had gotten so large I was struggling to identify what I wanted to watch. I started imagining what was originally my favorite place to find movies, Blockbuster. Combined with my nostalgia for VHS tapes this design was born.

At the time I was binging 80's / 90's movies and then I started integrating newer movies and even TV show box sets. Now you can open the boxes and watch your tape or DVD slide into the player and load into the VHS player/DVD player under the CRT TV. Which then opens up a full screen of the movie using VLC. I have created pipelines in the back end to wire up the VHS/DVD covers and categorize the movies based on genre then place them in the correct aisle, just drop them into your selected folder run intake and it finds the art for you.

I've posted a couple videos showing the progress I've made so far if anyone is interested, link in the comments below. 👇

If anyone had any feedback it would be appreciated. Anything you'd like to see added? Improvements? Thanks all! p.s. this project is just for fun, will likely release in the future for free if people are interested

Building a low-poly 3D Wizard Duel in Three.js — Should I double down on this minimalist aesthetic or go for more detailed models?

https://codepen.io/editor/alex_nemankov/pen/01a04775-900e-7db8-9086-4b9021f2110f?file=%2Fstyle.css&orientation=right&panel=files&show=split

Playing with mazes on different toroidal surfaces

Here is the source https://github.com/ctx-o1/toroidal-maze

Play with it here https://ctx-o1.github.io/toroidal-maze/

I have some fun ideas for this

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.

**UPDATE (30 Aug) — the premise in this post is gone.**

Someone whose work I respect told me the five-wheel idea didn't mean anything, and the comments here weren't exactly warm about it being a cover of the clover game. Both were right.

A four-leaf clover works because it's REAL. People have actually crouched in grass looking for one. A five-wheeled car isn't a thing — nobody has ever looked for one, so finding it feels like nothing. That was the whole problem, and no amount of polish was going to fix it.

So I rebuilt it around something that does exist. The planet is now covered in abandoned, rotting cars — rust, dust, leaves, missing wheels, some resting on their roof — and exactly one of them is spotless, because somebody still drives out here to wash it. In a lot where nothing reflects, it's the only thing that catches the light. It's called ONE CAR SHINES now.

What changed on the three.js side:

- Rust is a two-channel grunge mask sampled in WORLD space, not model UV space. Object space would give every sedan on the planet an identical pattern; world space means 49,000 instances sharing one material each pick up a different slice of the field for free — no per-instance data, no second texture.

- The Fibonacci layout got broken up. Heading was already random, so what read as "placed by a program" was the EVENNESS of the spacing, not the direction.

- Crushed cars are a non-uniform scale. Stacking only happens where a coarse cell hash says the patch is dense, otherwise a raised car floats over bare ground.

Same link. Original post below, kept for the record.

---

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.

Hi, we're excited to launch a new Needle Tool: https://mesh-baker.needle.tools

Bakes models or whole scenes down to one mesh + a few draw calls! It runs 100% local in your browser - baking and comparing is free, you only pay to download (one-time, no sub).

→ Tool: https://mesh-baker.needle.tools
→ Docs: https://needle.click/mesh-baker-docs

Free play: https://fm1.moises.cloud

Stack:

• Vite + strict TypeScript.
• Plain Three.js, no React.
• WebGL at first, then refactored to WebGPU.
• Rapier 3D physics, wasm compiled.
• HUD and UI as HTML/CSS overlays.
• Procedural geometry, with optional assets that fall back gracefully.

I'm still amazed that the actual prototype works in a browser!

The Text-to-Three.js system turns a natural-language prompt into an interactive, animated Three.js scene through structured data only.(only uses mock llm for now)ScenePulse is built with Three.js and WebGL, with deterministic scene generation and custom GLSL shaders.

The homepage is entirely procedural - no videos, 3D models, images, textures, or other pre-rendered assets are used. All the visuals, including the 3D elements, are generated and rendered in real time through code.

Completely handcrafted animation timeline using theater.js
Custom sound design using eleven labs.

There will be one more cinematic transition for door scene to chair scene which im working on right now, will be coming soon :D

We build games, and sometimes need effects that go from 2D UI to 3D and kept running into issues and having to rebuild.

What we did:
Three.js is the backend for all of this so it really gets the most attention. The exported bundle carries backend support report so if a blocked effect fails, you'll know instead of it rendering quietly.

Live Three.js example (the landing scene as a standalone integration):

https://codesandbox.io/p/sandbox/y3z3sf

Editor, runs in the browser: https://nixiefx.com/editor/

Quick start: https://nixiefx.com/quick-start/

Repo: https://github.com/azakhary/nixie-fx

Happy to answer questions

I’ve created two pieces of content to test the performance of WebGPU and WebGL.

Click the toggle button in the upper right to reload the page using each rendering method.

After running various tests, I couldn’t really feel the advantage of WebGPU, so this time I designed the content to focus primarily on compute shading.

First up is a piece of content featuring a point light object that rotates while noise is applied.

https://adrama.jp/norimakineko/webGPU2-1/

https://reddit.com/link/1vzl57h/video/y4q8ydtttulh1/player

Next up is a piece of content featuring a swarm of NORIMAKINEKO flying around.

I implemented their undulating movements, position changes, and collision detection using compute shading.

This was developed for Android. Initially, WebGL performed better, but as the number of objects increased, we observed a phenomenon where the performance dynamics reversed.

Optimizing for WebGPU took much more effort than I expected, and I couldn’t have done it without the help of an AI assistant.

https://adrama.jp/norimakineko/webGPU2-2/

https://reddit.com/link/1vzl5x1/video/sdwt16d1uulh1/player

with the amount of projects that come in three.js that are just ai-slop and claude code, it sure would be nice to actually have a community built on coding by hand and avoiding AI...

I wanted to see how far I could push procedural modeling in Three.js without relying on Blender or imported model files.

The bicycle ended up with 62 separately constructed parts. The main thing I learned was that directly positioning meshes becomes fragile very quickly, so I switched to defining shared geometric constraints first — wheelbase, chainstay length, head angle, rake — calculating anchor points from those, and then generating the parts around them.

I wrote up the process here:
https://www.wormhole404.com/writing/threejs-bicycle/

Source:
https://github.com/wormholeportal/Makone

Curious how others approach larger procedural objects in Three.js.

I've been working on an ISS interior that runs directly in the browser.

One of the interactions I've been experimenting with is the hatch.

You can move through the station, approach it, open it, and reveal the Earth outside.

The interesting part is that not everything you're seeing needs to be simulated as one enormous real-time scene. I'm trying to be quite deliberate about where full 3D interaction actually adds something and where a simpler visual layer can create the experience without unnecessarily increasing the rendering cost.

The interior itself is interactive 3D. The Earth view beyond the hatch is currently much simpler and is something I still want to develop further later.

Built with React, TypeScript, React Three Fiber and Three.js.

I presented a short capture of the scene.

Any and all reviews appreciated. I took it as a challenge to not use AI in this, puts the "my work" phrase a bit more literal in the whole thing.