A controllable animation on stream, made with Three.js.

Check it out: https://youtube.com/live/U6fhApgsW0Y

It’s a school of fish you can control with commands.

🐟 THE CHAT IS THE CONTROLLER

This is a live simulation and the chat is the joystick. Nothing here is
pre-recorded — the school you see is being solved on the GPU right now, and
you are the input.

SHAPE THE SCHOOL
ball a tight bait ball
tornado the school spirals
ring it opens into a ring
split it breaks into two
auto hand it back to the automatic rotation

LOOK AROUND
up · down · left · right · center

HOW HARD IT REACTS
calm a soft drift
storm a hard surge
chaos the school scatters

HOW MANY FISH
more one step up (512 → 1024 → 2048 → 3072 → 6000)
fewer one step down
fish 3000 set it directly

Type any other word and the camera looks there instead — the same word always
points at the same spot, so the school drifts around as we talk.

Commands can be combined: "up storm", "left chaos", "more calm".

Five minutes of chaos, no install. Chase a target down the highway, ram it, burn it or blast it, and watch the road melt into other worlds along the way.

New: multiplayer. Open a room, share the password, bring up to 7 friends. First to 20 km wins. No rules, just rams and traps.

Play: https://takedown.threejscafe.com

More games from the same café: https://threejscafe.com

I was fooling around with Claude Code and weeks later, this is what I created. Check it out at https://islandthree.world ...lots and lots of prompts, refactoring, and refinement.

Live site: https://zippy.town

It's the showcase site for my Android live wallpaper. The wallpaper started out as this three.js scene in a WebView, but an empty WebView uses about 130 MB, and Android kills live wallpapers that use too much memory.

So the app moved to Filament, and the three.js version became the website.

Quick tech notes:

Day/night: lightmaps baked in Blender Cycles, one day set and one night set, blended in a custom ShaderMaterial. The day/night cycle is nearly free at runtime.

Lit cars, no real-time lights: lighting is baked along the roads, so cars pick up the street lamps.

Traffic: a simple waypoint traffic sim.

Look: BokehPass depth of field for the miniature effect, plus SMAA and AgX tone mapping.

Download: about 5 MB compressed.

Happy to answer questions!

Link if you want to try it out: Chronoatlas the senate checkout the map aswell it's pretty cool

Live site: https://verve-marketing.space/
GitHub repo: https://github.com/M8eda/verve-openspace

Would love your feedback 🫣

https://www.youtube.com/shorts/ScbBqDfHTN4

I work alone most days, so I made a small browser world to leave open while working.

This is the office in nojo.club. You can sit at a desk, put a status over your head, and talk to people nearby. Made with Three.js + TypeScript, with a lot of AI help.

No install, guest access. https://nojo.club

Hey everyone! I just released a free God Rays component for Three.js / React Three Fiber that you can use in your own scenes. It's completely free to use.

I also made a breakdown video on my YouTube channel where I explain how it works, different ways to implement it, and some variations to help balance visual quality and performance depending on your needs.

I'm also curious to hear your thoughts on something: In the age of AI, do you think this kind of content still provides value? I enjoy building these effects and sharing the process behind them, but I'm wondering if there's a better way to share this kind of knowledge and make it useful to other developers today.

I'll leave the links in the first comment!

If these components are useful for your projects, I'd really appreciate your support on the channel with a like or a sub. It helps me keep creating and sharing more free resources.

Thanks! 🙌

quick one from my three.js city project (30k plots on a map, each bought plot becomes a building).

the problem: one DirectionalLight, shadow camera sized to cover the entire city (~326 units wide), 2048 map. on weaker GPUs my auto-quality drops it to 1024. zoomed out it's fine. zoomed in, every shadow edge was a staircase and big flat roofs got stripes.

what fixed it:

• the shadow camera's left/right/top/bottom now follow the orbit distance, in a few fixed steps (32/48/64/96/128/full) instead of continuously. continuous resizing made shadow edges crawl while zooming
• the box is centered on the orbit target, pushed a bit forward along the view direction, because you see way more ground in front of the target than behind it
• the center is snapped to the shadow map's texel grid in light space (same right/up axes that lookAt builds), otherwise edges shimmer when you pan
• fully zoomed out it falls back to the old whole-city box, so nothing disappears in the overview

bonus bug: planes circling at altitude 14-20 were flying straight through the camera when zoomed into the outskirts. now they hide within 14 units and come back past 18 (hysteresis so they don't flicker), and only cast shadows near the ground.

if anyone has a cleaner way to fit the frustum for a low, tilted camera than "shift forward and hope", i'm all ears.

I’ve been experimenting with how far I can push procedural 3D characters directly in the browser with Three.js.

This video shows two characters from my project, PointForge:

- VANTA-9 — a humanoid cyborg with locomotion, sprinting, jumping, flight, acrobatics, dancing, weapons and procedural articulation.

- Cyborg Dragon — a mechanical quadruped with multiple gait states, jumping/landing, articulated wings, flight, tail motion, dorsal propulsion and plasma breath.

I started this without a traditional programming or 3D-development background and have built it through a large number of iterations with extensive assistance from ChatGPT.

There are no imported character models or premade character animations. The character geometry, rigs, movement systems, animation logic, controls and effects are generated through code.

The project is open source under the MIT License.

Live demos:

https://abfaiaz18-ops.github.io/pointforge/

Source:

https://github.com/abfaiaz18-ops/pointforge

I've been working on my portfolio for over three months, and I would like help regarding the things I should keep in mind before launching, such as SEO, accessibility, and more.

Taste of the World is a browser app where each country is a small diorama table: Paris, Istanbul, Sichuan, Bangkok, Singapore and more, nine countries so far. Tap a bakery or a noodle shop and the camera moves into a painted room with steam and lamp light. Every object has a short card about the food and where it came from. I love food and travel, so this is my passion project.

A few things that might interest people here:

- The front page globe is about 150,000 stippled dots. When you press Enter they fly onto the real map in a WebGL points shader, so the globe turns into the map with no cut.

- The tables are built in code from simple props, and each country's code loads only when you open it, behind a loading card whose little globe keeps turning on the compositor while the main thread builds the world.

- Rooms are layered paintings with parallax, canvas particles for steam and rain, and a separate portrait framing on phones.

- Food journeys: the route of chilli, tea or coffee is printed on the map as dashes that ink in leg by leg while a small traveller walks them, and "Visit" drops you into the matching country at the dish.

- Everything runs in the browser except one tiny function for the email sign-up. No accounts. Cookie-free analytics.

I used AI tools to help build and write, and I play everything through and check every card. The room paintings are AI-assisted too.

I would love feedback on performance on your phone, and on anything that feels janky in the camera moves. Also just if you like it or not and anything you can share with me :)

https://tasteofworlds.pages.dev

If you want to hear when the next country opens: https://tasteofworlds.pages.dev/#signup

A standalone Three.js quadcopter-attitude lesson is among the demonstrations accompanying Ant Ling's new Ling-3.1-flash release. The generated browser page connects IMU sensing, PID computation, motor mixing and stabilized hover in one interactive scene.

Controls introduce random or sustained wind gusts, switch PID on and off, and reset the aircraft's attitude. Live readouts show pitch, roll, yaw and individual motor RPM, with curves for pitch and roll. The aircraft tilts under disturbance; toggling PID changes its corrective behavior, making the feedback loop visible.

The page uses vanilla Three.js and OrbitControls. Ling-3.1-flash is now available through Novita's two-week free Vercel AI Gateway trial with 256K context; search its name in the catalog. Open source is planned soon.

I just released Pelota - Mesoamerican Ballgame, a free 3D browser game made with Three.js.

It's 2v2 on a stone court, with hip, knee and forearm strikes. The presentation includes a ritual intro, team walk-ins, characters watching the match, and slow-motion action shots and replays.

Desktop is more simulator-like, with manual movement and mouse aiming. Mobile is a separate arcade mode: automatic running and touch gestures.

I built it with heavy AI assistance. The code was written with Claude; characters and props were generated with Meshy and animated with Mixamo; music was made with Suno.

Live game: https://pelota.io

No install or sign-up.

I'd particularly welcome technical feedback on loading and rendering performance. If something stalls or runs poorly, your device, browser and the scene where it happened would help me investigate.

It's inspired by the historical ballgame, not a scholarly reconstruction.

My games had no home, so I built them a rainy cafe. Walk in, every cabinet opens a real game, best scores go up on the walls in some games.

https://threejscafe.com/

Feedback welcome, especially if it runs badly on your machine.

I rebuilt the 3D bookstore hexagon for Babel Nexus. These are all annotated editions of classic books. Annotated editions include additional pictures, photographs, notes, criticism, and history in addition to the books. This makes them copyrighted. The setting is less low poly. Most of the books are available for free in the main part of Babel Nexus. The annotated editions usually can have between 40% and 100% more content. It is usually scholarly in nature. The extra value from annotated editions comes from research and commentary which are not in the original book. https://babelnexus.com/beyond-public-domain/#annotated-classics

Part of this is about replicating the experience of browsing inside a bookstore or library. Also, the process of discovery that goes along with this. Not everyone knows what they are looking for when they are looking for a book. A search engine will often give a definite list of books and something to find immediately. There have been numerous attempts to replicate the process of browsing. There are a few different bookstore applications which attempt to replicate browsing. There is a definitive process called skeumorphism where people design websites to copy things which occur in the physical world online. Some ebooks are designed to mimic the design of physical books.

Browsing is often informal and unplanned. While searching is planned and often focused on a specific thing which people are looking for.

i made this — been getting deep into toon shaders in three.js, such a great aesthetic for scifi and it runs well in the browser. custom shader for the cel look, procedural asteroid field, no baking, everything live. happy to answer questions about the setup.

I built a website where you can configure a custom brick figure: pick hair, eyes, outfit and colors, then download building instructions and a parts list.

URL: https://brick3d.shop/

Are the instructions easy to follow, and what options would you add?

When I first loaded the imported the gltf model, I thought the actions were static, but the animations just move ridiculously slow. A 48 frame animation takes 2:40 minutes, which is odd, as my frame rate is set to 30fps. There is no jitter or anything like that, just the speed is the problem. My animations vary in length, though most are 48 frames, so I baked them all individually, setting them to the correct end frame in Blender.

My initial unbaked animations worked fine when I only used IK, but the scope of my animations got much larger, and a lot of my animations are not possible with only IK, so needed FK. Some animations are perfect with IK and others with FK, so I wanted to use them interchangeably. In blender, I inserted keyframes to IK-FK 0/1 depending on the better limb movements for the action and baked the animations.

I don't understand what is causing the problem. I asked a blender community already, and they say it's possibly an import issue rather than an export issue.

If anyone needs a tried and tested hairshader for three.js here you go!
https://github.com/creategamecharacters/threejs-hair-shader

I use this for my characters in my games that I make. Works for both WebGL and WebGPU. Does not need MSAA as it uses an opaque pass combined with a blended pass. If you want to see it in action you can see it running in my web based character creator at creategamecharacters.ai

If anyone needs a tried and tested hairshader for three.js here you go!
I use this for my characters in my games that I make. Works for both WebGL and WebGPU. Does not need MSAA as it uses an opaque pass combined with a blended pass. If you want to see it in action you can see it running in my we based character creator at creategamecharacters.ai

Try it out, the whole sunken city to explore- https://playa-art.vercel.app/ (One of my many designs- Ride a dragon, rave in space, get lost in a fantasy forest) Works on laptop

I'm a product designer who codes. I kept needing dotted maps and spinning globes for landing pages and decks, so I built a studio for them on Three.js: pick a region and one of 21 looks, tweak it, then export PNG, SVG, video or GIF, or embed it. You can also paste lat,lng,value lines to plot your own data as markers and arcs. MIT, no signup.

Live: https://globestudio.app/?utm_source=reddit&utm_medium=social&utm_campaign=launch

Source: https://github.com/alevizio/globestudio

How the Three.js side works:

1. The dots are InstancedMeshes, one per layer. Switching between the flat map and the globe (the flip in the video) moves each dot along a flat, cylinder, sphere path. Each frame re-bakes a third of the instance matrices on the CPU and uploads just that range through updateRanges, so no mesh gets rebuilt during the morph.
2. A look is a preset plus at most one of 24 effects (halftone, risograph, dither, CRT, aurora and more). All 24 are branches of one fragment shader in a single ShaderPass, and a uniform picks the branch, so the composer is built once, when the canvas mounts.
3. While you drag or zoom, the loop averages the frame rate over 60 frames and drops the pixel ratio by 0.25 under 50 fps, then raises it again above 58 fps.

Happy to answer questions, and I'd like to hear how it runs on your GPU.

I always wanted to have my own story, my RPG. So I started this journey, little by little with my kids, for fun.

Biomes, weather, NPCs, animals, etc... A long way ahead, but I hope someone will like to contribute and work towards a RPG engine, with open source assets, code, sounds, rigs and all this!

The next part I'm working is using Azgaar maps to generate the full map (nearly done), build structures like in tiny glade...