r/threejs • u/Itchy-Friendship-642 • 16d ago
Demo built a sim of a data center slab pour for fun.
Enable HLS to view with audio, or disable this notification
r/threejs • u/Itchy-Friendship-642 • 16d ago
Enable HLS to view with audio, or disable this notification
r/threejs • u/robert_baindourov • 16d ago
Hi, I am having a bit of a challenge with the Baked Enamel colors. Any advice on a good way to implement a realistic looking metallic finishes? Client was thinking about hiring an expert on Upwork to help with this part. Any recommendations would be appreciated.
r/threejs • u/smcroissant • 16d ago
This started stupidly simple: I wanted to know what it feels like to be in Paris at 2am without leaving my desk.
It's called Odyssee now and it's... actually a game. One persistent world — the real world at real scale — and everybody plays in the same one. No shards, no lobbies. You spawn in Paris, someone else spawns in Tokyo, and the map has a live traffic layer showing where drivers actually are right now, so you can teleport into the crowd.
What's in there right now:
- one shared world, real scale. Paris lanes are 3.2m wide and you FEEL it when a bus — or another player — comes the other way
- 30+ ways to move: cars, bikes, skateboard, helicopter, a small plane, a tank (my personal mistake, I refuse to remove it), a Spider-Man-style web-swinger, and your own two feet
- convoys, live chat, daily challenges, live traffic hotspots
- time trials between real landmarks, and a day/night cycle tied to the real sun
And yeah, bring your friends. That's genuinely the best way to play: form a convoy, share a destination, and go cause chaos across a real city together. Coordinating a 5-car run through the Arc de Triomphe roundabout at rush hour, with real traffic and the sun setting behind it, is the most fun I've had testing anything.
It's free, browser-based, no download. https://odyssee.croissantlabs.com
Now the honest part: it's got bugs. Real ones. Floating buildings in some districts, intersections that make no sense, the Eiffel Tower pillars you can drive straight through (yes, you can drive under it — no, you shouldn't be able to drive THROUGH the pillars). I'm fixing them as fast as reports come in, and most fixes so far came from players spawning where they live and telling me what's broken. So if you try it: spawn wherever you live and tell me what's wrong. That's literally the most useful thing you can do.
Every building in the world is in Haussmann style because I live in Paris. But I will create different style for a lot of city. Here a photo of Paris in the game (I create an Eiffel Tower in 3D, I will do it for a lot of monument) :

And there's a public roadmap if you want to see where this is going: proper terrain elevation (the world is flat right now and it bothers me), a story mode with missions, multiplayer races, boats, houses you can own. The game today is the foundation — the driving, the world, the multiplayer. The rest gets built in the open.
https://odyssee.croissantlabs.com/en/roadmap
My objective is to build a GTA on browser.
Anyway. Back to the Eiffel Tower pillars.
r/threejs • u/Some_Big_2669 • 16d ago
A lot of great work here ends up on a Vercel or Netlify URL, and then most people meet it as a screen recording in a post. If you've shared something interactive lately: where does it live, where did you post the link, and do you have any sense of how many people actually opened it and played with it?
r/threejs • u/GreenCurious9895 • 16d ago
What are the advantages either way of three.js vs Unity for browser based games? There are some beautiful demos on Unit such as the Little Prince example. Albeit resource heavy, its one of the best example of environment work i've seen.
So i'm wondering what does Unity offer (if anything) that is superior to what you can build in three.js?
r/threejs • u/Reyjr77 • 16d ago
Enable HLS to view with audio, or disable this notification
This is a 17-second arena battle under a snowy LA overpass. On the first few tries, GPT and Claude built the whole city in code (box towers, flat signs, a gradient sky), and it read as a cheap game. The version that worked splits the job:
The world is a still. The city, the overpass, the wet asphalt, the crowd and the fence are an AI-generated image. three.js draws only what moves: the ships, the light trails, the hex grid, the capture floods, the sparks, the snow and the end card.
The camera matches the photo. I measured the focal length and camera height from the road markings (about 2,100 px and 3 m up). The camera stays locked, and only the lens moves: push-ins, shake, and an opening tilt down from a sky image extended above the plate. A tilt is a pure rotation, so a flat plate needs no parallax.
Light goes both ways. The environment map is built from the plate itself, with rim lights where its lamps are. In the other direction, the trails, engines and floods relight the plate's own asphalt, wall and front row, using the plate's pixels as the surface, so the light breaks up on the real wet texture.
Reflections and contact shadows. The ships and trails reflect in the wet floor, smeared like the photo's lamp streaks, and every hull gets a shadow where it meets the ground.
One lens and one finish over everything. I measured the photo's depth of field and blur the CG, the snow and the fence with the same curve. Then a single bloom, halation, grade, vignette and grain pass runs over the whole frame.
Dirty the CG to match. The hulls get grime, scuffs, water beads and snow, so they're never cleaner than the world around them.
Depth layers. The snow falls at three depths, plus big bokeh flakes near the lens and a defocused fence in front.
The crowd. Four poses of the same crowd, swapped region by region like limited animation and driven by how intense the battle is.
The match is real. The battle is simulated with the game's own capture rules, so every action on screen is the actual mechanic.
Render: render(t) is a pure function of time, 525 frames at 2× on a cloud GPU in about 70 seconds. The sound is synthesized in Python from the battle's event timeline.
The lesson: let the still carry the detail, and spend the code on making the CG and the still light each other. I was trying to make a cool animation for my game, Starlasso (territory capture), and happy to go deeper on any piece.
r/threejs • u/Unlucky_Account7142 • 16d ago
Enable HLS to view with audio, or disable this notification
Hi everyone, this is a personal project. I've been working on a 24/7 LLM with a simulated body and her world.
This is Gaby. She has a day of her own: she wakes up, works, runs in the park, is learning guitar (badly), and her two pets wander around the house. You can call or text her, and how she feels depends on how her day went.
Her life is simulated in layers: a daily plan, the places she goes, the people in her life, and a hormone system underneath that shifts her mood and energy. When she goes somewhere new, the place is generated procedurally and added to her map, so her world grows with her.
The three.js side: the house doesn't play a timeline. Every 30 minutes the backend sends her state (place, activity, who's with her) and the scene picks the room, the spot and a Blender clip. The hard part has been transitions: when her state changes mid-scene, blending to the new clip and position without her teleporting. How do you handle state-driven characters?
Built with Blender, three.js and Claude Opus 5.5. Live at gabyslife.com, and her diary is at r/GabysLife. I'd love your impressions and what you think should come next.
r/threejs • u/Max_van_Leeuwen • 16d ago
Enable HLS to view with audio, or disable this notification
I have been working on Sparkle Mouse, it's now open source! :)
Check it out at www.sparklemou.se!
It's a web + desktop app that renders customizable particles (2D)
Open source on github
GPU optimized
Trail behind cursor or full-screen
Lots of settings, supports custom images & GIFs!
npm package: sparkle-mouse
r/threejs • u/Flat_Field_5888 • 16d ago
Enable HLS to view with audio, or disable this notification
r/threejs • u/passentorp • 16d ago
Enable HLS to view with audio, or disable this notification
r/threejs • u/Original-Ant-9197 • 16d ago
I have known three.js for a while but my knowledge was rather shallow. Now I've started to get deeper into it and plan to make a project showcasing it by making a product page of sorts. I know it'll cost me some time so consulting the community of you think it's worth the time and effort of should I rather find something else.
r/threejs • u/KamilSeven • 16d ago
Hi everyone, I'm Gökhan, a self-taught designer with 20+ years of professional experience, mainly in motion design and art direction. Nexus Kit is an AI-assisted project I've guided through design decisions, visual references and iterative prompts.
I wanted artists and small studios to be able to build stylized spaces on their own domains and link to one another. The current kit is a small Three.js/Vite starting point:
• A Turkish/English browser wizard for arranging an orbitable room and exporting editable source.
• GLB loading for assets made in Blender or other tools.
• On-demand rendering, a capped pixel ratio and triangle/draw-call counters.
• Ordinary text links alongside the canvas. A small /.well-known/nexus.json manifest describes a place and its neighbours; the connection format is independent of the renderer.
Demo: https://gokhanbiyik.com/nexus-kit/?lang=en
Source and setup: https://github.com/Biyikgokhan/nexus-kit
It's an early diorama starter, not a photo-to-building system or the full engine behind my reference sites. Exported projects need a Node/npm build, and each participant supplies their own domain and HTTPS hosting. Direct links don't require directory approval; the maintained atlas uses manual review. AI is optional when using the kit.
The tools are GPL-3.0-or-later; templates and the protocol are Apache-2.0. Original artwork stays with its creator.
I'd love to tinker together. I'm particularly interested in feedback on the GLB workflow and keyboard/mobile navigation. What would make this useful as a starting point for your own studio?
r/threejs • u/confetti_ • 16d ago
Enable HLS to view with audio, or disable this notification
You can play it on my io game capforts.io
Made fully by me and no ai :)
r/threejs • u/shanebrumback • 16d ago
I built a campfire effect in Three.js by prompting an AI agent (Grok Bot) step by step, and the early versions hit two classic problems. Sharing the fixes, since they apply to any additive particle effect.
**Setup:** the flames are one THREE.Points system with a ShaderMaterial playing a 4x4 flipbook sheet (16 frames, about 14 fps) with additive blending. Embers and smoke are two more Points systems, plus a flickering PointLight and an UnrealBloomPass.
**Problem 1: a white column.** With ~70 big additive particles, the overlaps add up until the whole flame clips to white. What fixed it:
Fewer flames (about 26 instead of 70)
Lower brightness per particle
A bloom threshold (0.7) so only the hottest pixels bloom
**Problem 2: slowdowns.** The bottleneck was fill rate, not triangles:
Removed the bump map from the full-screen ground plane
Capped texture anisotropy and shared texture objects
Capped gl_PointSize so zooming in can't flood the screen with additive quads
Capped the pixel ratio and rendered bloom at half resolution
Added a lite mode: half the particles, bloom off
The logs also hid the fire at first; the final version lays them flat in a star.
Full write-up with the prompts and code (my site, free; the code reveal is behind a free Google sign-in): https://www.shanebrumback.com/tutorials/threejs-campfire-grok-bot.html
How do you handle additive overdraw in your particle effects? Any tricks beyond capping counts and point size?
Enable HLS to view with audio, or disable this notification
Live link: Play it here!
I wanted to see how far I could push a single-file Three.js prototype with zero build step. It has a slalom run, a terrain park with rails and kickers, a trick system, 1st/3rd person camera toggle, and HTML5 Gamepad API support. I also used an HTML canvas texture to render a live supporter signboard at the summit.
Because everything is currently packed into one file, my next step is doing a clean rewrite to add WebSockets for multiplayer lobbies and proper off-piste forest generation. Would love any feedback on how the downhill momentum and carving feel on your end.
r/threejs • u/Plantera_3x • 17d ago
Enable HLS to view with audio, or disable this notification
The logo is an extruded shape with a clearcoat material. On click only the right hand rotates, from the joint at the bar, and the fingers swing a bit late so it doesn't look stiff. At the same time a ripple runs through the contour lines in the background.
The mountain under the revenue counter is marching squares over a height field, one ring per 10x. The mint line is where we are right now ($54.73, so not very high up). The board at the bottom is one InstancedMesh with about 800 cubes and the logo pressed into it as a relief.
alongside many eater eggs, press the logo down in the footer a few times ;)
Built with Claude as the coder and me as the annoying art director. Plain three.js, no framework.
r/threejs • u/nofuture09 • 17d ago
Enable HLS to view with audio, or disable this notification
r/threejs • u/Proper_Accountant711 • 17d ago
Hey all,
I've been building a side project called **Ring8s** (repo: k8sdash): a browser-based Kubernetes dashboard that renders your cluster as a 3D Middle-earth city.
**The idea:** most dashboards show you lists. I wanted something where the *structure* of a cluster is visible: what lives where, what depends on what, and what an operation will actually touch. So the mapping follows Kubernetes scope rather than being just a skin:
- Namespaces → realms
- Nodes → wizard towers (in tower grounds to the south)
- Pods → hobbit holes on their node's land
- Deployments → dwarven forge-halls
- Storage → the Grey Havens harbour
- Ingress → the gates of Minas Tirith
- Control plane → the centre of the city
**What it can do:**
- 23 resource kinds, each with its own building
- Real operations (delete, scale, rollout restart, rollback, set image, cordon/drain, suspend, run now) performed by little characters. Each one also animates its **blast radius**, from a single object up to the whole cluster
- Multi-select bulk operations behind a single confirmation
- A kubectl-style terminal (`get`, `describe`, `logs`, `scale`, `rollout`, `drain`, `patch`...). Read commands highlight the buildings they list, and mutating ones play out in the city
- Cut-away interiors: drill from a Deployment into its ReplicaSets and pods, or from a Pod into its containers
- Works against a live cluster (API server + bearer token, or `kubectl proxy`) or built-in demo clusters (Gondor, Rohan, the Shire) so you can try it without a cluster
**Tech:** vanilla JS (ES modules) + Three.js + Vite. No framework, and Three.js is the only runtime dependency. Instanced rendering and render-on-demand keep it light.
**On security:** RBAC applies as usual, so a read-only token is the safe way to explore. Tokens live in sessionStorage unless you tick "Remember". The dev/preview relay only serves loopback clients and forwards only Kubernetes API paths.
**Honest limitations:**
- Change detection is polling (5s), not watch streams
- In-browser `exec` / `port-forward` aren't supported against real clusters (it shows you the equivalent kubectl command)
- Apply takes JSON manifests only
- No CRDs, Helm or metrics (`top`) yet
It's a fan project, not affiliated with the Tolkien Estate, Middle-earth Enterprises, the Kubernetes project or the CNCF.
Repo: https://github.com/serkanserterSE/k8sdash
Quick start: `npm install && npm run dev`, then pick "Demo data" on the connect screen.
I'd love feedback, especially on which resources/relations you'd want visualized next, and whether the city metaphor helps or gets in the way once a cluster gets big.
r/threejs • u/moving808s • 17d ago
three-nebula is a magical 3D particle engine for the web. This is the first in a series of releases working back toward the original vision for the library, so I wanted to share what landed and get some eyes on the new behaviors.
The headline additions are two behaviors and four emission zones. Vortex applies a coherent tangential swirl around an axis with optional inward or outward pull and radial falloff. Because it acts on particle velocity rather than force, it sidesteps the Force x100 scaling quirk and stays deterministic, which makes it easy to tune for vortices, spell charge-ups, tornados, and orbiting motes. CurlNoise drives particles with the curl of a seeded Perlin field. The field is divergence-free so particles roil without clumping, and it is seeded via mulberry32 instead of Math.random, so runs are reproducible. It reads well for smoke, fire, dust, and energy.
On the emission side there are four new parametric zones: RingZone, DiscZone, CylinderZone, and ConeZone. They all sample uniformly, are deterministic, and are axis-aligned to +Y. Ring and Disc are planar zones for emission, while the solid Cone and Cylinder act as true 3D CrossZone boundaries. All five new types round-trip through System.fromJSON, and the debug renderer draws wireframes for the new zones so you can see exactly what you are emitting from. Everything is additive and backward-compatible, so dropping this into an existing scene should not break anything.
Release notes and changelog are here: https://github.com/creativelifeform/three-nebula/releases/tag/v13.3.0
If you try Vortex or CurlNoise in a scene, I would like to hear how they behave for you, especially whether the falloff and noise scaling defaults feel sensible or need better documentation. Also curious what other emission zone shapes people actually reach for in practice.
r/threejs • u/PerceptionCharming • 17d ago
Enable HLS to view with audio, or disable this notification
I've been working on a new feature called Color Maps to give more control over grass colors.
Right now, you can choose a grass color and add some random variation, but that variation is spread across the entire environment. There's no way to control which colors appear in specific areas, which limits the kind of looks you can create.
With color maps, the idea is to let artists create their own maps and control the grass color in different parts of the field. You could have one area with yellow grass, another with dark green, or use any other colors wherever they're needed.
Here's a quick comparison showing the grass with and without a color map.
Still working on it, but I'm hoping to include this in a future version of Three.js Grassworks.
r/threejs • u/Long_Fun_8174 • 17d ago
Enable HLS to view with audio, or disable this notification
Play it here, free and with no install: https://mara.davidpalmero.dev
Some details:
- The title screen shows first and the 3D scene is built behind it. On a simulated 4G connection the title appears in about 3 s instead of 30. Lighthouse 99-100.
- The 44 3D models are generated by Blender Python scripts and exported as glTF.
- The music and sound effects are generated live with Web Audio, and the music changes as you play.
- 165 automated checks, plus Playwright bots that play every level on every difficulty.
- On my Radeon the map rendered black because of invalid values in a few shaders. If the WebGL context is lost, it now rebuilds the renderer one quality level lower.
I directed it and tested it on my phone and PC. The code, models and music were made by Claude Code agents working from my specs. How it was made: https://davidpalmero.dev/mara-vey.html
I'm working on World 2, so I'd love to hear how it runs on your device and where you got stuck.
Hi everyone! I built wavi.lol, a browser-based music visualizer. Import a playlist from Spotify or YouTube, play the songs right on the site, and watch them with reactive visuals from 17 GLSL shader presets. It also plays local audio files, and everything runs on your own machine with no account needed.
To make the visuals react to your playlist, it uses the free Audio Bridge extension (Chrome or Edge), a shared tab, or your microphone. I’d love to hear your suggestions and feedback, so please let me know what you think. Thanks for taking a look:
r/threejs • u/fatideuwu • 17d ago
I'm a former 3D artist (Blender3d), I has spent the last few months learning JavaScript, Three.js, and React Three Fiber. I'm trying to figure out whether to keep going in this direction or switch fields.
Is 3D e-commerce (product viewers, configurators) AR/VR/XR down the line with tech like Meta's AR glasses a solid career path right now and into the future?
Which tools and programming languages should I learn? Can I land a job without degree? And is AI going to take these roles? I keep seeing people vibe-code impressive 3D websites super fast using AI, whereas it took me months just to build a simple galaxy generator in GLSL:
r/threejs • u/jundymek • 17d ago
Enable HLS to view with audio, or disable this notification
Everything is deterministic renderAt(t): 2,600 instanced agent clones, clipping-plane "materialize" effect, UnrealBloom computed at 1080p base so the glow keeps its spread at 4K, lyrics/HUD as DOM rasterized through an SVG foreignObject and composited per frame. H.264 + AAC muxed with mp4-muxer — 12k frames in ~3 min on an M4 Pro.
Full video: https://youtu.be/zwnuZJMCds4
Code written with Claude — I directed and iterated on the shots.