r/threejs • • Aug 26 '26

We made a video about how World of ClaudeCraft happened. Weekend AI experiment in June to a three.js MMORPG shipping every couple of days

3 Upvotes

Hey r/threejs. We put together a video on how WoC came to be, so here's the technical side to go with it for this crowd.

The whole thing is open source under MIT, around 2.2k stars, over 500 forks and 60+ contributors: github.com/levy-street/world-of-claudecraft

Some of the three.js problems we've had to solve that might interest people here:

  • Chunk streaming replaced all-at-once world residency so a full continent loads progressively in the browser

  • Far-field sprite impostors for distant geometry, which let us remove distance fog entirely

  • A deterministic character physics engine shared by the sim, server, and client predictor, so props collide identically everywhere

  • All 296 ability VFX are authored and rendered live in three.js, no pre-rendered effects anywhere

  • Procedurally generated dungeons built from a seed at runtime

  • Mob models kept around 5,000 polys so everything stays performant in a browser tab

One community contributor built an entire town using img2threejs, reconstructing reference images as code-only procedural three.js models rather than meshes, which was a fun pipeline to watch work.

It runs in the browser at worldofclaudecraft.com, with desktop and mobile apps if you prefer. If you want to get amongst it, the Discord is where the community and dev chat lives: discord.gg/worldofclaudecraft


r/threejs • • Oct 16 '26

Demo Made a 4-player co-op zombies game that runs in your browser, built with Claude

16 Upvotes

grew up playing bo2 and bo3 zombies with my friends and always wanted to make my own. so i did with claude

its free, runs in your browser on pc or phone, no download. solo or up to 4 players, and quick play matches you with randoms.

put it out a few days ago and a few hundred people have played. two strangers who found each other through quick play made it to round 25 together in a 60 minute game which really made my week.

Want to know what you like and what you'd change. and if anyone wants to help build it out more, send me a dm :)

https://deadhertz.com/?ref=threejs


r/threejs • • Sep 27 '26

I finally designed my dream luxury watch — as a real-time Three.js / 3D web experience. Can you tell it's not a video? Critique welcome

0 Upvotes

Just done! I've wanted to design my own luxury watch for years — but I'm not a watchmaker. So I built my dream watch as a real-time 3D web experience instead: "AEVUM"

It's a real Three.js / WebGL model you can orbit, and scrolling scrubs a reveal of the case, dial and movement. Kept it to 60fps — DPR capped, single rAF loop, Draco/KTX2, lazy-init scene. Getting to shape every detail (hands, moonphase, finish) myself was ridiculously satisfying.

Two things I'd love feedback on:

  1. Does the reveal read as real-time 3D, or still a bit video-ish?

  2. What would you change — pacing, camera, lighting, the scroll interaction?

It lives on my own project, AETumi — happy to share how any part works.


r/threejs • • Oct 16 '26

Demo I spent $1400 to build My PermaDeath ARPG with AI & Three.js and now have over 17.000 players

8 Upvotes

A month ago, Aestra: The Last Wish was just the game I wanted to play. I had no idea how to code, but I started building it anyway.

Today, over 17,000 people have played it. And while that number is wild to me, what really gets me is opening the game and seeing the minimap full of players.

People trading in the main city, dueling, finding groups and heading out to do content together. Seeing people actually spend time in this world, meet each other and come back to play more… it’s hard to describe how good that feels.

For anyone who missed my first post, Aestra is a real-time pixel action RPG with permadeath. You pick a class, quest, find gear, explore dungeons and take on raids. And then you get a little too confident, die, and start getting attached to a new character.

The first version cost me around $100 to build over a weekend. The build was Tesana & Three.js Since then, I’ve spent about $1,400 in total expanding it, with 9 classes, levels 1–100, talent trees, professions, world bosses and raids over the course of around 3-4 weeks.

I still have a list of probably 50 things I want to add. But seeing the game alive like this is already something I never really imagined. To everyone who’s played, shared feedback, brought a friend or lost a character to permadeath: thank you ❤️

If you’ve played, I’d love to hear your favorite moment so far. Or the story of how you lost your best character :)

Play Aestra free in your browser or on mobile


r/threejs • • Sep 29 '26

I built a 4WD simulator. Nobody asked me to.

0 Upvotes

I run DownThunder, an Australian 4WD community. Well, with fuel prices going up faster than I can air down, trip weekends are off the table for many. Well, let's jus say I decided to recreate some of that experience (driving through the Australian outback) in a web browser. In my spare time. Which I don't have.

So now there's a Mod Simulator. You build a rig, bolt far too much onto it, and drive it somewhere it has no business being. Like real life, but you don't have to explain the bill to anyone.

What it does. Some of it even on purpose:
• From rainforest to the Simpson Desert, scenes are generated as you drive, because I couldn't be bothered building them by hand
• Mods with consequences: add a bullbar and winch, the nose sags. Much like my posture after a week of this
• 2H, 4H, 4L, lockers, tyre pressures. Forget to air down in soft sand and it digs itself in. Very realistic. Very humbling
• Rain, night driving and headlights that actually work. Unlike some of my earlier builds
• Other 4WDs on the beach, with Doppler engine sound. I spent far too long on that. Nobody will notice. And if you've noticed now. DANKESCHÖN.

What I got learned

  1. "Realistic" is whatever a 4WD owner doesn't complain about. I'm still waiting on the verdict here.

  2. Every bug report starts with "that wouldn't happen in real life". They're usually right. It's exhausting.

  3. Physics doesn't care how much you spent on your build. Neither does the sand.

  4. Car modelling is hard and I think it shows.

  5. Claude (the LLM, not my french neighbour) has helped me with most of the driving phyics and connecting it to my vehicle database.

What's next? Hmm, I could need some help with some realistic grass for the Victorian High Country scene und much more realistic water. Also the cars look ... well, I want to spend more time on modelling them so any critique on that is fair go. :)

https://www.downthunder.com.au/mod-simulator

P.S.: Oh, also try out TrailDays (top menu on DownThunder), it's using the same data and your real vehicle but in an actual game.


r/threejs • • 27d ago

I built an animated 3D island with Claude Code and the img2threejs skill. Full workflow inside.

3 Upvotes

I kept seeing great 3D motion pieces online and wanted to know how people build them. Reading about the process was not enough, so I started building. I made mistakes, fixed them, and kept trying. This is the result.

Here is the scene. Day and night modes, ocean shaders, a campfire, a boat, and a slow orbit camera.

Live demo: https://motion-demos-smoky.vercel.app/#/tropical-island

Tech stack

  • Three.js, TypeScript, Vite

  • GLTFLoader with Meshopt compression

  • Headless Blender for texture baking

  • gltf-transform for mesh simplification

  • Vitest and pnpm

Workflow

  • I started with one reference image and a prop sheet, with each object on a plain background.

  • Claude Code built the small props (palms, rocks, boat, dock, campfire) with the img2threejs skill. Each prop passed gated steps and got a score.

  • I made the cabin and the terrain outside Claude Code with image-to-3D tools. Their detail beats meshes built from code.

  • The raw exports had about 1.5M triangles each. I simplified the cabin to 24k triangles (1.2 MB) and the terrain to 16.4k (0.76 MB).

  • I baked a fresh normal map in Blender after simplifying. Reusing the old one left streaks on the roof.

  • Claude Code placed every prop against the terrain mesh, so rocks and palms sit on the ground.

  • Final scene: about 88k triangles and 28 to 30 draw calls.

Motion

  • Stylized ocean with waves, foam and glints

  • The boat bobs on the same wave function as the water

  • Campfire flame, chimney smoke, wind in palms and grass

  • Night mode adds stars, fireflies and glowing cabin windows

  • Every animation loops on a 24 second cycle, so you see no jump

Controls

  • Auto-rotating orbit camera

  • Drag to orbit

  • Click the scene, then scroll to zoom

  • Day and Night toggle button

Review loop
A fresh reviewer scored each iteration. The pass mark was 8.8 out of 10. The first round took five iterations to pass.

Credit
Thanks to the img2threejs project for the skill and the tropical island showcase I used as a reference.


r/threejs • • Sep 07 '26

Masjid al-Haram crowd & Tawaf simulation with Three.js

13 Upvotes

Built this as an experiment in real-time crowd simulation with Three.js.

It includes:

  • Tawaf around the Kaaba

  • people entering/leaving through gates

  • density-aware movement

  • transition into curved prayer rows

  • up to 5,000 active agents in the browser

Live demo:
https://alzin.github.io/The-Great-Mosque-of-Mecca-Masjid-al-Haram

GitHub:
https://github.com/alzin/The-Great-Mosque-of-Mecca-Masjid-al-Haram

Would love any feedback!!


r/threejs • • Sep 30 '26

Made a zeppelin ride through 1939 New York in three.js. No 3D models, all the geometry is built in code

4 Upvotes

So this started as a hobby thing and got a bit out of hand ;)

You fly a zeppelin through a dieselpunk New York, basically the future the way people pictured it in 1939. Scroll to fly. Along the way there are six rooms you can step into. In one you pull a lever and a model city lights up, in another you turn on a tap, and there's a coffee bar where you can pour a coffee.

Try it here: https://futureinthepast.com

How it's made, for those who care:

  • plain three.js in Next.js, no R3F

  • no models at all. Not a single .glb in the project. City, zeppelin, rooms, it's all built in code. Mostly lathe and extrude geometry that gets merged, and InstancedMesh for the stuff there's a lot of

  • a lot of the textures are just drawn on a canvas at runtime (CanvasTexture)

  • glow is UnrealBloomPass plus a few custom shaders

  • the music isn't a track. It's played live in the browser with Web Audio, note by note, using a small set of recorded instrument notes (muted trumpet, clarinet, piano and so on). During the flight it follows how far you've scrolled, and every room has its own tune.

Built it with Claude Code, so there's probably stuff in there that people with real three.js experience would do differently. Happy to hear it.

Also curious how it runs for you, especially on a phone.


r/threejs • • Oct 10 '26

Demo I made a full music video in three.js, every frame is a function of song time

36 Upvotes

The song is "I'm Upping My P(doom)" (not mine, credits at the bottom). The video is 2:36 and it's all TypeScript + three.js, no After Effects or editor anywhere.

Since every frame is a pure function of t, the preview in the browser and the final render are exactly the same frames. To export, a script steps headless Chromium through the song and averages up to 108 sub-frames per frame for motion blur, then ffmpeg encodes it.

The art is AI-generated stills. To get camera moves out of flat paintings, each one gets a depth map (Depth Anything V2) and is split into 4 depth layers with the hidden parts inpainted, so the camera can move into the painting a bit before it falls apart. Rule I ended up with: rotation and zoom are free, translation is expensive, keep it to a few percent of the subject distance.

All the type is set in code and the lyrics are timed word by word. The code was built with Claude Code, and the stills were generated with Codex image generation.

Song: lyrics by osmarks and MusicPerson (started on the EleutherAI Discord), this is the "Claude-Pop" Suno version that deckard posted.

4K on YouTube: https://www.youtube.com/watch?v=tfQ1hU448K4


r/threejs • • Aug 27 '26

Demo Three.js + Claude Code is my new favourite way to make content

42 Upvotes

r/threejs • • Aug 24 '26

My first project on threejs!!

0 Upvotes

Spent so much time getting the aesthetic right on this one.


r/threejs • • Oct 10 '26

Port-centric bulk handling vessel to shore process brought to life with Opus 5.5 and ThreeJS

0 Upvotes

I've spent a fair bit of time around bulk terminals and after seeing all the examples of how people were applying threejs, and what was now possible with Opus 5.5, I took that experience of port-centric digital transformation and brought to life with this simulation.

Vessel

The sim vessel is carrying a manifested 3,800 t of bulk aggregate. Discharge counts down per grab so at any point you can see what's landed and what's still on board.

Crane

Every grab is weighed on the crane. Around 4 t a scoop, six grabs to a truck, so roughly 24 t a load. Each grab is logged against the hold it came from and the truck it went into, so the truck turns up at the weighbridge with a tally already attached.

Weighbridge

Unattended. ANPR reads the plate, the stored tare is applied, and you get gross, net and a ticket in a few seconds. A loaded truck crosses at about 42 t gross against a 44 t max, and anything over gets flagged before it leaves the quay.

Variance

Every load, the weighbridge net is checked against the crane tally. On the load in the video the crane said 24.06 t and the weighbridge said 23.89 t, so 0.18 t gets posted against the discharge figure there and then. Across the vessel it runs at around 0.7%. Two independent weights on every load means drift shows up in hours: a crane scale needing calibration, spillage, whatever the reason it can be investigated and factored in.

Storage

A camera logs each truck in and out of the warehouse, and stock is booked in at the weighbridge figure, not an estimate. So the stock number and the ticket number are the same number.

Fleet

Three trucks in the sim. Every trip is timed: load, haul, weighbridge, tip, back to the berth. Turnaround is around 16 minutes, and about 3 of those are spent queuing at the crane. Per driver you can see who's quick and who's waiting, and where the minutes actually go.

Discharge rate and completion

This is the one people ask about most. Ton per hour, live and rolling, against the rate you'd expect for that commodity and that crane. In the sim it's running at 268 t/h against a plan of 250. From the rate it works out tonnes left, loads left and an ETA. Here that's vessel complete at 20:15, 56 minutes ahead of plan. If the rate drops, the ETA moves straight away, so the berth plan and the next ship aren't working off guesswork.

Profitability?

Crane, trucks, loader, operator, drivers and foreman come to about £569 an hour. Against a £3.60/t handling tariff, that gives a break-even of about 158 t/h. At 268 t/h the cost is about £2.16/t, so roughly £1.44/t margin, or about £5.5k across a 3,800 t vessel. Drop to 160 t/h and that margin has basically gone. You want to know that while the ship is still alongside, not a week after it sails.

More of a write up on my https://x.com/SmithyGrams/status/2108916736850350436


r/threejs • • 3d ago

I asked Claude Fable 5.2 to make a COD zombies inspired game with three.js

4 Upvotes

One HTML file, about 55k lines of code. It was built in about 14 hours by Claude Fable 5.2, prompted by me. I used about 120% weekly fable limit on the build so far. It used Sonnet 5.5 and Opus 5.5 for sub processes as needed.

Play here: https://zombies.ethanplus.ai/

Repo: https://github.com/ethanplusai/zombies


r/threejs • • Aug 19 '26

Built a really cool threejs website - interactive + their eyes follow the mouse pointer

20 Upvotes

r/threejs • • 28d ago

Current situation

Post image
197 Upvotes

r/threejs • • Aug 16 '26

Help 18 and new to Three.js. How do people actually reach Awwwards-level 3D websites?

0 Upvotes

Hey guys, I’m 18 and fairly new to web development/3D web design.

I keep seeing amazing websites on Awwwards and Mobbin with interactive 3D heroes, smooth scroll animations, lighting, particles, objects reacting to the mouse etc. I understand what I’m looking at visually, but when I actually try making something similar, mine still feels very basic or gimmicky.

I use Claude and ChatGPT to help me code because my coding knowledge is still limited, but I want to actually understand the proper workflow instead of depending on AI for everything. For people who build high-quality Three.js websites, how did you learn to reach that level?

Do you normally:

  • model everything in Blender first?

  • use Three.js directly or React Three Fiber?

  • use GSAP for scroll/motion?

  • learn shaders/GLSL?

  • use post-processing for the polished look?

  • recreate Awwwards sites as practice?

I’m especially confused about how you go from “I can put a 3D model on a webpage” to something that actually feels professionally art-directed. If you were starting again at my level, what would you learn first and in what order?

Any advice/resources would genuinely help.


r/threejs • • Aug 22 '26

Demo Game i'm vibecoding at the moment

0 Upvotes

Heya all,

wanted to introduce my game i'm working on, vibe coded and built on threejs.

initially built with fable 5 using a gauntlet loop and then optimized heavily afterwards using opus on high as it's dirt cheap

main focus for the phase it's at is getting the graphics, performance and game mechanics to be roughly where i need them before putting in things like quests, more monsters, dungeons and full loot tables

let me know what you think :)


r/threejs • • Aug 25 '24

Can anyone help me out

4 Upvotes

How to add this type of background in the website?


r/threejs • • Jul 28 '26

Made this with opus 5 + Gpt 5.6 sol medium - took 3 hours - about 7% weekly limit consumed for opus

0 Upvotes

Planning to add cafe, kabuki theatre and cyberpunk night mode and lofi station next


r/threejs • • 15d ago

Demo Spent 2 weeks and built this little game on three.js.

24 Upvotes

Built this game. Spent 2 weeks. But now my AI quota is exhausted so although not complete I deployed it.

It was a fun concept I always had, village sim where I create the village and then get to roam around that village as a player. Sounds super fun. And I did not know that reaching this level of graphics is possible for a browser game.

I am not a game dev and I'm not pretending to be a master coder, I just had a fun idea a tried it and created something beautiful.

Spent the last 1 week improving the logic systems, reality engine, self building village system, villagers with actual awareness. They remember what you do, gossip about it, vote for a mayor, and if the village is missing a hospital and nobody builds it, they pool their money and build it themselves. Also fixed the 3D models as previously I was using coded models, fixed the seasons, festivals.

I always liked the Rockfellar center Christmas tree tradition but I could never visit so I made my own Rockfellar center inspired Christmas logic in this game as well. Lol. A helicopter scouts for the tree, a crane cuts it down, it gets driven into town on a truck with a police escort, they put up the lights, and there’s a lighting ceremony on the night. There’s also New Year, Easter and Diwali. I just added whatever I liked and it did not turn out so bad. I’m happy.

You can drive, work jobs (firefighter, taxi, pilot, farmer and more), talk to villagers, get chased by the police, and take a train or plane to other cities.

As I'm over my AI quota and do not have more money to buy Claude anymore so decided to deploy it. It's not unplayable but it's not 100% polished, some things are janky, and it’s single player only. More like 60%. Villager chat runs on a free AI tier, so when it hits the limit they fall back to basic lines. If your graphics card runs out of memory it reloads with lighter graphics and your village is saved.

Attached a little gameplay. Just sharing as I'm a little happy today. Haha.


r/threejs • • Mar 15 '22

[Hiring] Three.js Landing Page

0 Upvotes

I hope you are doing well. I am CTO of VieFAM which is a company that develops farm tech solutions for Asian countries. We are looking for a partner to bring our idea to the fancy landing page. It will help our customers can easily understand how the process works by using interactive website techniques. Plantverse is the project we are working on, it will help to conserve the orchid biodiversity in South East Asia by providing the following features

  • Farmers will provide their orchids data to our platform via minting the NFTs

  • Our council (experts in Orchid Biodiversity) will audit the data

  • We can create the 3D model of the orchid and display it on the Plantverse

As the result, we are going to build the landing page with the following ideas

  • There is a map that contains many lands (grass or desert)

  • There are plants on each land

  • The plant is clickable and shows information about the plants: name, source, length, cm, Keiki, node, and video of the flower

f you are interested in the project, please reply DM.


r/threejs • • 12d ago

made an mmo fps using threejs

0 Upvotes

Been seeing a lot of cool stuff done with threejs and wanted to try it myself. Came up with an mmo idea combining concepts from some of my favourite games and got a little too into it. Claude code definitely made the developing process a lot easier.

Check it out here, it is free and runs on the browser: https://isle-of-heroes-production.up.railway.app/

Love seeing how others are building there dream projects.


r/threejs • • May 02 '24

Tutorial The spread operator for props {...props} allows you to pass all props at once.

Post image
0 Upvotes

r/threejs • • Jul 08 '21

NFT made with Three.js

Thumbnail hicetnunc.xyz
2 Upvotes