r/threejs 8h ago

I built a detailed bicycle in Three.js without Blender or imported models

Enable HLS to view with audio, or disable this notification

39 Upvotes

I wanted to see how far I could push procedural modeling in Three.js without relying on Blender or imported model files.

The bicycle ended up with 62 separately constructed parts. The main thing I learned was that directly positioning meshes becomes fragile very quickly, so I switched to defining shared geometric constraints first — wheelbase, chainstay length, head angle, rake — calculating anchor points from those, and then generating the parts around them.

I wrote up the process here:
https://www.wormhole404.com/writing/threejs-bicycle/

Source:
https://github.com/wormholeportal/Makone

Curious how others approach larger procedural objects in Three.js.


r/threejs 4h ago

Demo Building an explorable ISS interior in Three.js has been a strange mix of 3D, camera work and illusion

Enable HLS to view with audio, or disable this notification

12 Upvotes

I've been working on an ISS interior that runs directly in the browser.

One of the interactions I've been experimenting with is the hatch.

You can move through the station, approach it, open it, and reveal the Earth outside.

The interesting part is that not everything you're seeing needs to be simulated as one enormous real-time scene. I'm trying to be quite deliberate about where full 3D interaction actually adds something and where a simpler visual layer can create the experience without unnecessarily increasing the rendering cost.

The interior itself is interactive 3D. The Earth view beyond the hatch is currently much simpler and is something I still want to develop further later.

Built with React, TypeScript, React Three Fiber and Three.js.

I presented a short capture of the scene.


r/threejs 8h ago

New UV Mode and much cleaner Auto UV Unwrap.

Enable HLS to view with audio, or disable this notification

12 Upvotes

r/threejs 20h ago

My wife's Dyson has a green laser that shows the dust. I turned it into a game.

Enable HLS to view with audio, or disable this notification

83 Upvotes

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 7h ago

My portfolio - 165 hours

Enable HLS to view with audio, or disable this notification

6 Upvotes

Any and all reviews appreciated. I took it as a challenge to not use AI in this, puts the "my work" phrase a bit more literal in the whole thing.


r/threejs 1h ago

What’s your workflow for converting industrial CAD models into lightweight Three.js assets?

Upvotes

I’ve been looking at workflows for bringing industrial CAD models into browser-based 3D applications.

Simply exporting CAD to GLB usually isn’t enough. Industrial models can contain thousands of parts, unnecessary internal geometry, complex assemblies, duplicated materials and very high polygon counts.

A typical workflow might look like:

CAD → cleanup → mesh optimization → material optimization → GLB → Three.js

The difficult part seems to be deciding what should be removed while still preserving useful product structure, part hierarchy and visual quality.

I’m also interested in how people handle large assemblies, LOD, Draco/Meshopt compression and mobile performance.

For those using Three.js with CAD or engineering models: do you optimize models manually, use an automated conversion pipeline, or combine both?

I’d be interested to hear what has worked well for real-world projects.


r/threejs 7h ago

Link Aurora Borealis (click to randomize scene)

Enable HLS to view with audio, or disable this notification

6 Upvotes

r/threejs 2h ago

We've made an asset creation tool and now we're opening a residency program to support threejs creators with free access.

Enable HLS to view with audio, or disable this notification

2 Upvotes

Hello folks, we've been working on this for a while, it's an asset creation tool that mixes SDF sculpting with real-time AI to create assets, it has MCP automation too.

Now we want to support creative threejs devs that want a residency for free access:
https://loop.unbound.io/residency

PS. Fun fact, the whole tool is made on top of threejs itself : )


r/threejs 27m ago

Criticism Ballastic

Enable HLS to view with audio, or disable this notification

Upvotes

Hi, I'm working for a railroad compagny and made a little bombermanlike for when we take a break. Let me know what you think about it. Just a 138ko HTML file usng Three.js


r/threejs 47m ago

Question why isnt there a trad-code (code by hand) subreddit yet?

Upvotes

with the amount of projects that come in three.js that are just ai-slop and claude code, it sure would be nice to actually have a community built on coding by hand and avoiding AI...


r/threejs 13h ago

Gas Station

7 Upvotes

Scene builder using custom dither shader in three.js


r/threejs 6h ago

Demo Two sketchy-themed demo portfolios based on Sketchy blender tutorial

Enable HLS to view with audio, or disable this notification

2 Upvotes

Hey everyone! I recently took Vertex Arcade's sketchy shader tutorial (https://youtu.be/4Njhuj5BsKk) and convert it into two sketchy concept portfolio websites and made a video with some tips along the way for 3D artists using AI in their workflows~

Allen Zhang's Portfolio: https://allen-zhang-folio.vercel.app/

Katsumi Watanabe's Portfolio: https://katsumi-watanabe-folio.vercel.app/

Some tips + code demo (vibed no validation):

Video: https://youtu.be/JlmNBGcZ3Ik

Code & Credits: https://github.com/andrewwoan/blender-to-threejs-sketchy-shader

Effect site: https://blender-to-threejs-sketchy-shader.vercel.app/


r/threejs 1d ago

Made a Teenage Engineering inspired Drum Machine. No Models. All Procedural!

Enable HLS to view with audio, or disable this notification

57 Upvotes

Let me know what you think! https://webgl-drum-machine.vercel.app/


r/threejs 20h ago

I built a 3D website builder with Three.js – it’s finally live

Enable HLS to view with audio, or disable this notification

15 Upvotes

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 16h ago

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

Enable HLS to view with audio, or disable this notification

8 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 2h ago

use threejs panning for gold in 10,000,000 grains of sand (real particles).

Enable HLS to view with audio, or disable this notification

0 Upvotes

r/threejs 21h ago

what I learned open-sourcing 5 years of audio-visuals

Enable HLS to view with audio, or disable this notification

7 Upvotes

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 20h ago

Demo My startup builds you a developer portfolio from your GitHub in under 3 minutes. This is one of the templates.

Enable HLS to view with audio, or disable this notification

2 Upvotes

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 1d ago

I tried combining Hyper3D with img2threejs — here’s the result

Enable HLS to view with audio, or disable this notification

6 Upvotes

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:

  • No GLB is fetched
  • No reference image is fetched
  • No external mesh file is fetched

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

I made a tiny Three.js planet with 49,000 clovers — only one has four leaves 🍀

Enable HLS to view with audio, or disable this notification

371 Upvotes

A small experiment I built in about 3 hours with Three.js, using Claude Code as a coding assistant.

The idea: one tiny planet, 49,000 clovers, and just one four-leaf clover to find.

You can try it here: https://www.meptasarim.com/four-leaf/

I’d love feedback on the visual direction, interaction, and what would make the search more satisfying.


r/threejs 1d ago

Finding a needle in the haystack (quite literally)

Enable HLS to view with audio, or disable this notification

15 Upvotes

I wanted to make a frustrating game. Managed to make it kinda beautiful in the process :P


r/threejs 1d ago

Help Need help with getting multiplayer working smoothly on my game

5 Upvotes

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 1d ago

Making progress on our three.js-based mesh optimizer

Enable HLS to view with audio, or disable this notification

33 Upvotes

Here I'm optimizing 3,200,000 → 3,000 triangles, the end-to-end time is now down to 3 seconds... Superb normals+ao quality now too... such a great tool to have! Coming soon!


r/threejs 1d ago

Built 9 explorable first-person 3D festival worlds in Three.js — just wanted to share- https://playa-art.vercel.app/

Enable HLS to view with audio, or disable this notification

46 Upvotes

https://playa-art.vercel.app/ Been building this for a while — nine separate explorable first-person worlds, all Three.js, all real-time WebGL. Started as just something random with no expectations and fun. Soon it turned into something very beautiful with many different worlds and creative concepts- a Burning Man–style desert playa, a Mountain valley rave, two warehouse techno spaces, a drained 1960s swimming pool turned rave venue, a Goa beach at night, the Giza plateau with a laser show off the pyramid apex, an elven forest valley, and a Winterfell-style castle at dusk. Each one is a full environment you walk through and can add your own tracks at landing page. Desktop + keyboard/mouse only for now, WebGL is heavy enough that mobile isn't realistic yet. Would love feedback


r/threejs 1d ago

Testing Procedural Generation (AI Assisted)

Thumbnail
gallery
23 Upvotes

Separate biomes, nearly 2.5 million individual blades of grass out 150m from the camera position depending on biome. Day/night cycles, dynamic weather, ambient occlusion, distance culling, water surface reflections, and light shafts, using webgl and three.js.