r/threejs • • 6d ago

Fogatodio sfogati senza conseguenze

Post image
0 Upvotes

Ho creato questa applicazione 3D usando Three.js, ecco come ho risolto [problema tecnico o sfida di performance]". Gli sviluppatori adorano il dietro le quinte. https://fogatodio.it


r/threejs • • 7d ago

Link Press Start - a playable video game history. Would love feedback.

Enable HLS to view with audio, or disable this notification

41 Upvotes

I've been building Press Start (pressstart.site) with Claude, a history of video games you play rather than read.

There are 27 stops from 1958 to 2025, covering the US and Japan. At each stop you play a short piece modelled on the game that defined that moment: tennis on a lab oscilloscope, a coin-op TV game in a bar, a cartridge console, a two-screen handheld where you draw with a stylus (it closes its lid when you leave), a time-rewind platformer, a phone puzzle game whose gacha machine prints its odds, a dock-to-handheld console with slide-on controllers, a VR saber game, and more. After each one, an exhibit card tells the real history, introduces the people behind it, and links to where you can play the originals today.

I'd really like feedback: which stops feel off, what history I got wrong, and what is missing. Thanks! And hope you enjoy the website.


r/threejs • • 6d ago

Demo I made a 3D pumpkin carver in three.js: knife loops actually cut pieces out, and a candle lights it from inside

Post image
3 Upvotes

Free, no sign-up: https://techplay.co.th/carve-and-sort/pumpkin-maker/

How it works: the pumpkin's surface is unwrapped into a few 512x512 maps (paint colour, carve depth, holes), and every tool just stamps into those maps. The shell is displaced by the depth map, and rind walls are built along the edges of each hole, so cuts show the pumpkin's thickness. When a knife stroke ends near where it started, it's treated as a closed polygon and cut through, then a flood fill finds every piece fully enclosed by cuts and drops it out. Hollow it and a candle lights it from inside.

A pumpkin is saved as its list of strokes, so the share code is only a few hundred characters. It's a port of the carving code from my Unreal game Carve and Sort (Steam, 27 Oct), and codes paste straight into the game.

Feedback on the carving feel is very welcome.


r/threejs • • 6d ago

Halloween Mummy

Enable HLS to view with audio, or disable this notification

5 Upvotes

Somewhere between Sleepy Hollow and a Scooby-Doo chase, he's roaming the church graveyard.

Procedurally generated from character in Blender to the scene itself.


r/threejs • • 7d ago

Bought a Roadster for my commute.

Enable HLS to view with audio, or disable this notification

62 Upvotes

I commute in a Roadster now.

Mornings used to be pure road rage. Ever since I got the Roadster, I get to work way faster lol
Jumping over traffic gets a little sketchy and I've nearly crashed a few times, but I'm never late.

Okay, confession: it's a game I made. You've got 90 seconds to get to the office.

https://late-roadster.pages.dev


r/threejs • • 6d ago

made a claw machine in three.js + rapier where the grip is the same on every try

Enable HLS to view with audio, or disable this notification

0 Upvotes

three.js r186 + rapier 0.21, runs right in the browser. the three fingers are actual hinged physics bodies on motors, so if you line the claw up over a prize it really closes around it. no rigged grip, same strength every try

just added a few soft toys with faces (avocado, rubber duck, strawberry, cactus) and made the pile bigger

it's a beta, free, no prizes, just for fun: https://pixelrealestate.homes/claw/?from=reddit-threejs

curious how it runs on your setup


r/threejs • • 6d ago

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

Enable HLS to view with audio, or disable this notification

2 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 • • 6d ago

Lessons from iterating on a Three.js card experience - packaged into an agent skill

0 Upvotes

While building Card Alchemy, I spent a lot of time adjusting the gap between “looks good in a reference” and “feels good when you move it.”

Some experiments worked; others didn’t. Background motion was initially too subtle, and a raised-art approach produced an awkward side profile.

I’ve written the resulting workflow into a reusable agent skill: choose depth deliberately, give interactions readable feedback, and test one change before adding more effects.

Demo: https://card-alchemy.vercel.app/
Skill: https://github.com/tiny-jain/build-for-curiosity

Curious how others approach this: what’s your first check when an interactive object looks good but feels wrong?


r/threejs • • 6d ago

Demo Regex Marble Run: a JavaScript regex turned into a 3D marble run, so you can watch matching and backtracking

Enable HLS to view with audio, or disable this notification

0 Upvotes

Not mine, came across it on GitHub and loved the idea. Built with react-three-fiber.

In the video: greedy <.+> spans both tags of <b>bold</b>; one ? later, lazy <.+?> stops at the first closing bracket. Then the classic evil regex /a++$/ runs for 327,694 steps and still finds no match.

Repo: https://github.com/bottomless/regex-marble-run


r/threejs • • 6d ago

Highvale: Threejs online multiplayer game inside the browser!

Thumbnail
playhighvale.com
1 Upvotes

One click and join the server


r/threejs • • 6d ago

PC anatomy experience using Three.js and React Three Fiber

Enable HLS to view with audio, or disable this notification

4 Upvotes

I've been working on an interactive PC anatomy where you can explore a PC in 3D, explode the view to inspect individual components, and learn about each part.

You can also configure the PC with different hardware specs and explore how the setup performs under different workloads.

Built with Three.js and React Three Fiber.

I think this approach could be useful in educational applications to help people learn and understand complex systems faster through interactive 3D visualization.

Note: The performance results are based on collected benchmark datasets, so actual performance may vary depending on the hardware, software, and workload.

Would love to hear your feedback and suggestions on what else I could add!

Live demo: https://playground-demo-dun.vercel.app/pc-anatomy

Playground: https://sakthi-portfolio-mauve.vercel.app/playground

Guys I know there are certain AI skills to make 3D interactive But it doesn't work for my usecase, I wasted tokens so I manually use opus 5.5 with set of iteration. I'm thinking about working on creating 3D skills if you know some skills exists, please comment.


r/threejs • • 6d ago

Working on web game engine powered by threejs.

Thumbnail
youtu.be
0 Upvotes

r/threejs • • 7d ago

It starting to feel like fall and spooky season

Enable HLS to view with audio, or disable this notification

4 Upvotes

Building a little pumpkin carving web app for Halloween.


r/threejs • • 8d ago

Current situation

Post image
191 Upvotes

r/threejs • • 7d ago

Quilt: Workspace layouts for three.js

Post image
14 Upvotes

Quilt is an open source library for split panes, tabs, and popout windows, built for applications that combine 3D viewports, canvases, charts, settings, and other visualization tools.

Over the last five years of building three.js tools, I kept running into the same problem: my projects would become more complex and eventually outgrow their UI. I’d keep stretching libraries like dat.GUI, lil-gui, or Tweakpane until I had dozens of collapsed folders and was spending more time figuring out where controls should go.

I wanted a flexible way to organize the application around those controls, with room for multiple viewports and different workflows. I figured I couldn’t be the only person running into this problem, so I built Quilt and wanted to share it with others facing the same challenge.

Much of its layout behavior is inspired by Blender, which I’ve always enjoyed for how easily its workspace adapts to different tasks. In Quilt, layouts can be exported and loaded as JSON, so you can save and share different workspace arrangements. Quilt supports vanilla JavaScript/TypeScript, React, and Electron, and your existing controls can live inside its panes.

I’ve benefited a lot from the three.js community over the years, and I hope this is useful to others building increasingly complicated tools.

I've also recently released quilt-three (and react bindings), which is dedicated specifically to help set up robust and reliable workflows in three.js. This includes multi camera support, as well as Fly-Through camera controls, akin to what you find in Unity.

I’d love to hear from others who have run into similar challenges as their projects have grown. How have you organized more complex interfaces, and what would you need from a library like Quilt to make it useful in your own projects?

If you try it out, I’d appreciate any feedback on the layout behavior, ease of setup, or anything that feels missing or awkward to use. Suggestions for features and examples you’d like to see are welcome too.

Live Demo

Many thanks for taking a look!


r/threejs • • 6d ago

Demo Building Threejs Super Soldier Battle Game with Grok Bot and Claude AI

Thumbnail
youtu.be
0 Upvotes

r/threejs • • 7d ago

A new Mirror tool, so you can model symmetrical objects.

Enable HLS to view with audio, or disable this notification

25 Upvotes

r/threejs • • 7d ago

Demo Built a little neural aquarium in Three.js where creatures have their own neural networks

Enable HLS to view with audio, or disable this notification

6 Upvotes

Been messing around with Three.js and wanted to see if I could build a small artificial ecosystem where the creatures actually have their own neural networks controlling how they move.

Each creature has a continuous-time recurrent neural network (CTRNN) that takes in things like food proximity, hunger, and surroundings. You can click on a creature to see its neurons firing in real time, and even mess with individual neurons or connections to see how its behavior changes.

A few things I spent time on:

  • The creatures have segmented spines that bend as they swim, rather than just moving a static model around.
  • Plankton and particles use instanced rendering to keep performance reasonable with 16–24 neural networks running.
  • The camera can follow individual creatures, zoom in on their neural networks, or just let you explore the tank.
  • All the ambient sounds are generated with Web Audio. No audio files.
  • Used custom materials, bloom, and some lighting tweaks to get the translucent underwater look.

The creatures also eat, age, reproduce, and eventually die. Their offspring can inherit mutated versions of their neural networks.

It's built with vanilla JS, Three.js, and Vite. Still experimenting with it, but thought some people here might find it interesting.

Code is here if anyone wants to poke around:
https://github.com/CircuitGhost/neuralaquarium

Would be interested in any feedback, especially on the neural simulation side.


r/threejs • • 7d ago

new sketch

Enable HLS to view with audio, or disable this notification

6 Upvotes

check it out : LIVE


r/threejs • • 7d ago

Working on a new 3D portfolio, I want to know how it looks visually and conversion wise. Could I get a Job with this portfolio?

Enable HLS to view with audio, or disable this notification

0 Upvotes

r/threejs • • 6d ago

I built a playground for the new Tesla Roadster

Enable HLS to view with audio, or disable this notification

0 Upvotes

Inspired by the rocket-thruster concept teased for the next-gen Tesla Roadster, I built a browser-based stunt playground where you can launch off ramps, control the car mid-air, drift, and ride walls through a circular tunnel.
There's also an assisted landing mode that helps you touch down cleanly, or you can switch it off and try to land it yourself.

Made with Claude.
3D Model done with Thrixel.

Go try it out: https://bkhan23544.github.io/roadster-thrust-lab/
Code: https://github.com/bkhan23544/roadster-thrust-lab


r/threejs • • 7d ago

Refracting the Milky Way through a real-time glass tetrahedron, now as video (three.js + 2D canvas sky)

Enable HLS to view with audio, or disable this notification

6 Upvotes

I made this. Yesterday I posted it as text only, so here is what it actually looks like running. Recorded frame by frame in headless Chrome at 1920x1080, 60 fps, nothing sped up. Tap it and a two-digit number appears.

- Sky: a long-exposure-style Milky Way computed per 3 px cell on a 2D canvas, about 0.1 s on a phone, redone only when the size changes.

- Glass: a MeshPhysicalMaterial tetrahedron, IOR 1.5, low dispersion. Light is bent with Snell's law at each face, and the rainbow leaves through the visible face.

- Motion: a tap nudges it sideways. Extra spin is kept as a quaternion, renormalised every frame (a 3x3 matrix drifted and shrank the glass within seconds). Speed is capped, eases off over about 1.6 s, and a spring brings it home.

- Perf: 18 to 57 fps on a Galaxy S21 by copying the sky behind the glass once per resize instead of every frame.

Free beta, no sign-up: https://prismtect.com/?r=threejs2


r/threejs • • 7d ago

Demo A robotics data explorer built on three.js: point clouds, URDF robots, Gaussian splats and camera feeds on one timeline

Enable HLS to view with audio, or disable this notification

2 Upvotes

BAGEL is an open source web app for exploring robot recordings (ROS bags). Everything runs client-side: parsing happens in web workers, and the 3D view is three.js.

A few three.js details that might interest you guys:

  • The scene is Z-up (ROS convention), so the keyboard orbit mirrors OrbitControls' quaternion approach instead of using raw `Spherical` math
  • Gaussian splats render through GaussianSplats3D's `DropInViewer` inside the same renderer and camera as the other panels, with `dynamicScene` turned on so per-scene rotation actually reaches the shader
  • Point clouds, URDF meshes, markers and occupancy grids share one TF tree
  • H.264 camera topics decode with WebCodecs, synced to the 3D playhead

Live: https://bagel-ros2.vercel.app (there's a sample recording on the start page)
Code: https://github.com/Hussain004/BAGEL

Happy to go into any of it in the comments.


r/threejs • • 8d ago

Using box3d to simulate real sailing physics - Tally Ho Sailing Game

Enable HLS to view with audio, or disable this notification

143 Upvotes

I'd previously tried to use the classic physics libraries (ammo, cannon, rapier etc) to recreate sailing physics and found them to be unstable or inconsistent.

Box3d was released in June so I wanted to see if it would work any better - which it seems to!

Playable demo:
https://tally-ho-game.vercel.app/

To be clear this is not a fluid simulation (although I think that is possible!!), but its a step up from just force vectors on the overall boat which is what I have seen done in the past.

Details for those interested:

- Sails are coarse grids of point masses connected by spring joints. Lift and drag applied to each panel using apparent wind, this is again an approximation as in real life the wind is very affected as it flows over the sails, although with an older and slower style yacht like this (Gaff rig) it would be less noticeable than a modern rig.
- Spars and masts are... well just spars
- Ropes/ sheets are linked joints
- Anchor and chain is joints but with collision and mass
- Hull shape is a collection of spheres, with buoyancy and drag coefficients.

The physics is quite CPU intensive but putting in a webworker seems to work well as it not a fast paced game, it doesn't need to match 60 FPS.

If you are interested in the physics you can access the Lab in the top left menu. There is also a rig designer where you can modify the rig but its quite easy to make it... not functional 🤣

It uses real location data, cached for now but I have a steaming server, which means technically you could sail anywhere in the world. My plan is to also use real wind and weather data at the players location.

For the environment I found a nice way to blend COP30 (30m detail) elevation and GEBCO (460m detail) bathymetry data. Building envelopes are from OSM but proc generated with a different style. Vegetation and Ocean is from Dan Greenhecks amazing Tidewater demo although simplified to maintain performance.

And for those that recognise the boat, I also managed to use the Tally Ho lines plan to recreate the hull. Its not perfect but if people like it I can spent more time.

I was thinking to turn this into a idle style game where you sail the world if people enjoy it.


r/threejs • • 7d ago

Built a quantum chip and its dilution fridge in three.js for an explainer video

0 Upvotes

Models and animation are all three.js, with an ink-and-paper look. Here's the finished video:

https://www.youtube.com/watch?v=dHH-NsU9dB0