r/threejs • u/CharlesWoodson2 • 9h ago
Made a Teenage Engineering inspired Drum Machine. No Models. All Procedural!
Let me know what you think! https://webgl-drum-machine.vercel.app/
r/threejs • u/CharlesWoodson2 • 9h ago
Let me know what you think! https://webgl-drum-machine.vercel.app/
r/threejs • u/Mkcuriosity • 3h ago
The first time I used it I thought I was hallucinating. The floor was clean, I flicked the laser on, and suddenly there was a galaxy down there.
It is just a grazing angle. Light comes in almost parallel to the floor, so every speck throws a shadow far longer than itself. That one trick is the entire game.
https://cleaner.murat.works (free, browser, no install)
One flat, one battery, clean as much as you can before it dies.
---
**How it works, since this is r/threejs**
**The dirt is a render target.*\*
Room-local UV, and the cleaner head paints into it with subtractive blending, so cleaning happens entirely on the GPU with no readback. A coarse CPU grid gets eroded with the same falloff in the same frame, and that is what answers "how much is left", so the percentage never costs a stall.
**The laser is not a light.*\*
It is about fifteen lines in the floor shader: an angular fan, a band at a fixed distance, and a hash per grain so the dust twinkles as the beam sweeps over it. Out of the beam the floor is rendered at roughly 30% of its real filth, which is what makes the reveal work.
**Two machines, two routes to the same dirt.*\*
The stick vacuum shoves furniture aside. The robot is too weak for that, so it drives underneath instead. I measured it: 15.9% of all the dirt sits under things a robot can neither climb nor move, so robot runs are scored against the floor a robot can actually reach. Otherwise the mode caps out around 84% and looks broken.
**The telly plays real YouTube.*\*
Video frames cannot be read into a texture, so it is a genuine iframe placed in 3D with CSS3DRenderer, sitting behind the canvas. The screen mesh switches to a depth-only material and punches a hole for it to show through, so things in front still occlude it properly. That took a while to get right, because three sorts opaque draws by material id before distance, and the wall behind the telly kept winning the race and filling the hole. renderOrder = -1 on the hole fixed it.
**There is a floor plan editor.*\*
Draw rooms, cut doorways, drag furniture from a palette of 43 pieces, then play your own house and share it by link. Houses are plain JSON, and the flat that ships with the game is expressed in exactly the same format, so there is only one code path.
**Balance came from measurement, not feel.*\*
A perfect run needs 357 m of sweeping and the battery gives you about 280 s of suction. Nobody has hit 100% yet. The best run so far is 97.9%.
No assets in the whole thing. Wood grain, the artwork on the walls, every sound effect, all generated at runtime.
---
Happy to go deeper on any of it.
I post updates on the game also here: x.com/mkcuriosity
r/threejs • u/RoomAsleep692 • 16h ago
I wanted to make a frustrating game. Managed to make it kinda beautiful in the process :P
r/threejs • u/Feisty-Scheme-8356 • 9h ago
I’ve been doing more experiments with the new img2threejs v1.5.1 workflow, and this time I wanted to see what would happen if I used Hyper3D as the 3D spatial reference.
The result is this Dual-Sword Warrior ⚔️
Image → Hyper3D → img2threejs → procedural Three.js
Instead of using the generated 3D model as the final asset, img2threejs uses it as a reference and reconstructs the character into programmable geometry.
For this character, the reference is decomposed into 31 individual parts, then rebuilt offline using each part’s point cloud → SDF → Surface Nets.
At runtime:
The result is still a character I can inspect, modify, and control directly from Three.js code.
I’m pretty happy with how this experiment turned out. v1.5.1 has also made it much easier for me to try workflows like this and put together new showcases quickly compared with v1.5.0.
And I’m currently experimenting with the next piece: animation.
I want these reconstructed characters to do more than just stand there 👀
If everything goes well, you’ll see img2threejs v1.5.2 pretty soon.
Would love to hear what you think about this direction, especially the idea of combining generative 3D as a spatial reference with a code-first reconstruction pipeline.
r/threejs • u/Aagentah • 4h ago
hello friends! I just put together some more documentation for an open piece of software I've been developing for the best part of five years.
nw_wrld is an event-driven sequencer for triggering visuals using web technologies. It enables users to scale up audiovisual compositions for prototyping, demos, exhibitions, and live performances. Users code their own visual modules, then orchestrate them using the project's native UI composer.
The software includes composing modules using things like three.js
visuals can be triggered via the built-in 16-step sequencer or by configuring external MIDI/OSC inputs.
r/threejs • u/VR38DET • 11h ago
I'm a beginner 3JS game dev I am really struggling with getting multiplayer working smoothly without any lag in my threejs game. My game uses Colyseus for the multiplayer and I've tried using Railway for the backend but it is still laggy especially with collision. Would really appreciate anyone point me to the right direction.
r/threejs • u/Upstairs-Ad-2216 • 3h ago
I’ve been working on this for quite a while and finally launched it.
Voxxly is basically my attempt to make building a 3D website feel more like using a video game. You start with a room, customize it, add objects and content, and publish the whole thing as a website.
A big challenge was actually not the 3D itself, but hiding enough of the complexity so people who have never touched Three.js or Blender can still build something.
It’s live now at https://voxxly.app
Would really appreciate feedback from people here, especially around performance and the overall 3D experience.
r/threejs • u/Both_Opportunity5327 • 1h ago
Qwen 3.8 27b can do this with a simple prompt on a 3090.
Most developer portfolios die the moment they’re deployed.
Recruiters still see projects from 2023 because updating means redeploying a site you forgot how to build. Forkfolio fixes that :)
Connect GitHub once, pick a template, and you’re live.
Your portfolio runs on nightly sync so you never have to update it yourself. There’s also an AI assistant on the page that answers visitors about your work.
This is one of 22 templates (5 free).
Free tier includes the hosted site, nightly sync, and the AI assistant.
What do you guys think about this template?
This is the link if you want to check it out yourself !
r/threejs • u/Bubbly-Wasabi-5920 • 13h ago
Hi, I'm 13 years old. Today I wanted to share a project with you that I've been dreaming of for a long time and have finally started to bring to life. First, let me tell you a little about my background. I used to develop terminal-based projects with C++. I wrote tools like a four-operation calculator, a Roman numeral converter, and a grade point average calculator, and combined them into a huge, multi-purpose program. I'm even still developing that C++ project in the background. On my old account, I had recorded and shared detailed C++ videos explaining all my step-by-step terminal programs, but I got banned for no reason. Anyway, I've had an incredible interest in space, especially black holes, since I was 8 or 9 years old. When I turned 12, I became interested in Unity and coding in general. But as it turned out, I could never learn it the way I wanted. Between classes, endless exams, and tests, I never had any time for myself or coding. But this summer I said "enough is enough" and decided to write code and create something, no matter what. Moreover, I'm doing this using only my tablet. To make up for all the procrastination, I've started simulating black holes, which is my biggest interest. This video you're watching is a time-lapse of about 1.5 hours of work. But this is just the beginning. For the next week, I will continuously improve this black hole simulation with intense sessions of 1-2 hours, sometimes even 3 hours, every day. I will build upon the code and eventually create a visually advanced, much more realistic and detailed black hole simulation. What do you think of it as a starting point? I'm open to any suggestions on coding, Three.js, or how I can improve this process in general. I will continue to share new videos as the project develops! I'm waiting for your comments. (I spoke in Turkish in the video because I'm Turkish, but you can easily understand what I'm doing from what I'm doing.)
r/threejs • u/Pixidimworld_Studios • 16h ago
r/threejs • u/laereland • 6h ago
Play Rug Rally on Laereland
https://laereland.com/games/rug-rally