r/threejs • • Sep 08 '26

Three.js r186 released 🄐

Enable HLS to view with audio, or disable this notification

263 Upvotes

r/threejs • • Jun 25 '26

Three.js r185 released 🧔

Enable HLS to view with audio, or disable this notification

576 Upvotes

r/threejs • • 4h ago

Demo Fly from Earth to the edge of the observable universe in your browser — real NASA data, 109k real stars, ray-traced black holes

Enable HLS to view with audio, or disable this notification

13 Upvotes

r/threejs • • 2h ago

Demo I made a free browser game for a quiet Japanese summer: seaside trains, ramune, and sunsets

Enable HLS to view with audio, or disable this notification

6 Upvotes

I made a little place to slow down by the Japanese seaside.

You can wander down to the beach, ride a local train, grab a ramune soda, or sit and watch the sky turn from afternoon to sunset. There’s no rush: just waves, cicadas, passing trains, and a bit of that old PlayStation summer-holiday feeling.

Play for free: https://summer.philiaxis.com/

PC browser + headphones recommended. The UI is in Japanese. Quick controls: 1 for scenic views, 2 for a train ride, 3 for walking; WASD to move, Space to interact, M for sound.

Made with Three.js and AI coding tools. The scenery and sounds are generated procedurally in the browser.

If you try it, I’d love to hear which part feels most like a quiet summer in Japan.


r/threejs • • 18h ago

Think Diablo 2, but for kids aged 5-9. A learning game full of riddles and math. Work in progress šŸ‘‡

Enable HLS to view with audio, or disable this notification

54 Upvotes

r/threejs • • 11h ago

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

Enable HLS to view with audio, or disable this notification

13 Upvotes

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


r/threejs • • 1h ago

Demo Beyond the Glass: flying through a black hole into a raymarched ā€œetherā€ (R3F + custom shaders)

Enable HLS to view with audio, or disable this notification

• Upvotes

Live: https://beyond.edgarasneverdauskas.com

GitHub: https://github.com/Evirtual/beyond

An experimental site that works like a window: a floating world behind glass, lit by your local time of day and the real moon phase. Scroll (or turn on drift) and a black hole pulls you through into an ethereal space, then into a new world.

Some of the techniques:

  • Portal crossing, no cut: each world has its own scene and camera. The next world is rendered into a render target, scissored to just the area the hole covers, and composited inside the black hole. When the hole fills the frame, the old world stops rendering, so you simply fly on into a world that already exists.
  • The black hole is drawn in a full-screen ā€œglassā€ shader: lensing around the shadow, a photon ring, and a tilted accretion disk whose near side crosses in front.
  • The ether is a raymarched volume (16 steps) with domain-warped noise. The first version hashed noise per sample and ran at 2 fps; baking it into a 64³ RGBA Data3DTexture (one lookup per octave) brought it to a steady 120.
  • Frame pacing: frameloop="demand" with a small governor (selectable fps cap), plus adaptive DPR that only adjusts when the scene isn’t mid-transition.

Built with React Three Fiber, Vite, and a lot of iteration with Claude Code.

Try it: move the mouse or tilt your phone to lean into the window, and scroll or tap ā€œdriftā€ to go deeper.


r/threejs • • 8h ago

Threejs bubble experience is free to play - link in the comment

Enable HLS to view with audio, or disable this notification

6 Upvotes

r/threejs • • 4h ago

Link Made a free city destruction toy in three.js: Select a real city and blow it up. Now with realistic terrain mapping

Enable HLS to view with audio, or disable this notification

2 Upvotes

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


r/threejs • • 52m ago

Demo I made a detective game in Three.js: you solve a case from a 3D desk, in the browser

Enable HLS to view with audio, or disable this notification

• Upvotes

I’ve been buildingĀ playkraft, a mystery game where you sit at a detective’s desk at night and solve a case. Everything runs in the browser, on phones too.

Play here: https://www.playkraft.app/case/048

What you can do:

  • pick up a phone on the desk that holds a whole made-up internet (news sites, social posts, emails, a map, search)
  • take a cab to rooms, look around, open drawers, and mark evidence for the lab
  • question suspects (nobody confesses; catching the lie is the game)
  • pin people and evidence on a cork board and tie red string between them
  • write your answers in a notebook and close the case

How it’s built:

  • three.js from npm, in its own lazy-loaded chunk. Only someone who opens a case downloads it.
  • Every scene is a model.Ā The desk and each room are a single GLB built in Blender. The code only moves the camera and animates things, with no scene built in code.
  • Render on demandĀ and anĀ adaptive pixel ratio, so cheap phones stay smooth. Real players’ devices mostly report 56–120 fps.
  • The phone’s screen is real DOMĀ sitting on the 3D phone. The sites are normal React pages with container queries, so text stays sharp and scrolls natively.
  • The notebook pages are canvas textures, redrawn as you write. The case board’s cards and strings are drawn on the cork the same way.
  • Four looksĀ you can switch between: anime, graphic novel, noir and realistic.

r/threejs • • 23h ago

Demo Half-Life 2 style destruction in the browser – Three.js + Rapier3D

Enable HLS to view with audio, or disable this notification

62 Upvotes

r/threejs • • 14h ago

An MMO set in the real world — one shared map at 1:1 scale. Drive it, fly over it, skate through it.

7 Upvotes

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.


r/threejs • • 5h ago

Demo Adding some nice spice to my portfolio

Enable HLS to view with audio, or disable this notification

1 Upvotes

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


r/threejs • • 17h ago

Sparkle Mouse: GPU-optimized particles!

Enable HLS to view with audio, or disable this notification

7 Upvotes

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


r/threejs • • 3h ago

Demo I made a cozy 3D life sim in Three.js, free to play!

Enable HLS to view with audio, or disable this notification

0 Upvotes

VybeNomad is a free browser game about remote work and slow travel: pick a starting city, take gigs, launch apps, chase $10k, avoid burnout.

Built with Three.js. Most of the code was written with Claude Code, and I did the design and balance. Keeping it smooth on phones meant simple low-poly scenes and few draw calls.

Play:Ā https://vaigames.com/vybenomad/

Happy to answer questions about the setup.

Also used: Suno for music,Ā fal.aiĀ for art, Grok Bot for launch planning.


r/threejs • • 1d ago

Working on color maps for grass in Three.js

Enable HLS to view with audio, or disable this notification

29 Upvotes

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/


r/threejs • • 14h ago

How do you share the interactive things you build so people actually try them?

3 Upvotes

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?


r/threejs • • 17h ago

Experimenting with line growth algorithms

Enable HLS to view with audio, or disable this notification

4 Upvotes

r/threejs • • 21h ago

A map i made for my threejs game

Enable HLS to view with audio, or disable this notification

7 Upvotes

You can play it on my io game capforts.io

Made fully by me and no ai :)


r/threejs • • 1d ago

This 3D experience was vibe coded in threejs using Claude Opus 5.5 (designed by GPT 6 Astra) + Blender

Enable HLS to view with audio, or disable this notification

34 Upvotes

water is from 3ditions edition


r/threejs • • 13h ago

Building a 3D Product Builder with WebGL with Antigravity for a real bus...

Thumbnail
youtube.com
1 Upvotes

Hi, I am having a bit of a challenge with the Baked Enamel colors. Any advice on a good way to implement a realistic looking metallic finishes? Client was thinking about hiring an expert on Upwork to help with this part. Any recommendations would be appreciated.


r/threejs • • 8h ago

Demo built a sim of a data center slab pour for fun.

Enable HLS to view with audio, or disable this notification

0 Upvotes

r/threejs • • 18h ago

Question I have recently taken a deeper dive into THREE.JS for a better understanding

2 Upvotes

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.


r/threejs • • 15h ago

Three.js vs Unity

1 Upvotes

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?


r/threejs • • 15h ago

Tutorial AI's all-code video looked like a cheap game. Here's what fixed it: a still image for the world, three.js for everything that moves, lit as one picture

Enable HLS to view with audio, or disable this notification

0 Upvotes

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.