r/threejs • • 1h ago

voxel god game in the browser where you catch catapult stones and throw them back: claude + three.js

Enable HLS to view with audio, or disable this notification

• Upvotes

made a small god game on a voxel island. you pull trees and rocks out of the ground, help a village grow, and fight off raiders who come in by ship. the last wave brings catapults, and you can catch their stones mid-air and send them back. the island is procedurally generated, and the sound and music are synthesized in code.

would love feedback, especially on how throwing feels with a mouse, trackpad or phone.

game link: https://capitanuncino.itch.io/handvoll


r/threejs • • 2h ago

Demo I made a browser toy where particles, liquids and light react to your mouse, touch or hands (three.js + WebGL2)

Enable HLS to view with audio, or disable this notification

1 Upvotes

Each scene is custom GLSL (noise/fBm) in three.js r186, with live Web Audio synthesis and optional hand tracking in a Web Worker. Sound is off by default and the video has none. Happy to answer questions about how any of it works.


r/threejs • • 2h ago

Koi pond from 2.5 to 3D interactive Zen Garden

1 Upvotes

Almost I tell A.I work follow my instructor and finally I get my best scene.

https://reddit.com/link/1x7am27/video/02cg43gwgsvh1/player


r/threejs • • 2h ago

Link A Live Viewer for URDF Files for Robot 3D Modelers

Enable HLS to view with audio, or disable this notification

1 Upvotes

https://armor.dc-engineer.com/gallery/

I have been using Three.js as a thumbnail generator for a few months in my AR Mobile Robotics gallery. This is a site where I link back to vendor repositories for Universal Robotic Description Format (URDF) files for real-world robots. Think industrial arms, quadrupeds (dogs), wheeled robots, and humanoids, from companies like Unitree, Boston Dynamics, ABB, and indies.

The latest is taking that thumbnail generator, and turning it into a live preview that you can use to view them right in your browser, with orbit, zoom, and environmental lighting and textures.

URDF itself is an industry format, used by engineers as part of simulation and control design, like in the Robot Operating System. If you’re a 3D designer, think of it like a text file that references a folder of other mesh files in standard OBJ, DAE, STL, or other formats, along with their transforms, and other engineering details. If you want to take a URDF, and render it in an artistic setting, it can be a bit challenging, but the JavaScript community has provided a number of URDF unpacking tools that make these Three.js scenes possible.


r/threejs • • 5h ago

Article Made this complete 3D Android game in three.js

Enable HLS to view with audio, or disable this notification

0 Upvotes

It's a cozy merge puzzle: drop buildings on a floating island, three alike merge into the next one up(kind of candy crush vibe), and a tiny city slowly grows. 14 worlds, each with its own sky, fog, particles and music.

No game engine, it only uses three.js running inside React Native:

- react-three-fiber + expo-gl on Expo, three r185

- The sky is a gradient DataTexture, since there's no DOM canvas on native

- Height fog so the bottom of the island melts into a sea of clouds

- Petals, leaves and fireflies are instanced meshes

- The splash screen shows baked frames of each world instead of live 3D tiles, way cheaper on a phone

- Biggest gotcha: setState fired from timers landed late behind the render loop on the phone. Moving the time-critical UI to useSyncExternalStore fixed it

It's free on Android if you want to see how it runs on your phone (link in the comments).

Anyone else shipping r3f on mobile? Curious what tripped you up.


r/threejs • • 5h ago

No Install, No Tutorial — I Clicked a Few Times and Got a Full Duct with a Rain Cap

1 Upvotes

I built a CAD design prototype for chimneys and ventilation ducts, positioned as an alternative to Ventbom, with a simpler workflow.

The core idea is Web3D-based duct design: pick spatial points on a 3D grid, the path connects automatically in creation order, then one click turns it into a pipe with straight runs and elbows. The rain cap is parametric too — as long as the last segment is vertical and longer than 0, it generates a cone, four struts, and a clamp at the end point, with the base diameter automatically set to 1.5x the pipe diameter.

A few things I find genuinely useful:

  • Continuous picking: hold Shift to show a lat/long sphere, click the surface to add the next point, release to hide
  • Manual angles: Shift + F opens an angle panel, horizontal and elevation angles can be typed precisely, with a yellow sphere previewing in real time
  • Edit segment length: click a segment row in the left table, type a new length and press Enter — direction stays fixed, the end point and all following points shift together, and subsequent lengths and angles stay unchanged
  • Unit switching: m / dm / cm / mm share one selector, it only changes the unit label, no value conversion
  • Bilingual UI: one click in the top right switches interface, hints, and dialogs, with scene data untouched

Try it here: https://demo.meteor3d.cn/应用-通风管道.html

Next step is fast quoting: build back-end data management on top of this prototype, structure parameters like pipe diameter, length, elbow angles, and rain cap specs, then generate a quote in one click. If you work with HVAC, chimneys, or ventilation ducts, I'd love to hear how your quoting process works and whether this direction would help.


r/threejs • • 5h ago

I got nothing to post or build today yall. Can I just say I love this community instead???

0 Upvotes

r/threejs • • 6h ago

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

Enable HLS to view with audio, or disable this notification

1 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 • • 6h ago

Looks like I'm getting somewhere :)

Thumbnail
gallery
1 Upvotes

After breaking up with my girlfriend, I’d say I fell into a pretty dark place. During that time, I had the opportunity to explore Three.js more deeply, and honestly, these libraries feel like a bunch of unexplored caves waiting to be discovered. I managed to put together a small system using a handful of tools, and even though it might not seem like much, I’m genuinely proud of what I’ve achieved.

I’ve found that I can often build things with Three.js in a day or two that might take a month or two to put together in a traditional game engine, and without even putting in that much effort.

I’m still heavily influenced by Resident Evil Village. You might not believe this coming from someone who barely plays anything other than CS, but I’ve finished the game around 9–10 times. I even occasionally try speedrunning it. :)

The screenshots you’re seeing are from a game I put together over two days, spending around two hours a day on it. And I haven’t even pushed the post-processing very hard yet. I genuinely believe I could achieve some seriously impressive results if I pushed it further.

I’m planning to release the game here as an open-source project in a few days. Once you get a chance to look through it, I think you’ll understand what I mean.


r/threejs • • 6h ago

Working On A New Three.js Multiplayer Predictive Interpolation System

Enable HLS to view with audio, or disable this notification

1 Upvotes

r/threejs • • 6h ago

Demo Clayground: a browser clay sculpting studio using Three.js and a worker-owned volume

Enable HLS to view with audio, or disable this notification

1 Upvotes

I’m the maker of Clayground. This is a short edited demo of the browser studio, starting with a sphere and building a small character with brushes, paint and animation.

Three.js renders the surface mesh; a worker owns the signed-distance volume and rebuilds the geometry as the clay changes. The sculpting input also keeps a snapshot of the visible surfaces for each stroke, so newly added clay doesn’t change where the next dab in that same stroke lands. Move and Hook use a camera-facing plane through the initial point.

You can try the studio with a mouse, pen or touch, with no account: https://www.clayvr.com/sculpt

I’d appreciate feedback on interaction responsiveness, especially while adding or smoothing clay. If you hit a slowdown, the device/browser and the brush you were using would be useful.


r/threejs • • 9h ago

What if you can #race on #mars

Enable HLS to view with audio, or disable this notification

2 Upvotes

r/threejs • • 12h ago

Link Platform for Learning Computer Graphics

Post image
3 Upvotes

r/threejs • • 13h ago

Reefborn - I built a multiplayer reef in three.js

Enable HLS to view with audio, or disable this notification

2 Upvotes

Been building Reefborn, a little multiplayer reef where you start tiny and eat your way up. Just added a deep-sea trench with lava, glowing critters and a giant squid.

Free in the browser: https://reefborn.app/?ref=threejs

Happy to chat about how any of it works.


r/threejs • • 13h ago

Three.js games in a phone feed, and the library doesn't count against your file size

Enable HLS to view with audio, or disable this notification

1 Upvotes

We run a swipe feed of small mobile games, and a lot of them are Three.js. Each game is one HTML file. Three loads from our shared mirror at an exact version, so a phone downloads it once and every game after that is just your code. Your 5 MB stays yours.

Players get it inside a native app on Android (iPhone beta), with leaderboards and replays wired up for you.

Looking for Three.js devs who've got small games sitting around. Non-exclusive, you keep everything. Ask me anything about the runtime.

https://deadsimple.games/go/reddit?c=threejs


r/threejs • • 15h ago

Demo Turned a single photo of a teapot into a procedural Three.js model (code-only, no CAD) - and two silent bugs nearly broke it

1 Upvotes

I fed one photo into an image-to-Three.js pipeline and it wrote the model out as code - lathe geometries whose profile points are the measured silhouette of the object in the photo.

The interesting part was debugging two generator bugs that were both completely silent:

  1. transform.scale: [1,1,1] in the starter spec returns early and overrides every part's dimensions, so every component renders at unit size. The spec still validates fine; nothing warns you.

  2. transform.position is parent-LOCAL. The generator adds the child to its parent node and then sets the position, so authoring world coordinates double-counts every ancestor offset and parts float visibly apart (knob hovering above the lid, etc).

Fixing both moved the silhouette IoU against the reference photo from 0.25 to 0.80. The final render is 6 nodes, 6,560 triangles, 15 of 15 textures loaded.

Write-up plus the full run: https://youtu.be/U0Y9hEnyJN8

For people authoring parametric or photo-derived geometry in three - do you hand-build lathes and extrudes like this, or do you bridge from a CAD/STEP tool?


r/threejs • • 16h ago

Here is gorgeous lake and a boat in threejs - show me yours

Enable HLS to view with audio, or disable this notification

31 Upvotes

I see a lot of “oh it’s easy to make” comments from people/bots who post cat videos - so here is a challenge / post your threejs creation with or without ai…

If you have opinions on albedo is wrong - then just show what you have made 😂 coz ai is fun and threejs is even more fun!


r/threejs • • 16h ago

Demo I made a procedural diorama in a glass case — day/night, seasons, weather, fish and a village with a generated chronicle (open source engine)

Enable HLS to view with audio, or disable this notification

3 Upvotes

Solo dev here. This started as a desk toy: a glass case with a little world inside that keeps its own time.

Everything — terrain, trees, grass, fish, textures and sound — is generated in code at runtime; there are no asset files for the world itself.

A few technical notes: the scene renders into a half-float MSAA target, then GTAO → bloom → tilt-shift → one final grade/tone-map pass. Only the scene pass uses MSAA, which keeps memory sane on Retina screens. The village simulation feeds a storylet engine that writes a chronicle from what actually happened.

It's a free browser demo (the Kingdom world), and the engine is MIT on GitHub. Performance on integrated GPUs is my biggest open problem — it starts at roughly 1 MP and scales resolution up or down from measured frame time. Feedback very welcome, especially on that.

Demo: https://diorama.goodthing.app/?utm_source=reddit&utm_medium=social&utm_campaign=launch-2026-10&utm_content=glass-diorama

Code: https://github.com/SanLin-He/glass-diorama-open


r/threejs • • 17h ago

Burno Simon

0 Upvotes

I have been taking Bruno Simon's course. Now I'm in the Shaders section and he still didn't explain everything he promised to talk about later, so should I trust him and continue, or should I go to the docs or anything like that and start teaching myself?


r/threejs • • 17h ago

Demo race your friends through a real SF in the browser (three.js + WebGPU)

Enable HLS to view with audio, or disable this notification

20 Upvotes

been working on this for the last few days, and it finally has multiplayer. streets are from openstreetmap, city’s procedural, models are blender + AI-generated

still rough in places, so any feedback is super appreciated

game link: teleoperator.mindblown.ai


r/threejs • • 19h ago

Demo Escher’s ants in WebXR

Enable HLS to view with audio, or disable this notification

81 Upvotes

Just a fun recreation of M. C. Escher’s famous Möbius Strip II (1963), built as a small procedural locomotion study. The ants’ movements are driven by IK and based on Cruse’s classic gait rules. You can grab the ants and throw them away, but they’ll always find their way back to the Möbius strip.
Use a two-hand pinch gesture to open a portal and explore their kinematics up close (0:12).
Works in both VR and AR; tested on Quest, Vision Pro, and Snap Spectacles.

Link: escher-ants.vercel.app


r/threejs • • 19h ago

Tutorial Scroll-driven 3D gallery with Three.js: images ride a helix, ScrollTrigger scrubs the travel, headline splits around the ribbon

Enable HLS to view with audio, or disable this notification

5 Upvotes

Built this for a portfolio and the technique is simpler than it looks:

- Each image is a textured plane placed along a helix and rotated to the curve's tangent, so it banks through the bend on its own

- GSAP ScrollTrigger scrubs the strip's position along the curve. Stop scrolling and it holds exactly where you left it

- Lenis smooths the wheel input first, which is what turns steps into a glide

- The oversized headline is two halves drifting in opposite directions, so it parts around the ribbon and lines up again at rest

- Images upload to the GPU once as textures, so a long strip is cheaper than the same number of DOM nodes

React + TypeScript, three.js and GSAP only. Live demo in the first comment. Ask me anything about the curve setup.


r/threejs • • 19h ago

Demo We brought three.js back after a Rust/wgpu port. Loot Hole is now live in the browser.

Enable HLS to view with audio, or disable this notification

4 Upvotes

The attached trailer was captured in the native wgpu build. The playable browser version uses three.js rendering over the shared Rust core.

Loot Hole is now playable on Playgama: https://playgama.ai/play/kw6t5foxgs

I'm the developer. It's a first-person digging game: uncover buried objects, sell your finds, upgrade your equipment, and reach deeper layers.

The interesting part for this community is that we came back to three.js after doing the Rust/wgpu work. We started with Babylon Lite/WebGPU, moved to three.js/WebGL 2, then built shared Rust gameplay and native wgpu hosts. The browser now uses the Rust core through WASM, with three.js and DOM presentation.

The web launch path has a compressed-byte budget below 1,000,000 bytes. That's the startup path, not the entire game. We trim three.js at build time, stream models that aren't needed at the start, and compile shared Slang shader functions to GLSL for the web and SPIR-V for native.

Real-phone tests on a Galaxy A40 helped make the decision. Keeping Rust gameplay didn't require shipping the native renderer to every browser.

I'd be interested in hearing how other people split shared game logic from browser presentation, especially when startup size is a hard limit.

AI disclosure: AI was used for coding, image generation, and translations. Music and sound effects were mostly made without AI.


r/threejs • • 19h ago

Liquid metal hero with Three.js — a chrome blob that reflects a studio of 6 colored lights, follows the cursor, no textures (free source + write-up)

1 Upvotes

Been obsessed with the chrome/liquid-metal look on award sites for a while, so I built one from scratch and wrote up how it works.

What's going on:

- One sphere with a vertex shader that deforms it with layered noise (big slow lobes + sharper ridges), so it reads as liquid, not a wobbling ball

- No HDRI or textures. The reflections come from a procedural "studio" in the fragment shader: six colored lights with soft falloff, so recoloring the whole thing is just six values

- Fresnel edge + a glass blur pass on top so it sits in the page instead of floating over it

- Cursor pulls the blob slightly, with lag, so it feels heavy

- Reduced-motion respected, ResizeObserver so it works in any container

It's React + TypeScript (useEffect engine, no R3F), but the shader is the interesting part and ports anywhere.

Full source is free, and the write-up walks through the shader top to bottom. Links in the first comment.

Happy to answer anything about the noise setup or the lighting trick.


r/threejs • • 19h ago

Portfolio Site

Enable HLS to view with audio, or disable this notification

3 Upvotes

After a lot of work, experimentation, and some very early mornings, my new portfolio is live.

This was an opportunity to step away from client work, explore new directions, push the boundaries of what’s possible with technology.

https://www.sztanki.com/

#webgpu #threejs #glsl #tsl #creativecoding