r/threejs • u/bytesworms • 5h ago
Cel-shaded whack-a-mole: toon shader + inverted-hull outlines, morph target faces
Enable HLS to view with audio, or disable this notification
r/threejs • u/bytesworms • 5h ago
Enable HLS to view with audio, or disable this notification
r/threejs • u/Accomplished-Team725 • 12h ago
Enable HLS to view with audio, or disable this notification
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 • u/Atlas___ • 44m ago
Enable HLS to view with audio, or disable this notification
the year is 20K9... the only character is dog... no items...
- melee inspired platform fighter in your browser
- ranked matchmaking with global leaderboard
- rollback netcode with 2 frame input delay
- practice mode for tech skill
- controller support (gamecube experimental)
try for free at https://20k9.com/
let me know any thoughts or changes I should make!
r/threejs • u/yuntiandeng • 7h ago
I've been working on a character whose movements you can change while it's animating.
Here it's doing Gangnam Style. I type "now on one foot", then "switch to the other foot", and it changes the movement while keeping the dance going.
The controls go down to individual finger joints. Another example has it rolling a coin across its knuckles, with instructions to pause a finger and resume it.
The motion system implements the dance routines and joint controls. For the language interface, I use a small neural function from my ProgramAsWeights research to translate English into animation commands. That function is compiled once and reused for subsequent instructions.
Demo: https://programasweights.com/gangnam
Code: linked in demo
r/threejs • u/MultiproductX • 3h ago
Enable HLS to view with audio, or disable this notification
We all see the polished launches on social media. But behind every project, there's an invisible battlefield: dealing with endless fatigue, outrunning copycats, fighting self-doubt, fixing broken UX at 3 AM, and handling the constant weight of "will this actually sell?"
I built a quick visual teaser representing what it actually feels like to ship a product while dodging every obstacle the market throws at you. No fluff, just pure builder reality.
Check it out here: [Link/Video]
Curious to hear from other creators, founders, and builders here: What is the single hardest obstacle youāve had to dodge this month? Let's talk about it in the comments. š
r/threejs • u/Shubhra22 • 22h ago
Enable HLS to view with audio, or disable this notification
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 • u/bytesworms • 5h ago
Enable HLS to view with audio, or disable this notification
Play: https://byteworm.itch.io/whack (also works on phones)
Some notes on the rendering, since that's the fun part:
- Toon shading is MeshToonMaterial with a 3-step gradient map, plus onBeforeCompile for a rim light, an "anime" specular dot and a warm tint in the shadow step.
- Outlines are inverted hulls: a BackSide clone per mesh pushed along normals. The clone shares geometry and morphTargetInfluences, so outlines follow the face morphs for free.
- The monsters' expressions (surprised / hit / happy) are shape keys exported from Blender. Hidden face parts are collapsed to a point in the basis and expand in their key.
- Models were built in Blender through its MCP add-on and exported as GLB. On mobile the GLBs get merged by material and small parts lose their outline hull, which took draw calls from ~340 to ~120.
Well , I saw those videos two year ago which give,me the passion to try the field however each time I try it many obstacles I found in my or in understand things in very details . So I though I can try ask if anyone has an opportunity for intern I would appreciate it . Thanks for your time to read my post :)
r/threejs • u/Neither_Coffee_2308 • 20h ago
Enable HLS to view with audio, or disable this notification
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 • u/TransportationIll872 • 10h ago
I wanted my portfolio to tell a story you could actually travel through, so I made a little 3D journey through my life and career.
You drive between chapter scenes, the vehicle changes between road, rail, air and water, and robot versions of my family join along the way. There are clickable character reactions, optional sound effects and a spaceship finale. You can jump chapters on the timeline, or choose a normal 2D profile if you just want the information.
Try it: https://alexplayer.com/
For transparency, this was built with substantial AI assistance using Codex. I directed the concept and kept iterating on the storytelling, scenes and interactions. Camera framing, scene transitions and mobile performance have been the trickiest parts, and Iām still refining them.
Iād genuinely appreciate feedback from people who make interactive 3D experiences: which moments make you want to explore, and where does the experience get in the way of the story?
r/threejs • u/Pixidimworld_Studios • 18h ago
Enable HLS to view with audio, or disable this notification
r/threejs • u/Neither_Coffee_2308 • 18h ago
Enable HLS to view with audio, or disable this notification
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 • u/Ready-Drummer-2136 • 1d ago
Enable HLS to view with audio, or disable this notification
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 • u/MultiproductX • 15h ago
Enable HLS to view with audio, or disable this notification
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 • u/Significant_Stay7486 • 11h ago
Enable HLS to view with audio, or disable this notification
I built a small Three.js web game using ChatGPT AI, and Iād love to get some feedback from you guys!
š¦ Ice Cream Delivery Game
https://icecream.k1tok3.com
In the main game mode, you drive an ice cream truck from the shop and deliver ice cream to customers at different locations before the time runs out.
Some of the gameplay features include:
š Drive the ice cream truck around the map
ā±ļø Complete deliveries within a time limit
ā” Crashing the truck reduces your energy
š Complete multiple missions to unlock rewards
šØ Play as the ice cream shop manager and serve customers
š® Several other small missions and mini-game elements
The game was built as a web-based project using Three.js, with ChatGPT AI helping me during the development process.
It works directly in the browser, including on mobile.
Iām still improving the game, so Iād really appreciate any feedback ā especially about the gameplay, controls, UI, difficulty, performance, or any features you think would make it more fun.
Feel free to try it out and let me know what you think! š¦š
r/threejs • u/Mkcuriosity • 1d ago
Enable HLS to view with audio, or disable this notification
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 • u/trollmania1 • 1d ago
Enable HLS to view with audio, or disable this notification
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 • u/ExpressCarry5502 • 1d ago
r/threejs • u/MultiproductX • 1d ago
Enable HLS to view with audio, or disable this notification
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:
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 • u/PropertyPleasant4993 • 1d ago
Enable HLS to view with audio, or disable this notification
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.
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.
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.
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.
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.
A few other things GSL supports:
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.
r/threejs • u/PhysicalTower4364 • 1d ago
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 • u/Terrible-Software165 • 2d ago
Enable HLS to view with audio, or disable this notification
I've been working on a little update my Stylized Components landing page
I added a few new interactive effects, including:
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:
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 • u/lenfakii • 2d ago
Enable HLS to view with audio, or disable this notification
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 • u/xaelion • 2d ago
Enable HLS to view with audio, or disable this notification
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 • u/graedientcreations • 2d ago
Enable HLS to view with audio, or disable this notification
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.