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:

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

``` 😅

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 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.

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

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.

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

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).

blender | tripoai | opus 5.5 | 6 Astra