r/threejs • • Sep 08 '26

Three.js r186 released 🥐

265 Upvotes

r/threejs • • Jun 25 '26

Three.js r185 released 🧡

575 Upvotes

r/threejs • • 1h ago

I built a 3D brain atlas you can zoom from the whole brain down to ion channels (three.js, single HTML file)

Post image
• Upvotes

NeuroAtlas: 6 levels of scale with smooth transitions. Whole brain → deep structures → cortical tissue → single neuron → synapse → membrane ion channels.

  • ~320k-triangle anatomical model (Z-Anatomy), picking via three-mesh-bvh
  • thousands of cells/molecules with InstancedMesh, only the active level renders
  • live simulations: action potential with saltatory conduction, 5 neurotransmitters, a Hodgkin–Huxley membrane model
  • one HTML file, no build step; also packaged as an offline Android app (Capacitor)

Live: https://dominik881-creator.github.io/neuroatlas/ Code: https://github.com/dominik881-creator/neuroatlas

The UI is in Polish (structure names switch to English). Feedback on performance on your hardware is very welcome.


r/threejs • • 1h ago

Built a low-poly city block in three.js with seven lighting looks (rain, block party, high-tech)

• Upvotes

Same street, different mood. The looks are swaps of lighting, fog and props, not separate scenes. Claude wrote most of the code, and I did the art direction and the testing on my phone.

What would you add? I'm thinking traffic that reacts to the weather.


r/threejs • • 5h ago

The 112th Sky — A Cyberpunk 3D Scene Built with Three.js by an AI Agent (DeepSeek Harness)

2 Upvotes

Completed in 6 hours, this interactive 3D scene is fully generated by DSH.
It features real-time rendering with pure code and immersive HUD visual effects, supporting WebGL perspective interaction.
Link to view the work: https://thunderous-
moxie-945597.netlify.app

I used DeepSeek Harness (DSH) to create an interactive cyberpunk-inspired 3D environment using Three.js.
The interesting part is that I didn’t write the code myself.
I gave the AI agent the overall goal and a few requirements along the way, including making the project accessible through a permanent public URL.
The agent handled the technical implementation on its own.
I wanted to explore how far an AI coding agent could go in creating a complete visual experience from a relatively high-level idea.
Here’s the result!

#DeepSeek Harness


r/threejs • • 1d ago

Real-time 3D interactive fluid simulation, hardware ray tracing via custom Three.js/WebGPU/Chromium

299 Upvotes

Some of the things I'm particularly proud of:

-hardware ray tracer - had to mod Brave's chromium to allow full RTX hw acceleration of RT via webgpu.

-bubbles and cumulative, physically simulated foam

-full 3d fluid sim, refraction, reflection, full caustics

-volumetric light shafts

-realtime/interactive

-water spray and droplets + accumulation/beading/streaks

-sand simulation

-water line w/surface tension


r/threejs • • 1d ago

my friends made a three.js world where your coding agent builds the game while you play

77 Upvotes

everyone connects their own agent (claude code, codex, cursor, whatever), you type what you want in chat and it hot-reloads into everyone's game in about a second. new stuff forms in with little sparks instead of popping in

browser demo: https://playmorf.com/?utm_source=reddit&utm_campaign=threejs


r/threejs • • 8h ago

Big open maps and blurry shadows: why I make the shadow camera follow the player in Three.js instead of covering the whole map

0 Upvotes

When an AI agent sets up lighting on a large map, its first move is usually one DirectionalLight with a huge shadow camera so every corner of the map gets shadows. It works, but the whole shadow map gets stretched over the whole area, so shadows near the player turn soft and blocky, and raising mapSize to fix it costs a lot of GPU memory.

What I check before I accept the agent's shadows:

  1. Fit the frustum to the play area, not the map. Keep the shadow camera's left/right/top/bottom around the area the player can actually see up close.
  2. Move the light and its target with the player every frame (light.position = player + fixed offset, light.target.position = player). Remember the target has to be in the scene or have its matrixWorld updated.
  3. Snap the movement to whole shadow-map texels. If the light slides smoothly, shadow edges shimmer as you walk.
  4. Tune shadow.bias and shadow.normalBias once the frustum is small. Settings that hid acne on a giant frustum are usually wrong for a tight one.
  5. Only meshes that matter cast shadows. Grass, small rocks and particles rarely need castShadow.
  6. Use CameraHelper(light.shadow.camera) while tuning so you can see the box instead of guessing.

For distant terrain I accept no real-time shadows, or I bake them.

Has anyone moved to CSM for this instead? I'm curious whether the extra cascades were worth the cost on mid-range phones.

(Disclosure: I write Three.js + AI tutorials at shanebrumback.com, which is my own site.)


r/threejs • • 9h ago

I built a 3D club in three.js that dances to a 24/7 radio of my DJ mixes – you can walk in with others (beta)

0 Upvotes

Hobby project that got out of hand: a club in plain three.js (r128, no framework) that reacts to the music in real time.

  • 3D dancers with a dance style per music genre (the genre is detected live from the audio), moshpits on dubstep/dnb drops
  • light show, lasers and LED walls on the beat, an endless maze of rooms with lifts between them, a beach where a giant wooden sculpture burns down
  • multiplayer: walk in as your own character on phone or pc, chat and talk with whoever is there (no account)
  • it's a beta: tell me what to add (here or with !idea in the Twitch chat) and I'll build the best ideas

Walk in: https://fwp.one/live?lang=en Stream: https://www.twitch.tv/deepsamsoclub

Happy to answer how anything is built.


r/threejs • • 1d ago

I built a Unity-style shader graph for Three.js TSL. It runs inside your Vite dev server

73 Upvotes

I missed having a visual shader graph for TSL, so I made one.

- Live preview on every node (real WebGPU render)
- Blackboard properties become uniforms: `shader.set('Tint', '#ff5a2b')`, no recompile
- One-click auto layout (arrange), groups, collapse, undo/redo
- A Vite plugin puts the editor at `/__shadergraph/` in your dev server: Save writes JSON into your project and the scene hot-reloads (that's the video)

npm install tsl-material-graph three

You can play with 15 live example materials and try the editor in the browser, no install.

MIT, early days (0.1). Which nodes would you want next?


r/threejs • • 2h ago

I made a three.js world where you just say what you want and the AI builds it while you play (works on phone too)

0 Upvotes

I spent 2 years building a VR RPG in Unreal before AI got good, and realized I had more fun building the systems that made creating easier than building the actual game hahah. So I packaged my workflow into a web app instead c:

You walk around your world in the browser, and film, photo, talk or write what you want, and it gets built into the world while you're standing in it. The orchard in the clip was made that way.

The idea is to bring the workflow of AI superusers to everyone regardless of technical experience or interest. And to allow the creator to focus more on their vision than wrestling with the "how's" :D
And yes, you can build any game, you dont have to adhere to the template at all, push the boundries and see where it takes you, and if you hit a wall report it to me so I can patch away the restrictions c:

- Runs in the browser, phone or desktop, nothing to install
- You don't need your own AI subscription, you see the price before every build
- Multiplayer, you can even build together
- Anything you make is yours

It's early access and still rough in places, but it's my passion project so it gets better every week. First seats open this Friday: aitomagic.ai

Happy to answer anything about the three.js side, like phone performance and loading! :D

Also feel free to roast it! I'm wide open to feedback that can improve the user experience in any way!


r/threejs • • 8h ago

Demo Driftwood - Coming Soon to iOS

0 Upvotes

I am really impressed with how well this platform converts over to Swift for iOS. I was able to convert all of the basics and functionality so it works perfectly on iPads and iPhones all of the video content. Here is game content and I’m pretty excited about it I have submitted it to the Apple App Store and now I just await for their approval. Hopefully, I have jumped through all the needed hoops!


r/threejs • • 18h ago

I redesigned my personal website to Geeek's Office

0 Upvotes

Hi, I have recreated my personal website to better reflect what I'm doing online.

https://sebwilgosz.com

I had tons of fun, and this room will fill in with stuff as I progress. One challange I don't yet know how to tackle, will be changing cameras in these flat drawings style.

I expect a lot of troubles, but will share the progress as it goes!

What do you think?


r/threejs • • 1d ago

Demo Three.js+hyper3D(gpt)+Blender+Opus

2 Upvotes

Actually, when I have AI create 3Dweb, my primary tech stack is to have it generate images based on whatever I imagine, and then use those images as references to build the scenes.


r/threejs • • 1d ago

Demo We built a way to bring three.js scenes into After Effects

6 Upvotes

Quick story first 🕹️

Wait, why After Effects?

After Effects (AE) is where motion designers put together and finish videos: ads, title sequences, music videos, product animations, social clips, and more. Think layers, keyframes, compositing, text, effects, and a timeline that controls the whole shot.

The problem is that sometimes you want graphics that are easier to build in code than with AE's native tools. That's where three.js comes in.

The Problem

Remember those 80s arcade machines? A huge cabinet, a couple of clunky knobs, and inside, a tiny chip running the actual game.

After Effects plugins work a bit like that. The effect itself might be simple, but wrapping it into a proper plugin — UI, rendering, compatibility with new AE versions — takes a lot of work. So a lot of cool real-time ideas never make it into motion design.

So here's the gap

You already build the interesting stuff: shaders, particles, 3D scenes, generative visuals, all running in real time in a browser.

Motion designers could use those things in actual video projects, but getting a three.js scene into an AE comp isn't straightforward. Screen-recording a canvas loses flexibility and can introduce quality and frame-rate issues. It also doesn't give you proper control through AE's camera and timeline.

So we built the cabinet once. You bring the chips.

I'm working on ShotLink NextGen, which lets you run a three.js scene and use its output directly inside After Effects. Here's how it works:

  • AE drives the scene. The AE camera drives the scene camera, and AE's timeline controls scene time. You can scrub through your composition and render through AE instead of screen-recording the browser.
  • Your scene's parameters become AE controls. Declare parameters like color, speed, or density, and they show up in Effect Controls. Motion designers can keyframe them or connect them to expressions.
  • You can build video filters, too. The footage on the layer with ShotLink is passed into your scene every frame, so you can process it with your own shaders and effects.
  • A scene is just a web page. Build it with HTML and JavaScript, usually using three.js. Write it yourself or use an AI coding agent. There's a prompt template to help make the result compatible with ShotLink.

The interesting part is that your work doesn't have to stay in a browser demo. It can become part of a finished video production — and motion designers become a whole new audience for the things you create.

Closed beta: Free to try, Windows only for now, and definitely still rough around the edges. We're also seriously considering keeping NextGen free in the long run.

Disclosure: I'm one of the developers. I'd especially like feedback from people who actually build things with three.js.

Join the beta: https://discord.gg/85W8VmNMQZ

Base site: shotlink.io


r/threejs • • 1d ago

Built a walkable 3D boxing gym as the landing page for our combat sports app

2 Upvotes

I'm a co-founder of Fighter Ready, an app that checks whether an amateur boxing, kickboxing, MMA or Muay Thai bout is safe before clubs agree to it. Rather than a standard SaaS landing page, we built the site as a 3D gym you move through round by round: overview, the problem, matchmaking, sparring and so on, with Three.js for the scene and GSAP driving the scroll.

The hardest part was keeping it smooth on mid-range phones while still feeling like a real gym. Happy to go into how we handled the scene, loading and the scroll timeline if anyone's interested.

Site: fighterready.com

Honest feedback is very welcome, especially on performance. (It's also up for an Awwwards nomination this week if you fancy voting: www.awwwards.com/sites/fighter-ready)


r/threejs • • 1d ago

Posting as it can be useful for general planning. Design Office, Cafes, Bars, Homes.

5 Upvotes

r/threejs • • 1d ago

Snow shader progress over the last few months

Post image
42 Upvotes

Hey everyone!

First time poster 😄

After seeing the loads of water based shader posts, I thought I'd give you guys a little look at something more solid. I've been working on a snow shader as part of a larger personal project and it's taken me a while to get here, but I'm fairly happy with how it turned out.

Anyway, hope everyone has a great start to the week, and thanks for taking the time look at my post.

~ Rein & Rev (New Zealand)


r/threejs • • 1d ago

Demo Carriage ride through Edinburgh’s Old Town, 1880s made in threejs + blender + opus 5.5

16 Upvotes

Narration with interactive 3D is soo soothing - you can control the camera as the scene and narration happens..

A deliberate b&w with artifacts.. to get that feel of old town...

Lamplighters. A tenement that fell in 1861. Barber-surgeons, 1505.
The figures are simple.

its very peaceful.. to go through the old town..

Three.js + Blender.


r/threejs • • 1d ago

Iso Trucker - working on nature

Post image
5 Upvotes

Creating grass and a living countryside for Iso Trucker - three.js


r/threejs • • 17h ago

Demo AI-generated temple → walkable scene. Draw calls 3064 → 837 with chunked LOD

0 Upvotes
Someone asked me why browser 3D worlds always feel sluggish, and the honest answer is that it's rarely the renderer — it's asset weight and draw calls.

So I recorded the whole pipeline on one scene: an AI-generated temple, dropped into a self-hosted browser world, deployed, placed in the editor, then visited from the front end.

What actually took the work:

Chunked LOD. Terrain splits into 4 levels (64/32/16/8), so distant chunks collapse before they cost anything. Measured across the scene: triangle count down 71–87%.

Draw calls. Batching plus culling took the scene from 3064 to 837. That single number mattered more than any shader change.

Asset weight. GLB textures recompressed, 68–92% smaller per model. Whole asset set: 3.1GB → 390MB.

Skeleton compatibility. Reused animations across 67 models, 67/67 mapped without retargeting.

What I haven't solved: having AI build an entire world by itself. That's a different problem from generating one mesh, and I haven't started it.

Source-available, subscription license (not open source). Runs on your own server.
Code: github.com/miduo100/3d-virtual-world

Curious what people here use for chunk culling at this scale — my cull distance is fixed per chunk and I suspect it should scale with camera FOV.

r/threejs • • 1d ago

Demo Mixamo character + separate animation files -> one GLB for three.js, without Blender

0 Upvotes

if you use Mixamo you know the setup: the character in one file, every animation in its own fbx ("without skin"), and getting them all into one glb usually means a trip through Blender's NLA editor.

we made a small tool for just that step, OneGLB (it runs on three.js itself). drop in the character and its animation files and you get one .glb with every clip on the character, named after its file (Run.fbx -> "Run"). centimetres become metres and you can tick "in place" per clip. its a normal glb, so on the three.js side it's just:

const gltf = await new GLTFLoader().loadAsync('character.glb');
const mixer = new THREE.AnimationMixer(gltf.scene);
mixer.clipAction(THREE.AnimationClip.findByName(gltf.animations, 'Run')).play();
// and mixer.update(delta) every frame

free browser try (up to 3 clips per file): https://kestrelworks.itch.io/oneglb-try

full version, every clip, offline: https://kestrelworks.itch.io/oneglb (USD 5.99 until 24.10, 3.99 from 25.10 to 04.11 in itch's Halloween sale)

same-skeleton clips only (the normal Mixamo case), no retargeting between rigs. there's a 55 s video too, it ends in Godot: https://youtu.be/yj72rCgfJHo

happy to hear what breaks


r/threejs • • 1d ago

I built a synthwave browser racer with procedural cars and cold-gas thrusters in Three.js

0 Upvotes

This is Roadster Rampage, a browser arcade racer I’ve been building with AI assistance.

The cars use procedural geometry, and the music and sound effects are synthesized with Web Audio. You can jump traffic, fire thrusters, and barrel-roll over the highway.

Play: https://www.roadsterrampage.com/

Source: https://github.com/stanleycyang/roadster-rampage


r/threejs • • 2d ago

Demo Arctic waters in threejs - Astra, Blender MCP, Imagegen

354 Upvotes

r/threejs • • 1d ago

Demo GULP Three.js update: fixing flickering models without making the whole game blurry

2 Upvotes

I shared my Three.js monster arena GULP here last week. Since then I’ve been working on mobile rendering and adding Infinite alongside the three-minute Timed mode.

Lowering resolution helped performance, but made the game look too pixelated. The more recent rendering changes focus on reducing unnecessary work: visibility checks run at 15 Hz with a margin so objects don’t rapidly switch on and off near the camera edge; animated characters use root-level visibility rather than individual skinned-mesh frustum culling; and the shadow camera is snapped to shadow-map texels to reduce shimmer.

There have also been changes to update frequency for food checks and on-screen labels. I’m still collecting device feedback, so I’m not claiming it’s solved on every phone.

Playable demo: https://run.world/pratikmane/gulp

It’s an eat-grow-escape arena with global rankings and room-code multiplayer. If you try it, your device/browser and whether you see model popping or uneven frames would be especially helpful.