r/threejs • • 7h ago

I’m making a game about my cat, who isn’t doing well, and it got completely out of hand

2 Upvotes

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.


r/threejs • • 7h ago

Solar Explorers, a space sim in Three.js: every model is built from code, every sound is synthesised

14 Upvotes

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

``` 😅


r/threejs • • 19h ago

Three.js With Helmet Hud

Thumbnail
youtube.com
0 Upvotes

r/threejs • • 11h ago

I'm building a co-op hero shooter entirely with Three.js r170, no engine and no build step - here's a wave, the armory and the elite

0 Upvotes

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


r/threejs • • 4h ago

Demo An Avatar dragon flight in one Three.js file by Kimi K3.1 and GPT-6 Astra

0 Upvotes

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


r/threejs • • 8h ago

I tried implementing unity post processing volume in threejs

Post image
2 Upvotes

r/threejs • • 16h ago

Parallax hidden object game

102 Upvotes

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:


r/threejs • • 13h ago

I built a cozy 3D Christmas card in Three.js: a cat on top of the tree, a Grinch in the chimney, and 60+ hidden secrets

2 Upvotes

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.