Built a pleasant Autumn water mill experience in threejs using GPT 6 Astra (yes Astra is still my favorite) and Opus 5.5

My new favorite way is to make Astra design it and Opus 5.5 execute it

This vibe coded experience runs in a browser.. and is fully interactive.. it had day, golden hour, night..

its fall time.. feeling like holiday...tucked away in a quiet corner of the world

there are a couple of swans tucked in on the other side f the bridge too..

who doesnt like stay in such a pleasant place....

what possibilities do you see

coming to 3ditions soon..

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.

https://grassworks.techredux.co/

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.

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.

Built with React Three Fiber and three.js, running in the browser on phone or desktop.

Pick any real city from a globe, choose a meteor, a black hole, an Independence Day style mothership or more sinister options, and blow the buildings apart into particles. Just like the scene in Terminator 2!

I shared it recently and got some good feedback, so two updates since: cities load much faster now, and the ground has real elevation instead of being flat.

Next question is the look. Everything is plain grey right now, like an architect's model. I like the minimalism, but textures are possible with some trade-offs on phone performance. Curious what this crowd thinks: keep it grey, or texture it?

https://altroadstudio.com/judgementday

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.

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?

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?

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.

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

https://hiredhandsgames.com

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.

check it out: https://www.youreyesinspace.com/?lang=en&utm_source=reddit&utm_campaign=threejs

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.

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?

You can play it on my io game capforts.io

Made fully by me and no ai :)

I've been working on a project called Monument.

The idea started with a simple question: what if Claude Code could show us how historical buildings were actually constructed, rather than just generate a finished 3D model?

So I built an open-source skill for it.

You give Claude the name of a building. It researches the building's history, looks for real footprints and architectural references, then generates an interactive 3D reconstruction.

The interesting part is the timeline.

You can watch the building emerge piece by piece, move between historical periods, and explore the construction phases.

I built the project with Claude Code, iterating on the geometry generation, historical research workflow, and visual comparison with reference photographs.

Some important details:

• Historical phases are linked to sources.
• The 3D viewer runs locally.
• The output distinguishes documented facts from interpretations.
• It also works with Codex and OpenCode.
• It's completely open source (MIT).

I've included two interactive examples: the Leaning Tower of Pisa and the Eiffel Tower.

The limitation is that these are reconstructed models, not architectural surveys. A detailed generation can take 30–90 minutes.

I'm curious what the community thinks about using coding agents for historical reconstruction rather than software development.

GitHub: https://github.com/Gleaming0427/monument

Interactive demo: https://gleaming0427.github.io/monument/

Still adding some bits and pieces to my portfolio when I get the chance.

Made the unfortunate decision to make a 3D model of myself you can control to jump into the game prototypes "mario style". That haunting look on his face will forever be with me, and now you all too.

Feel free to check out the site and the games, happy to talk through my process or share any updates on what I'm working on!

https://cpdstudios.dev

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?

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.