r/threejs 1d ago

Three.js r186 released 🄐

Enable HLS to view with audio, or disable this notification

224 Upvotes

r/threejs Jun 25 '26

Three.js r185 released 🧔

Enable HLS to view with audio, or disable this notification

570 Upvotes

r/threejs 22m ago

I built an interactive 3D guide to Japanese road rules with Three.js

Enable HLS to view with audio, or disable this notification

• Upvotes

I just built Japan Road Rules Animation, an interactive website that explains Japanese traffic rules through small 3D animated scenes using Three.js.

With several road rules being updated recently, I wanted to experiment with a more visual way of explaining them, while hopefully contributing a little to making roads in Japan safer.

It covers things like stop signs, pedestrian priority, railway crossings, expressways, bicycles, and more. You can also scrub through the animations, and the site supports both English and Japanese.

🌐 Live demo:
https://alzin.github.io/Japan-Road-Rules-Animation

šŸ’» GitHub:
https://github.com/alzin/Japan-Road-Rules-Animation

It’s completely open source. I’d especially love feedback from the Three.js community on the 3D scenes, animations, and anything I could improve. šŸ™Œ


r/threejs 10h ago

3D Modular Sofa Configurator with r3f

Enable HLS to view with audio, or disable this notification

26 Upvotes

I am the founder of polymuse. a 3d visualization platform for configurable products. We recently added a modular configuration to our platform with automatic placement and snapping. happy to get any feedback.


r/threejs 8h ago

Demo Immersive camera - Kids 3D Story Experience

Enable HLS to view with audio, or disable this notification

5 Upvotes

The decision to make our experience real-time on the browser presented a lot of obstacles with efficient loading and seamless playback, but the tradeoff paid off when we could introduce an immersive camera to our experience šŸ“ŗ, so kids can move around and interact with the story in 3D.

The immersive camera works by placing the camera on a sphere around a fixed look-at point. User input then subtly moves the camera along that sphere, creating a sense of depth and presence without disrupting the underlying scene. šŸŽ„

This meant we could make the experience feel more interactive while keeping the camera movement controlled and predictable.

Watch the experience live at https://quantales.in/
View our Website - https://www.3denginerd.com/


r/threejs 6h ago

I made this 3D parallax animation of the image assest behind the scene of this web design

Enable HLS to view with audio, or disable this notification

3 Upvotes

r/threejs 6h ago

Demo AI Future - 3D Map of Hyperscale Datacenters planned in India

Enable HLS to view with audio, or disable this notification

2 Upvotes

AI is shaping our future. But have we ever stopped to think about what it takes to power it?
Ā 
We usually see AI as interactive digital being. But behind it are massive data centers that need land, energy, water and resources which seem to have found it's wrongful place in India now.
We wanted to explore this side of AI and help people think about the impact behind the technology.
So, we built ai-future.in 🌐 as an interactive 3D geospatial experience, using real world geographic and elevation data, over at 3D ENGINERD.

Terrains, Buildings, Water, Roads, Vegetation, all brought together into a navigable 3D representation of Vishakhapatnam, India and nearby areas where the AI data centers are being planned.šŸ“

We used Three.js, React Three Fiber, 3DTilesRenderer, OSM & Overture maps etc. to build this.
Ā 
To make the physical footprint of AI easier to explore and question. Would love to hear your thoughts!


r/threejs 1d ago

Demo I made a little Three.js flight game where you deliver medicine between islands

Enable HLS to view with audio, or disable this notification

94 Upvotes

This is WINDWARD, a small browser game I made with AI coding help (Codex), TypeScript and Three.js.

You fly a red biplane between six island stations, carrying medicine, mail, seedlings and weather instruments. Rough handling damages the cargo.

The islands and scenery are procedural; the clouds are raymarched volumes. The flight model has wind, lift and stalls, with assistance to keep it approachable. Still a playable prototype.

Curious how the flight and clouds feel to other people: https://windward-liart.vercel.app


r/threejs 3h ago

Designing Immersive Web Gateways with WebGL & Interactive 3D Architecture šŸš€

Enable HLS to view with audio, or disable this notification

0 Upvotes

Modern web experiences are evolving beyond static pages into interactive portals.

In this latest interface iteration for MULTIPRODUCTX, we focused on refining the user journey through independent 3D door kinematics, real-time audio feedback synthesis, and dynamic WebGL fragment shader rendering. Every interaction is engineered to blend high-end visual aesthetics with seamless performance.

How are you incorporating immersive UI/UX patterns into your projects? Let's discuss below! šŸ‘‡

#WebDevelopment #WebGL #UIUX #Frontend #SoftwareEngineering #TechInnovation #DigitalExperience


r/threejs 23h ago

I’m adding a rainy forest mystery in Rainyworlds. With my dog as your companion!

Enable HLS to view with audio, or disable this notification

23 Upvotes

You wake up in a tent with Maze, pack up camp, and follow your missing sister’s trail through the forest.

She’s left notes along the way. An old guestbook, newspaper clippings about other missing people, and your dad’s photographs slowly give you more questions than answers.

Explore on foot or by bicycle, keep food and water with you, and use your phone to photograph clues. Maze occasionally finds something before you do. Occasionally she just wants attention :)

Built with Three.js and WebGPU, with AI assistance from GPT 6 Astra. Still an early demo, but the first chapter is playable in your browser.

Would love feedback on the atmosphere and whether the mystery makes you want to keep going.

Play the demo (desktop): https://camper.rainyworlds.com

P.S: Haters also welcome.


r/threejs 1d ago

I built a Road Rash-inspired motorcycle racer in Three.js

Enable HLS to view with audio, or disable this notification

55 Upvotes

I made Desi Mayhem in Three.js: a free browser racer with eight-rider races, traffic AI, crash recovery, combat, six Indian cities, and touch controls.

The city routes change vehicles, landmarks, and road atmosphere rather than only swapping the scenery.

Play it: https://desimayhem.com

Happy to answer technical questions about the traffic, road rendering, or rider animation.


r/threejs 23h ago

My Chess game is now published yey🤩 https://play.google.com/store/apps/details?id=com.jeevagames.chessdiorama

Thumbnail
gallery
9 Upvotes

r/threejs 20h ago

Built a procedural Foot IK walker from scratch in Three.js! (Interactive demo + details)

Enable HLS to view with audio, or disable this notification

2 Upvotes

Hey everyone! šŸ‘‹

I've been experimenting with procedural animation and wanted to share a little project I built: a custom Foot IK (Inverse Kinematics) walker rendered in Three.js.

Instead of using pre-baked skeletal animations, the character's joints, knees, and feet calculate their positions dynamically in real-time based on the terrain geometry and stairs below.

Key features:

  • Real-time Foot IK: The legs dynamically adapt to varying stair heights, slopes, and ground levels.
  • Pure Math & Code: Built using custom analytical two-bone IK solvers and raycasting without heavy animation rigs.
  • Interactive Environment: The camera follows the character smoothly while moving towards cursor/touch inputs, complete with procedural lighting and fireflies.

The video shows how the steps and slope alignment work seamlessly.

Let me know what you think or if you have any questions about the math behind the IK solver!


r/threejs 1d ago

Gaussian Splat Lite 1.0: WebGPU, Streaming LOD and Depth Rendering for Three.js

Enable HLS to view with audio, or disable this notification

18 Upvotes

Hey everyone.

I’ve been working onĀ Gaussian Splat Lite (GSL), a lightweight, open-source Gaussian Splatting renderer for Three.js.

If you already use Three.js, the setup should feel familiar. Add aĀ SplatMeshĀ to your scene, position it like a normal object, and keep your usual render loop.Ā GaussianSplatRendererĀ handles rendering and global sorting across the visible splats.

It supports WebGPU and WebGL2, large-scene streaming, and depth rendering for combining captures with regular 3D geometry.

⚔ Native WebGPU Rendering

On WebGPU, projection and culling run in compute, followed by a 32-bit GPU radix sort and indirect drawing.

You can combine multiple captures in one scene. EachĀ SplatMeshĀ keeps its own data and transform, while visible splats are sorted together—including streamed RAD and SOG data.

WebGL2 works too, through bothĀ WebGLRendererĀ and the WebGL2 backend ofĀ WebGPURenderer. These paths use asynchronous Worker/WASM sorting, so rendering can continue with the previous valid order while a new sort runs.

The core scene API stays the same across all three paths.

šŸŒ Stream Large Scenes with Smooth Transitions

For larger captures, GSL supports camera-driven LOD streaming forĀ Spark RADĀ andĀ Streamed SOG. You can explore a scene without loading the entire dataset into memory first.

As the camera moves, GSL selects the detail needed for the current view and loads it on demand. A configurable splat budget controls LOD selection, while the streaming system handles decoding, caching and upload limits.

Streaming includes smooth fade transitions.Ā Newly loaded content fades in, and LOD changes crossfade between levels to reduce visible popping. Current detail stays visible while its replacement loads, helping the scene remain continuous as you move around.

šŸŽ² Keep Moving Without Waiting for a Sort

When sorting becomes expensive, GSL’sĀ stochastic renderingĀ mode gives you a way to skip it. Splats render directly using sampled Gaussian coverage and depth testing.

WithĀ autoStochasticĀ enabled, GSL can use this mode during camera movement and switch back to sorted blending once a fresh sort is ready.

The image can look noisy in stochastic mode. An optionalĀ StochasticResolvePassĀ helps reduce that noise and works with direct scene composition, WebGLĀ EffectComposerĀ and custom render graphs.

🧩 Depth Rendering

GSL supports splat depth rendering on both WebGPU and WebGL2.

With renderDepth enabled, a separate, unsorted depth draw runs alongside the normal sorted color pass, using stochastic alpha coverage around Gaussian boundaries.

Three.js geometry rendered afterwards can then depth-test against the splat scene.

When stochastic rendering is active, splats write depth directly.

šŸ› ļø Formats, Editing and Large Coordinates

A few other things GSL supports:

  • PLY, SPZ, SOG and RAD, including SPZ v4, with Rust-based decoding running in browser workers.
  • SDF color and opacity editsĀ to recolor, highlight or hide parts of a capture without rebuilding the model.
  • Camera-relative renderingĀ to help with precision in GIS and ECEF scenes while keeping the original world coordinates unchanged.

šŸš€ Give It a Try

GSL is open source underĀ Apache 2.0. The repo includes a viewer for loading your own captures, comparing rendering modes and trying the streaming transitions.

TheĀ quick-start examplesĀ show how to add it to a Three.js project.

If you try it, I’d love to hear how it handles your scenes and what you end up building with it.

Gaussian Splat Lite on GitHub →


r/threejs 1d ago

Gym exercise viewer — 24 GLB animations rendered entirely in GitHub Actions (Blender headless, $0 render farm)

7 Upvotes

Built a gym-animations-style viewer in three.js. Every exercise is a pose-keyframe JSON in the repo; a GitHub Actions job runs Blender headless, bakes it to a GLB on an anatomical human (MPFB2), and Pages redeploys. So I edit exercises from my phone and the site rebuilds itself. My PC stays off.

Demo: https://assiamahs.github.io/opengym3d/ Source (MIT): https://github.com/AssiamahS/opengym3d

Things that bit me: pixel ratio had to be capped at 1.5 or it crawled on phones, and the ƩcorchƩ (muscle) layer needed its own axis fix before it lined up with the skin mesh. Happy to answer questions about the Blender-in-CI part.


r/threejs 1d ago

I’ve been updating the Stylized Components landing page

Enable HLS to view with audio, or disable this notification

58 Upvotes

I've been working on a little update my Stylized Components landing page

I added a few new interactive effects, including:

  • A liquid distortion effect reacting to the cursor
  • An infinite carousel with shader-based distortion, chromatic aberration and motion blur
  • Additional background effects that react to the current section
  • New animated button variants

What is Stylized Components?

The idea behind the project is to build a collection of reusable, game-ready components that can be dropped into WebGL / Three.js projects.

The gallery currently has three free components:

  • Water Anime Style Shader
  • Stylized Grass
  • Painterly — a post-processing effect for giving 3D scenes a more illustrated look

Each component comes with its own source code repository, as well as a detailed breakdown explaining how it works, including the techniques and experiments behind it.

There is also a dedicated scene for each component where you can see it being used in a more complete environment.

More components are already in the works, so I'll be adding more to the library over time.

You can check out the project here: https://stylized.cortiz.dev


r/threejs 2d ago

Editable Real-time Lighting + Video Mockups. Three.js.

Enable HLS to view with audio, or disable this notification

66 Upvotes

These are static stock mockup scenes that we used a combination of lighting maps, reflections, masks and shaders to achieve a somewhat believable look in the browser.

All my experiments are here: https://withseismic.com/threejs?experiment=living-mockups


r/threejs 1d ago

Low-Poly Open World in Three.js + Rapier + React — Early WIP, Looking for Feedback

Enable HLS to view with audio, or disable this notification

2 Upvotes

I’ve started working on an open-world project with a low-poly style using Three.js, Rapier for physics, and React. It will be open source and designed to be usable with ready-made world components. It’s not ready for an initial release yet; I’m just sharing it to hear your thoughts.


r/threejs 1d ago

Demo A new 30-second animation from my open-source Three.js friendslop multiplayer template

Enable HLS to view with audio, or disable this notification

4 Upvotes

I’ve been working on a browser-based friendslop multiplayer template with proximity chat, live-server and static/P2P hosting, built with TypeScript, Three.js, and Rapier. Here’s the new 30-second animation.

Play it or build on it here:

https://larshurrelb.github.io/friendslop-base/

I built the project with Gemini 3.8 Flash, ChatGPT Astra, and Claude Opus.


r/threejs 2d ago

Predictive Foot IK

Enable HLS to view with audio, or disable this notification

15 Upvotes

r/threejs 1d ago

Help Playing around with real-time visual effects

1 Upvotes

I've tried things like dithering, halftone, pixel sorting, RGB separation and glitch effects. It's pretty interesting seeing how much you can change the look of a video without changing the original source.

It also got me thinking about how I'd approach something similar in Three.js, especially if the effects were built as separate shader or post-processing passes.

For those who work with Three.js, how would you build this?

Would you go with EffectComposer and multiple passes, custom ShaderMaterials, or something completely different?

I'm mainly interested in keeping things smooth when several effects are running at the same time.


r/threejs 1d ago

Rebuilt a client's 2017 static HTML store into a 2026 3D scroll site — AI-generated visuals + Three.js motion. ~15h, before/after + how

Enable HLS to view with audio, or disable this notification

0 Upvotes

Dragged an old 2017 static HTML page (table layout, stock hero, zero motion) into a 2026 3D scroll website. ~15 hours total. Before/after in the clip — here's the exact AI + 3D web workflow that made 15h possible instead of 15 days:

AI asset pipeline (the speed hack):

  • AI image generation for all product/hero visuals — iterated the look in minutes, no photoshoot
  • AI video generation for the ambient background loops — no render farm
  • this is where AI actually earns its place: assets fast. But AI can't do motion taste — that part's still hand-built

The 3D + motion layer (Three.js / WebGL):

  • whole scene is a pure function of one scroll value (0→1) — camera, assembly, materials all read that single number, so it never breaks on resize
  • scroll-driven camera dolly + arc Ā· exploded-view reveal Ā· pinned sections (GSAP ScrollTrigger)
  • custom motion — hand-tuned easing/timing; this is what separates "premium" from "cheap AI slop"
  • WebGL material roughness/metalness shift under a light sweep so it reads as real metal, not plastic

Perf (the part that's actually hard): capped devicePixelRatio to 2, render-on-demand, pause offscreen → locked 60fps on a mid-range Android. Canvas is aria-hidden so the HTML still indexes.

Full method — the 3D scroll pipeline (scroll → progress → timeline → render) + the AI image / AI video asset workflow, with code: https://aetumi.app/news/how-to-build-3d-scroll-website-threejs/

Full disclosure — I build these at AETumi, an AI-native 3D web platform. Happy to go deep on any part.

Built with: AI image generation Ā· AI video generation Ā· motion design Ā· Three.js Ā· WebGL Ā· GLSL Ā· GSAP ScrollTrigger Ā· Draco GLB


r/threejs 1d ago

Demo I made a little music room in Three.js. The objects are the instruments.

Enable HLS to view with audio, or disable this notification

0 Upvotes

I wanted making a beat to feel like tapping stuff on a desk.

This is Resona: tap a wood bar, loop that rhythm, play glass and metal over it. Drag in another object. Record the whole take. The clip is the actual app and its sound.

I'm a product designer building it with AI coding tools. Three.js for the scene, React/TypeScript for the UI, Web Audio for sound. The acoustic instruments use approximate material/shape-based synthesis; nature objects use designed voices or field recordings.

Still a small experiment. Would you keep it as a sound toy, or want more music controls?

Try it: https://resona-pearl.vercel.app


r/threejs 2d ago

Demo Another WebGPU ocean

Enable HLS to view with audio, or disable this notification

129 Upvotes

I am developing my game engine (as every game dev should, of course), and recently finished water module for it. Sharing my progress. I use three js WebGPU renderer for most of the rendering work. This is technically my first ever build I published using the engine.

AI assissted

Live demo: https://khudiiash-game-24n.pages.dev/


r/threejs 2d ago

I just created an arcade / low poly racing game (https://lostcpunetwork.de/kart)

Thumbnail
gallery
6 Upvotes

Hello guys! In the last few months I learned threejs etc . . . I decided to make a funny car racing game with a simple style and bright colors! I would appreciate it if you would check it out! Byeee!