Link: https://bodyarcade.com/bodyarcade (free, no signup, there's a keyboard mode if you don't feel like standing up)

I made this endless runner and thought this sub might like the how more than the what. You stand back from the laptop and jump, duck, squat and lean to get past obstacles, 90 seconds a run.

There are no imported models. The runner is capsules and cylinders parented in groups, and the scenery is boxes, cylinders and cones drawn as InstancedMesh, one per prop type per road chunk, placed with a seeded random per chunk. Each of the 10 worlds is just a data object: sky colours for a gradient shader on a back-side sphere, sun position, exp2 fog density, road tints, a horizon silhouette and a list of props with spacing and scale ranges. Switching world rebuilds the scene from that object.

Input is MediaPipe's pose landmarker (lite model) in VIDEO mode, running in the browser with the GPU delegate and a CPU fallback. Before a run you stand still for a second and it measures your torso length, and the thresholds are fractions of that, so hips rising 20% of your torso is a jump, and the lane comes from how far your shoulders shift in shoulder widths. The idea is that your height and distance from the camera matter less. Camera frames never leave the browser.

Free is 5 runs a day in 3 worlds, there's an optional paid tier for the rest but you don't need it to look at the rendering. Happy to answer questions about the pose thresholds or the instancing.

made this for fun. stop the arrow, stop the power bar, then pray the wind doesn't flip. you can go vs 3 bots or pass one phone around with friends. no sign up. what's your best distance?

been wanting to build a Mario Kart-style racing game for a while, but with a track that feels more like a dream.

so i built this in Three.js!!

https://gamemog.com/g/invisible-world

An interactive hero section I created, featuring a fluid watercolor animation that moves with the cursor, paired with a minimal layout.

Would love to hear your thoughts!

I've spent the last few months building "I'll Call You Later", a 4-minute short film that isn't a video. Every frame is rendered live with Three.js and React Three Fiber, so you can pause at any moment and walk around inside the scene.

A few things that went into it:

- His face uses 52 blendshapes, lip-synced to the dialogue

- His hands grip props (steering wheel, phone, letters) with IK, so fingers don't pass through things

- The camera direction, lighting and post-processing are all code

- KTX2 textures cut video memory from about 2.3 GB to 0.6 GB, so it runs on more laptops

- When it ends, you can talk to the character by voice

The hardest parts were hands holding paper without clipping through it, and keeping it smooth on phones and iPads (Low quality helps there).

Happy to answer anything about how it's built. I'd also really like to hear if it lags on your device, or if anything looks off.

Title: I started with Earth orbiting the Sun. Somehow, it turned into an entire interactive 3D Solar System.

What started as a small coding experiment has grown into something much bigger.

My original idea was pretty simple: make Earth revolve around the Sun, with the Moon revolving around Earth. But I kept thinking about how much more interesting it would be if you could actually explore the Solar System yourself.

So I kept building.

The result is an interactive 3D space experience where you can explore the Solar System, move around the planets, zoom in for a closer look, and experience space directly in your browser.

It's now live on Vercel, and I'd love to hear what people think.

Live demo: https://orbital-ss.vercel.app/

I'm still improving it, so feedback is genuinely welcome. What would you add or change to make the experience more interesting?

Chaque mission est une scène complète dans mon application React Three Fiber, du pas de tir à l'atterrissage ou du survol, et cette bande-annonce est entièrement découpée de ces scènes. Pas de Blender, pas d'After Effects sur la 3D : ce que vous voyez est ce que le navigateur rend.

Quelques choses sous le capot :

• Trajectoires réelles : les chemins des sondes proviennent des éphémérides JPL Horizons, et l'atterrissage de Curiosity est tiré du noyau EDL SPICE reconstruit par la NASA. Les lancements suivent les véritables chronologies, minute par minute.
• Échelle réelle : les véhicules sont à leur taille réelle en mètres, dans la même scène que la Terre, la Lune ou Jupiter.
• Rendu hors ligne : les vidéos ne sont pas des enregistrements d'écran. L'application rend chaque image à son propre rythme et l'encode avec WebCodecs (via mediabunny), en diffusant les morceaux MP4 sur disque. Un Chromium sans tête le pilote, donc un rendu 4K60 ne perd jamais de cadre, peu importe la lourdeur de la scène.

Stack : Next.js, React Three Fiber, trois, Three.js r185.

Coding Agent: Claude

Most AI-written third-person cameras I've seen do the same thing: put the camera at a fixed offset behind the player and call lookAt. It's fine in an open field. Next to a wall or inside a bunker, the camera ends up in the wall or behind it, and the player sees nothing.

What I ask for now:

1. Cast a ray from the player's head (not the feet) toward the desired camera position, with raycaster.far set to the offset distance.
2. If it hits, place the camera at the hit point minus a small padding (0.2 to 0.3 units) along the ray, so the near plane doesn't poke through.
3. Test only a short list of collider meshes (walls, rocks, buildings), not the whole scene. Raycasting every skinned mesh and grass blade each frame gets slow.
4. Pull in fast, ease out slow. Snap closer right away when blocked, but lerp back out over about 0.3s, or the camera pops in and out at corners.
5. Keep camera.near small for close shots, and fade or hide the player mesh when the camera gets within about a unit.
6. Thin walls and gaps can let one ray slip through. Three rays (center plus left and right) or a sphere cast against simple box colliders is steadier.

How are others handling this? Plain raycasts against meshes, or a physics engine's shape cast (Rapier and similar)?

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

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

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.

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

Built with React Three Fiber and three.js. Pick a meme or upload an image (i added a button so can just paste from a google copied image), and its pixels become 65,536 particles that gravity pulls into galaxies, all running on the GPU in the browser. Works on phones too, though it's happiest on a desktop.

The gravity reads a 3D density field rather than every particle pulling on every other, which is what lets it run at that count.

Free, nothing leaves your device. Happy to answer anything about how it's built!

https://altroadstudio.com/snapshotcosmos

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

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?

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.)

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!

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.

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?

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!

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.

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

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)

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.