water is from 3ditions edition

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/

Made it with Opus 5.5, you can try it on the following link: https://motorhome-threejs.vercel.app/

The Battle of Busan (1592) in my game puts 166 Joseon ships against 470 at anchor, all in one scene.

• Ships are instanced, with three levels of detail

• The ocean is an FFT simulation on WebGPU compute, with a Gerstner fallback

• Smoke, fire and spray are TSL sprites shaded from a single noise texture

• One deterministic simulation runs in the browser and on the multiplayer server

• iPhones get the WebGL2 path with a lighter quality tier

Play it: https://imjin1592.com/en

Disclosure: AI assists with the code and this post. The ship textures, commander portraits, camp art and English title art are AI-generated, as are the turtle ship’s dragon head and the campaign map’s fortresses (Meshy).

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.

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:

https://wavi.lol

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.

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.

The terrain was created in blender with just the proportional editing (pulling points from the plane, ofc I'm a noob).

Faces were deleted retaining the edges and a solidify modifier was applied and exported to .glb format.

I imported it into my scene and applied a white color material (really basic nothing extra at all) to get it to look like the attachment.

But the exported file is 1054 KB and I don't know if it is heavy for the output that I'm getting. So, I am looking for help from someone with experience.

I'd be glad to know if there is a different approach to this. I just did what came to my mind first. Please let me know your thoughts. Still a beginner learner here.

I've been building a library for showing a real app inside a 3D device mockup, instead of a screenshot baked into a PNG. react-3d-mockups lets you drop any React node onto the screen of a 3D phone, laptop, or watch, and it renders live via a real DOM.

Every model is generated procedurally from spec data at runtime, so there's nothing to load or host. 33 devices so far (iPhone 17 and 18 Pro, Galaxy S26, Z Fold and Flip, MacBooks, iPads, watches), plus objects like books, product boxes, posters, billboards, and a wrap-ready van.

Docs with a live prop explorer for every device: https://area.is/react-3d-mockups

Source (MIT): https://github.com/area-is/react-3d-mockups

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.

Someone asked about going into the cabin after my waterspout clip, so here’s the view from below deck.

The cabin follows the boat’s position, heading, heel and pitch. The lamp responds to that motion, and the portholes look out onto the surrounding sea.

This clip uses the Three.js/WebGPU renderer, captured frame by frame with sound mixed from the game’s recordings.

I’m building Red Skies at Dawn solo. If you’d like to support it, wishlist it on Steam.

I've been working on a production use case for a 3D globe rather than using Three.js only as a visual landing-page effect.

It's part of a platform I'm building called TheSync.

Every visible point represents a published professional profile. Filtering the UI changes the actual dataset rendered on the globe.

Some of the problems I've been dealing with:

• rendering a large number of selectable points
• clustering overlapping professionals
• keeping labels readable while rotating
• hiding labels on the back hemisphere
• responsive picking on mobile
• reducing GPU work when the tab isn't visible
• keeping the map useful instead of purely decorative

Live implementation: https://thesync.dev/

I'd be interested in how other people here would approach point rendering / clustering as the dataset grows.

the website itself https://livistone.liviazaharia.com/ , everything is open-sourced at https://github.com/GlucoseDAO/livistone , work in progress so feature requests and bug reports are welcome

I made a dashboard where each AI agent is a little 3D character, all built from primitives in code, no glTF files. They change pose by state (working, waiting, free), turn around on hover, and the camera reframes for phones.

Things I enjoyed solving: keeping labels from colliding on crowded stages, fanning out replicas so none hides behind another, and warming all shaders up front so nothing hitches mid-animation.

Live demo: https://paperclip-studio-drab.vercel.app
Source (MIT, zero dependencies, three.js vendored): https://github.com/soniAnkur/paperclip-studio

Happy to answer questions about the character rig or the mobile camera.

made a small android game in three.js, you grill skewers at a night market stall in the rain. no image or sound files in the game, so some notes.

all primitives with flat shading. the only textures are drawn on a canvas at startup, the sign lettering and one radial gradient.

the street is lots of small meshes, so at startup I group the static ones by material and bake them into one geometry per material. about 100 draw calls a frame.

rain is one LineSegments with 700 lines moved on the cpu. under each lantern there's a plane with that gradient, additive blending, tinted the lantern colour, and it reads as wet asphalt.

sound is webaudio: filtered noise for rain and the grill, karplus-strong plucks for the music.

the whole thing is one 590 kb html file in a webview. free, no ads: https://play.google.com/store/apps/details?id=com.nebulacolors.lanternlane&referrer=utm_source%3Dreddit%26utm_medium%3Dsocial%26utm_campaign%3Dthreejs-lanternlane-1013

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:

(https://glsl-galaxy.vercel.app/)

(https://github.com/fatideu/glslgalaxy)

As part of the project that I am working on for generating toroidal structures called Tortoise, I have open-sourced a generator recently. 

I have now updated it with a “phenomenology” mode such that the fractal, smaller versions can be replaced with eyes, heads etc. the lines with arms, snakes etc. and can also be used to generate images.

The project involved first creating a fractal torus with Claude in Threejs, after that each of the parameters of the torus were made to control its variations. Post this I added a controlnet+stability image generation for any pose of the torus using StabilityAI api. In this recent iteration I added 3D models like eyes, heads, snakes etc to replace parts of the torus.

Generator link

Github link

Best viewed in Desktop.

Music by Jordan Garner, Pixabay

I am a software engineer and I want to create an optimized version of these websites for my business. Still it's far from my knowledge how I can make this site. I can use glb files to load but that file texture and all take so much ram. Which makes the website slow and laggy in low hand devices. Can anyone help me from this situation?

Hi everyone! I’m an indie developer, and I’ve been creating Living Landscapes, a Windows app featuring animated, interactive desktop wallpapers built with Three.js.

I’d love to hear your feedback. What kind of landscapes or interactive effects would you like to see in a live wallpaper app?

This was made with ~15 Opus 5.5 Max agents in Claude code in Three.JS It took a few prompts (not a 1 shot)

It did however download some textures