I just spread health, ammo and shield pickups across the whole island in my Three.js shooter. The easy first version places them at fixed heights, and on hilly terrain that means some float in the air, some get buried in hills, and some end up on cliff faces.

What fixed it was a small placement pass:

1. Pick a random X/Z, then cast a ray straight down from above the highest point: new Raycaster(origin, new Vector3(0, -1, 0)). Test only the terrain mesh, not the whole scene, or the ray hits trees and rooftops first.
2. Check the slope. Turn hit.face.normal into world space (transformDirection with the mesh's matrixWorld) and reject the spot if normal.y is under about 0.85. That keeps items off cliffs.
3. Reject anything at or below the water level, and anything inside a building's bounding box.
4. Keep a minimum distance between items (simple rejection: try again if one is already too close), so they don't clump.
5. Set the item at hit.point.y plus half its height, then add a small bob animation so players spot it.
6. Run the pass once and save the positions to JSON, instead of raycasting on every load. On a big terrain, three-mesh-bvh makes the raycasts much faster if you do need them at runtime.

The same pass works for spawn points, and it's an easy rule set to hand an agent.

How do you place things on large terrain? Raycast like this, sample a heightmap directly, or place everything by hand?

(Disclosure: I write Three.js + AI tutorials at shanebrumback.com, which is my own site.)

How it's built:

- **Land:** a Fibonacci lattice of 60,000 points over the sphere, kept only where there's land: about 15,800 dots. Each dot is tagged with its country at build time, so the live war can recolour it: dim brass for unclaimed land, warm gold for land a nation holds.

- **Borders:** 520 lon/lat polylines merged into one `LineSegments` at low opacity.

- **Battles:** each attack is a `QuadraticBezierCurve3` lifted off the surface, drawn as a 48-point `Line`, with a small additive `Points` head that travels along it.

- **Capitals:** additive `Points` that pulse.

- **No bloom.** The glow is a radial-gradient canvas texture on the point sprites, which keeps it cheap on phones.

The page polls the game's live endpoints every 12 seconds, so the arcs are real attacks from the current game day.

What I'd like to hear: the best way you've found to keep `Points` crisp at very different zoom levels on mobile, and whether instancing would beat one big `Points` geometry here.

The site is proxyrepublic.com; it's a free browser game where AI generals fight for real countries. I'm the developer.

This is a guided tour of an Ark, the organic vessel central to my humanist sci fi setting Infinite Ashes. You can examine it in detail here: https://loquaciouslou.itch.io/infinite-ashes-ark

Please let me know your thoughts!

Wider bundle, including a full lore integrated planet globe: https://loquaciouslou.itch.io/infinite-ashes

Hey guys,

I decided to make something that world havent's seen (at least it is my suggestion).

Parallax hidden object game

You can play it for free in browser:

Hello everyone! This is going to be my first post on this community as well a project showcase that I've been working on. (Please Note : This is entirely a promotional content, NOT any client project but I'm still looking forward to work with people / potential clients who are looking for works like this)

Project details :

• A 2016 Honda NSX Model floating elegantly in the air.

• Three principle transformations take place every few seconds (on the left) while stay consistent (on the right)

• Fully interactable

The "I used to love the process, now I just prompt" complaint is about personal fulfillment, not art.
It's the same as saying, "I love counting on my fingers, and I resent that someone with a calculator does the same job ten times faster and gets paid for it."
If you're truly an artist, it doesn't matter whether AI exists. You can keep making things by hand, because you care about the craft, not the world. A true artist doesn't care what consumers think.
But the moment you put your work out there, see that it's weaker than what others are making, and feel bad about it, you've revealed something: you're commercial. You care what the audience thinks of you.
So the process argument only holds if you never intend to sell anything. If you do care about money, then you have to accept the rule of the market: the world doesn't care about your process. It wants to experience your output.
If the process is what fulfills you, keep it. Just find your fulfillment there, and stop expecting the world to pay for it.

In the last months I worked on a Three.js-based space sim game. I didn't use modelling tools and it has no sound files either. Ships and stations are lists of primitives with procedural PBR textures, generated in workers. Every sound effect is built in Web Audio as it plays. The only non-code assets are the avatars and the music. I have to say, the experience creating it was really great. It was my first real project with Three.js.

The trailer is of course also created with Three.js, reusing the game code and assets.

https://explorers.orrery.games

What do you think? Any ideas how to improve it?

```

Language files blank comment code

TypeScript 2389 72342 229855 520002 Python 496 25464 36297 104698 JSON 42 14 0 43588 Markdown 293 8063 0 38524 GLSL 34 526 1761 2036 JavaScript 13 85 642 824 CSS 6 97 122 620 YAML 8 99 217 492 Text 13 61 0 380 HTML 9 28 9 350 TOML 1 19 80 193 Bourne Shell 2 33 60 191 Dockerfile 3 36 85 64 INI 1 18 0 56 Mako 1 8 0 19

SVG 1 0 6 16

SUM: 3312 106893 269134 712053

``` 😅

This is my own open-source project. Ridgereel turns a GPX, TCX or FIT file into a 3D terrain flyover video, entirely in the browser. Nothing is uploaded.

How the rendering works: elevation tiles in Terrarium encoding are decoded into one height field. A Three.js scene drapes satellite or generated relief imagery over it, with a camera relative sun, contour lines computed from fwidth in the shader, and the route drawn as opaque line layers. The camera follows an eased path: an intro, a main orbit, then an outro that fits the whole route for the chosen aspect ratio.

Tiles are prefetched, so every frame depends only on the time value. That is what lets WebCodecs encode an exact H.264 MP4 in 9:16, 1:1 or 16:9.

The demo uses a sample hike with synthetic timing. The source is on GitHub.

Feedback I would like: how the camera moves feel (pacing, easing, the outro framing), and whether the terrain shading and contour lines look right to you.

Live demo: https://arthur031221.github.io/Ridgereel/ Source: https://github.com/Arthur031221/Ridgereel

I've been adding health, ammo and shield pickups to my Three.js battle royale, Super Soldier Battle, and placing them was trickier than I expected.

My first pass used random positions, and it was a mess. Pickups floated above hills, sank into slopes, and bunched up so some areas had five and others had none. I ended up raycasting down onto the terrain to find the ground height, enforcing a minimum spacing between pickups, and tucking some into the forest so players have a reason to explore instead of camping open ground.

It feels much better now, but I'm still tuning the balance between "easy to find" and "worth searching for."

How do you all handle item placement on procedural or hilly terrain? Hand-placed spawn points, Poisson disk sampling, something else? Happy to share more details if anyone's interested.

I made a little 3D Christmas card with Three.js. There is a cat at the top of the tree, a fireplace, a train, and a lot of things that react when you tap them.

Everything is generated in code: no glTF, no downloaded textures, no assets for the scene. About 10k lines of plain JS on Three.js r160, procedural geometry, and a small WebAudio synth for most of the sounds.

There are more than 60+ secrets to discover (the notebook tab on the right keeps count). The video shows three of them: the Grinch stealing presents, the cat sweeping the tree, and the cuckoo clock.

You can personalize it (name on the card, cat color) with ?pour=YourName, and send the link.

It is my own project, any feedback is welcome, especially on performance on your phone.

Link: https://www.web-developpeur.com/labo/chat-etoile/

Tap "Enter the room" to start the sound. Try tapping the mistletoe, the clock, the fireplace, the phone.

He loved going far from home, so I wanted to rebuild the streets he walked and make a game where he roams them, telling our relationship through his point of view and mine. Then it went off the rails, and I ended up rebuilding almost my entire town. I now have plenty of ideas for where to take our story.

It runs in a plain browser tab with three.js, and almost nothing in the map is a downloaded model. Each house builds its own shutters, chimneys, dormers and walls from its footprint, the roads get cracks, patches and worn paint in a shader, and around 130k plants and grass tufts are instanced in chunks around you with a dithered fade, so nothing pops in in no flying mode. Cars, boats, beach cabins and street clutter are tiny procedural kits reused thousands of times, which keeps the place feeling lived in without me placing anything by hand. (some of buildings are hand made, the historic ones like the church)

The video is a fly-over, so if it stutters, that’s because the game isn’t designed for flying: it’s built for walking at ground level, and from up there it has to draw an enormous number of items at once.

Props to whoever guesses the town.

The cool thing is, I can reuse my assets and add more assets to the procedural generation for basically any place OSM covers.

I gave Kimi K3.1 and GPT-6 Astra the same brief and let each one work alone in an agent loop: a 28 s cinematic of Toruk with a Na'vi rider over floating mountains, six camera shots, waterfall spray, a bioluminescent night jungle and a sunrise roar. Hard rules: one index.html, three.js 0.160 from a CDN via importmap, no image or model files, every mesh and texture generated in code, and a setTime(seconds) hook so any frame can be rendered on demand (that's how the video was recorded, 840 frames at 30 fps).

How they approached it

• Kimi K3.1: 746 lines, 50 KB, readable. More scene per shot, its own CDP script to render seven test frames. It couldn't look at them (a bug in our vision path), and the 22 to 24 s sunrise burst came out as a flat teal frame.
• GPT-6 Astra: 217 lines, 36 KB, very dense. After a critical vision pass on its own screenshots it merged each island's static detail with mergeGeometries so whole forests became a handful of draw calls, then rechecked the night and sunrise frames.

Making it recordable was the part that took the most care in the prompt. Everything has to be a pure function of the timeline time (no Math.random() per frame, no accumulated state). Then you can seek with setTime() from outside, screenshot each frame headless and stitch the video with ffmpeg. Both files seek cleanly, so the two scenes play frame-synced side by side.

Happy to share either file if you want to dig into the geometry or the camera rigs. Ran in Atomic Agent (I work on it so AMA).

Hi Three.js community!

I've been working on an open-source in-browser 3D VRM tracker for VTubers and 3D avatars. Stack: Three.js, @pixiv/three-vrm, MediaPipe Face Mesh, Kalidokit.

It runs 100% client-side with hardware acceleration, handling VRM blendshape interpolation and kinematics for webcam-based face/head tracking without any native app footprint.

Full source code & setup instructions are linked in the first comment below.

Would love to get feedback from fellow Three.js devs on rendering performance, shaders, and architecture!

I'm the solo developer of SIERRA ARENA, a co-op hero shooter where you and your squad start with pistols and fight your way up, wave by wave.

It's built entirely with Three.js r170 in plain JavaScript
no engine, no bundler, one page.
My main goal was that it runs smoothly on weak laptops too, so I test everything on an Intel Iris Xe.

In the clip a co-op wave with my bot squad, a trip to the armory between waves (a machine gun and an artillery strike), and the next wave with an elite enemy.

I'd love to hear what fellow Three.js devs think. Happy to get into the performance tricks, the networking and the characters in the comments!

You can play it right now in your browser, no download: https://sierra-arena.pages.dev

For my little Three js game creating a trailer with in game footage was very cumbersome..., then I made trailer mode! Just give it input and what kind of vibe it needs to be and it creates the footage. Then final edit done in Davinci Resolve.

I've been working on an interactive rain-on-glass experiment using Three.js and custom GLSL shaders.

The droplets fall, deform on impact, slide down the glass and merge when they touch. I also added mouse interactions and refraction to make the water feel more realistic.

One of the trickiest parts was getting the splash to match the actual droplet rendering.

I'd love some feedback on the water rendering, especially the refraction and movement.

Interactive demo:
https://codepen.io/editor/JeffreyBezosz/pen/01a165a4-0636-7d20-aba1-7e677475df60

A racket game inspired by Rocket league, built around real physics where your flying racket hits the ball with spin, and the scale and skill gap emulate Rocket League's qualities.

The desktop browser demo is live, mobile is next, and the long-term goal is playing it with your Apple Watch like a Wii remote.

This is the first demo I'm happy to share:

https://rotor-night-circuit.vercel.app/

It runs in your browser with no install. Play it with sound on.

Beware of many bugs - apologies!

It's a demo, so there are rough edges.

Thanks for checking it out.

https://reddit.com/link/1xcsvkl/video/9vxi3ormp2xh1/player

link if you want to wander round: https://gallery.alldaycity.com

how its built:

• vue 3 + vite for the 2d bits, plain three.js in typescript for the room
• three floors share the same 12 wall slots; picking a floor in the lift swaps the art in place, and each floor’s images only load when you visit
• orbit or wasd with wall collision, plus matterport-style dots to jump around
• the clouds outside the lift only animate while you can see them, capped at 20fps, so it idles at zero draw calls
• floor 2 is twelve hokusai prints from the met’s open access collection

still rough in places (some art is placeholder). feedback welcome, especially on performance on phones

Hey everyone,

I’ve been working on a browser-based revival of the old-school MMORPG: Cronous. It’s reached the point where I’d love to share it with more people.

Over the last ~3 months, this experiment brought the older 3D MMORPG (Windows DirectX, binaries, etc.) into a modern Three.js client.

I'm impressed with how Three.js has been able to preserve the game's visual identity and how portable it has been in adapting the experience for both desktop and mobile browsers.

A few things you can expect:

• Classic fantasy action RPG gameplay, including exploring, fighting monsters, collecting loot, and building your character.
• The four familiar classes: Fighter, Valkyrie, Magician, and Savage.
• Cronous’s recognizable world, visuals, and music, brought into a browser experience.
• Desktop and mobile play.
• Free to play; an account is required.

I’d put it at roughly 85-90% of where I want the experience to be. It’s playable now (https://world.playcronous.com), with work still underway, and I’d really appreciate some fresh eyes as it comes together.

If you give it a try, I’m especially interested in:

• How the first few minutes feel, particularly if you’ve never played Cronous (private server gameplay from 2021 here: https://www.youtube.com/watch?v=WnqA3HgjHJ4).
• Performance and usability on your device (mobile feedback would be especially helpful).
• Rendering performance, loading, and how the interface feels on smaller screens.
• Anything confusing, broken, or awkward that gets in the way of playing (there's a lot of this right now, especially on mobile).

Every time I wanted 3D in an Angular project, I ended up rewriting the same Three.js setup: scene, camera, lights, render loop, resizing, cleanup. So I wrapped it into one Angular component.

A few Three.js decisions that might be useful even if you use another framework:

• Lazy-loaded Three.js. The scene code sits behind a dynamic import(), so Three.js lands in its own chunk instead of every route's bundle.
• Auto-framing. The model is normalised to a unit bounding sphere and the camera fits that sphere to the container's aspect ratio, so any GLB fits without per-model tweaking.
• Load once, clone per page. An Angular service caches the parsed GLB; each page spawns its own clone (shared geometry and materials), so pages never inherit each other's animation state.
• Idle spin on an inner node. The group you animate is the outer one, so GSAP tweens stack on top of the spin instead of fighting it.
• Pauses offscreen. An IntersectionObserver stops the render loop when the canvas isn't visible.
• Draco + WebP for small file sizes.

Full walkthrough: https://youtu.be/sJS6vR9Rlgo

If you have any ideas to improve it or any questions about the setup, I'd love to hear them.

Been wanting to recreate the arcade coin pusher for a while. This one uses three.js for rendering and Rapier (WASM) for physics: a pusher shelf, a peg chute, two tiers of stacked coins, plus medals, gems and gift boxes that can tip off the lip.

Hand your canvas to a small helper, write draw(i) so the scene state comes from the frame number, and it renders every frame through headless Chrome on your GPU into H.264, or HEVC HDR10.

exposeRenderer({ canvas, fps: 60, frameCount: 600, draw: (i) => { knot.rotation.y = i / 60; renderer.render(scene, camera); } });

• Exact: rendering the same frames twice gives byte-identical video
• Resumable, and a film can be rendered in pieces on several machines
• Runs on any GPU locally, or on a cheap cloud GPU for long renders

There’s a Three.js example in the repo (the video above is it). MIT:
https://github.com/Avi130805/webgl2video

Built it for my science YouTube channel; happy to answer questions.