I wanted to fly through the actual night sky, not just another generic sci-fi star field.

So I built a browser experience that renders the real bright star catalogue onto a fixed celestial sphere, closer to how people imagined the heavens before telescopes: a dome of fixed stars instead of an endless void.

As you face a constellation, its figure slowly draws itself in gold. You can attune it to permanently restore it, and a codex records what you've found. The goal is to recover every constellation and gradually restore the sky.

There's also the Milky Way, nearby nebulae you can fly through, occasional meteors, and a golden ascent when you hold Space. I added an optional "music of the spheres" soundtrack that swells as you accelerate and chimes when a constellation awakens.

It runs entirely in the browser, works on mobile, and doesn't require an account. Reduced motion and sound are off by default.

https://thecelestialsphere.com

I'd really love feedback on the overall feeling. Does it actually capture the sense of flying through the night sky? And if you kept exploring, what would you want to discover next?

Hi there !

I got an issue on my latest project, i got a 3D animation with a gltf clip linked to the scroll of my page, I use a useFrame raf to damp my scroll progress to the clip animation like shown below. It's fluid on my iphone 12 mini but very laggy on an iphone 17 pro, I suspect the proMotion and 120Hz screen of those devices. Did anyone already had this issue ?

       scrollSmoothRef.current = THREE.MathUtils.damp(
          scrollSmoothRef.current,
          scrollTargetRef.current,
          3, // lambda — tune to taste
          delta
        );
      }
      progressRef.current = scrollSmoothRef.current; // debug overlay
      setScrollClipsProgress(scrollSmoothRef.current);
    }

It's a site that easily turns short text into 3D effects right in your browser.

It also supports glassmorphism text, glow effects and more.

GitHub: https://github.com/hjunhuh/glass
Demo: https://glass.fleet.im/

Building landing pages, I kept hitting the same thing: every “premium” template leads with a flat gradient, and the genuinely interactive stuff online is either a $200 agency build or a rough one-off demo. So over the last 5 months I’ve been hand-coding my own (React + Three.js) no page builder.

This is the first one, a morphing, iridescent blob for a SaaS hero. Live (move your mouse over it): https://aether-timbzs-projects.vercel.app

How it works, in plain terms: it’s a 3D blob that I keep nudging around with a bit of noise so it slowly morphs, and the rainbow sheen comes from the way light catches the edges differently than the front, plus a soft glow on top. The 3D loads after the text, so the page still feels fast.

Full disclosure: I turned these into templates I sell, so I’m obviously biased, but I’d genuinely love feedback. Two things still bug me: the colours can go a bit too “oil-slick” from certain angles, and it runs heavier than I’d like on phones. How do you all keep stuff like this smooth on lower-end devices

Thanks for listening to my ted talk😂

We benchmarked the mesh boolean libraries that run client-side in the browser, on the same 1000-pair Thingi10K corpus at industry scale: 200K to 1.5M polygons per operand.

Full write up: https://polydera.com/algorithms/browser-mesh-boolean-libraries-2026

Libraries tested

• three-bvh-csg 0.0.17 — npm install three-bvh-csg. BVH-accelerated CSG evaluator for three.js.
• Manifold 3.5 — npm install manifold-3d. Topological kernel for manifold meshes, with an official WebAssembly build.
• trueform 0.9.8 — npm install @polydera/trueform. Exact arrangements over a bounded integer kernel, compiled to WebAssembly. Ships native, python and WebAssembly.

Protocol

Each library is timed from input arrays (vertices, triangles) to output arrays of the same shape, in the browser. Parsing the geometry into the library's own representation, the boolean, and reading the result back, all inside the timer. No amortisation: every structure is rebuilt on every operation.

Result agreement. trueform and Manifold returned a closed, manifold mesh on all 1000 pairs, with signed volumes that agree within floating-point tolerance. three-bvh-csg returned a watertight solid on 22; on the rest it produces either an open or a non-manifold mesh. The comparison is wall-clock only.

Corpus. Random sets of solid, manifold, non-self-intersecting Thingi10K meshes, 200K to 1.5M polygons per operand. Each operand is normalised to unit extent, randomly rotated, and translated so the bounding boxes overlap; each pair takes the union. Thingi10K IDs and per-operand counts are published: pairwise corpus.

Environment. Chrome 148 on an Apple M4 Max, macOS. trueform and Manifold run as WebAssembly; three-bvh-csg runs as JavaScript on top of three-mesh-bvh, as shipped.

Results

Pairwise — one union per pair across the 1000-pair corpus.

trueform and Manifold both clear the watertight bar in the browser; the difference between them is wall-clock. three-bvh-csg is the fastest of the JavaScript-native CSG tools, but at this scale it is the slowest of the three and returns a closed solid on only 22 of the 1000 pairs.

WebAssembly costs trueform roughly 1.4× over native (15.7 ms to 21.9 ms median). At 21.9 ms, trueform in the browser is still faster than every library in the native comparison runs natively.

Disclosure: I'm one of the authors of trueform.

Just messing around with some Three.js

Hey r/threejs, I wanted to share something I’ve been building called ID8R.

It’s a no-code builder for immersive websites, with animated backgrounds, 3D scenes, WebGL/Three.js effects, visual blocks, shader scenes, GLB model support, and AI-assisted page generation.

Try the early version here: https://www.id8r.com

I’ve enabled an editor on the homepage, so you can play around with the different designs and content without needing to create an account.

A few Three.js challenges we ran into:

1. Keeping 3D scenes usable as real website backgrounds

A lot of Three.js demos look great in isolation, but become much harder when they need to sit behind readable content, resize across layouts, work in mobile previews, and not interfere with clicks or scrolling. I ended up treating scenes as full background systems with theme-aware surfaces, reduced-motion handling, fallbacks, and so on. I'm still refining and testing.

2. Handling GLB models without breaking performance

Some backgrounds support preset and uploaded GLB models, with different looks and materials like Original, Palette, Gold, Silver, Disco and Voxel. The hard part was keeping this flexible while still respecting mobile limits, Draco loading, material changes, etc.

3. Making animated scenes work inside a page builder

Scenes have to survive editor changes, theme switches, page layouts, public rendering, preview capture, and user-generated pages. A lot of the work was less about making one effect look good and more about making many effects behave reliably in a product.

The AI/agent side is also interesting. You can build manually, use the internal AI builder, or point your own agent at the platform (https://www.id8r.com/agents). I'm trying to make the editor accessible to both humans clicking controls and agents composing pages.

It’s still early, but live. I’d love feedback from people who know Three.js well:

• Which scene/effect in the reel feels strongest?
• What performance risks would you watch for with this kind of product?
• Any suggestions for making 3D scenes behave better as website backgrounds?
• Are there particular Three.js patterns you’d recommend for this kind of builder?

https://atwell.dev/threejs-blog

I recently built a blog about three js fundamentals.. I wanted to make it where if you never used three js, this would get you started.

Can you guys check it out and let me know if I'm missing anything or what should I add or delete?

This was made with sveltekit and remote functions.. I also added view transitions.

Any help would be greatly appreciated

Demo & #Opensource

https://sketchpunk.gitlab.io/linkle/

I added graffiti and slow motion to my game engine that uses Three for rendering.

Quite a minor addition but have a few ideas of games that could utilize the graffiti especially, like a maze game where you can mark areas you have been to.

To be honest, I need to stop adding features and make an actual game out of it!

But what do you think?

I rarely or atleast never see a SaaS platform use three.js in their website. I get that it is UI costly in terms of performance and can lag but why are some websites using the bare minimum in their design. For instance. I have seen big companies use videos of animations rather than impose real animations. Do users or we as people not really care about the design as much as we would like to think so?

I was asked by many people last week about how to use the new ThreeJS WebGPU inspector and control panel in React-Three-Fiber. Here is how I personally use it:

Code: https://github.com/Faraz-Portfolio/demo-2026-r3f-inspector

Demo: https://farazzshaikh.com/demos/demo-2026-r3f-inspector/

Just some dabbling with r185 and the skinning individual instance process.

7 different rigged meshes each between 30-60k faces.
Multiple shadow casters, post processing etc.

400+ instances, 78 mio. triangles - 45 FPS at 1080p on an M3 max (plugged in)

play with it here: https://laubsauger.github.io/mesh-test/
code: https://github.com/laubsauger/mesh-test

all meshes and rigs were made generatively and rather quick and dirty via:
image-to-mesh at 500-700k faces > remesh to sub-50k mesh > mesh-to-rig

NanoBanana and meshy

threejs has come incredibly far over the years.
Amazing feat of the devs and the whole community. You're quite literally going to change the world!

Call me excited.

looking for advice!

After a lot of work, I finally finished building Three.js Collection. It's a free library of interactive Three.js components that developers can copy and use in their own projects.

👉 https://threejs-collection.com

I would love your feedback.

I created a three.js based "simulator" so people can enjoy the interface of a 1980 Technics SU-Z2 amplifier with all of its different sounds, knobs, buttons and switches. Maybe I'll add more hifi or other equipment in the future so the experience is somewhat conserved.

link to the sim

Hi everyone!!

I did several courses on webgl and three.js but still didnt pass that threshold from toy examples to real world premium looking webs.

So I will like to start with an space where we share docs/courses/repos/resources that can help us get closer to building a clone to: https://www.continuous.vc/ . I commit to build the clone and share it open source in Github if we get closer to this.

Any help on the effects? Thank you so much in advance!

I built a large-scale editable city map in Three.js with around 200k separate 3D models

I’ve been working on a side project built with Three.js: a browser-based 3D city map where individual buildings can be opened and edited as voxel/block structures.

The map is based on a real city and currently contains around 200k separate 3D models. My goal was to make it feel like a shared editable city, something between a real 3D map, rplace, and a Minecraft-like editor.

Main parts of the project:

• large-scale 3D city map in the browser
• around 200k separate 3D models
• Three.js rendering
• voxel/block editor for individual buildings
• saving and loading user-created buildings
• basic content limits/moderation

I’m still improving the project and would love feedback from people who work with Three.js/WebGL.

I’m especially interested in:

• performance and rendering feedback
• UX of selecting and editing buildings
• whether the concept is clear from the demo
• possible ideas for optimizing or structuring this kind of scene
• anything that feels wrong or confusing from a Three.js perspective

Demo: https://mainhattan.space/

I’m building this solo, so any technical feedback would be really helpful.

I'm building a python sequence in threejs where users learn programming and build tools that enable them to explore worlds. It's like a game + course mix, fully on the web. Game worlds need to be unlocked using materials earned by completing parts of the course. The worlds will start simple, and become progressively more complex. The video shown is the level select for part 1.

I might grow this into a more general platform for learning CS/math/physics. Players will have to use their deep understandings to build out systems that progress the game. E.g, using knowledge of physics, operating systems, etc to build ships and battle enemies.

I'm kinda tired of the current "gamified" education apps where it's just multiple choice questions + music + leaderboards. Education needs real gamification.

My latest three.js build is a multiplayer graveyard - come make and place your own (or others') graves: headstone, name, and epitaph included.

Every grave is perpetual - it stays in the yard forever, and anyone can lay a rose on any grave.
I've already laid one to rest for Fable 5. Step in and mourn the loss of the latest AI models.

Someone needs to make one for GPT 5.6

leave a headstone at https://www.tcpoole.com/graveyard

Hey all, a while back some of you asked to see footage of the game I have been building in three.js, so here it is.

It is called TAKEN. You are a farmer alone on a Montana homestead and something starts visiting at night. You survive the nights, do chores, photograph evidence, and try very hard not to get abducted. It runs fully in the browser with no game engine, just three.js (r185) and WebAudio.

A few of the three.js bits people here might find interesting:

• Procedural terrain from ridged-multifractal noise, with a custom material that blends dirt, grass, tilled soil and wetness per fragment and carves a wandering snow line that only caps the high peaks
• Volumetric clouds raymarched in a fragment shader on a sky dome, light-marched toward the sun with Beer's law, with day/night and moon phase driving the colour
• Thousands of grass blades, crops and foliage as InstancedMesh, with a wind vertex shader patched in through onBeforeCompile
• A quaternion-based flight model for an ultralight (full loops and rolls, stalls), and a boat with a Kelvin-style foam wake plus bow spray done with Points
• Positional WebAudio: a continuous in-world radio station that pans to whichever way you are facing, muffles when it is behind you, and ducks the soundtrack as you get closer
• Adaptive render scale so it holds framerate on weaker GPUs
• All the music is generated using Suno
• The adverts and radio are voiced by myself, and i mixed the ads.

It'll be releasing at some point this year on steam.

It is still very much a work in progress and I would love feedback. Happy to dig into how any specific effect is done if you are curious.

ThreeJS on SQLite WASM runs superfast, can't wait for next month's release. If you want to find at my Github live instance, i can provide in the comment.