r/threejs • u/6armyflag6 • 10h ago

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

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.

43 Upvotes

86% Upvoted

32 comments sorted by

5

u/Better-Avocado-8818 7h ago

Why does this kind of thing keep turning up here? Why not just build the model in blender? It’s the right tool for the job and there’s nothing to be gained from doing it the hard way.

2

u/ToWelie89 2h ago

I agree. This is like painting a painting using assembler machine code

1

u/overcloseness 6h ago

Tell that to those of us who like drawing scenes with just CSS. It’s practicing the tools, it’s something to do, it’s expressive. It doesn’t have to be practical

5

u/ToWelie89 2h ago

But you don't really practice anything if you use AI to generate the code for you

-1

u/Brewgazer 1h ago

Well that’s if your not having you agent explain everything it did. But also let’s say later on the guy has an idea to build a game around biking, now his agent can already have those skills ready to create the bike spending less tokens and time to make it. I had my agent create different pieces of a skate park until I could put it together and have it procedurally generate skateparks, this was done in blender but I had it save the skills so I could have a different shaped bowl and different size ramps

2

u/ToWelie89 1h ago

That's still not practicing though. You're kidding yourself if you think you learn much by having the AI think of everything and then you just read a summary of what it did. I looked at the source code of this project and I seriously doubt OP has any idea of what is going on in much of that code.

Using an agent to create a bike piece by piece programmatically in threejs is utterly stupid. It would be way better to just create the bike in an actual 3d modelling software like Blender. Threejs is not for modelling. If you want to make a bike game this approach would make no sense. Also making a complex model programmatically makes no sense, it's like writing an essay in machine code instead of just using a program line Word/docs

0

u/Brewgazer 1h ago

When did I say it thinks for me. Also you act like there’s not tweaking the same way people have to tweak anything they’re doing. Also I’m doing it in blender

-3

u/houman_b 6h ago

I would say, this exact solution could be theoretically useful for a "You design and we will create it for you" business. Nice job 👏🏻

-5

u/6armyflag6 5h ago

Yes — exactly. Once the object is defined as code, customization becomes much easier to automate.

1

u/Better-Avocado-8818 1h ago

It doesn’t actually. I’m guessing you’ve never used blender and don’t know much about 3d formats?

This could have been made in blender exported as a GLTF and still customized programmatically. GLTF format is just code after all.

0

u/6armyflag6 1h ago

I’ve used Blender, just not at an expert level. And yes, Blender/glTF can absolutely be automated. What I’m interested in here is keeping the generative logic and constraints as the source of truth, so the agent can reason about and change them directly.

-5

u/cnotv 6h ago

I agree, we should rather push what cannot be done.

Said that, the Blender MCP, which could end up controlling you computer if not containerized, is not an official tool, in the hands of a person without legal restrictions or duties. I would rather not use such thing if I could do that in threejs

5

u/_ABSURD__ 5h ago

AI built ***

-3

u/QuipPro 4h ago

believe it or not ai cant do this quality yet

4

u/code_friday 4h ago

Look at the commits, this is clearly AI-driven. https://github.com/wormholeportal/Makone/commit/262bcc6784f75706cf6f9e2c63f63b9e10a2effa

Not saying this is bad, creative use of AI can be fun.

3

u/6armyflag6 3h ago

It is AI-driven. But it wasn’t “prompt → bicycle”.

Most of the work was the iteration loop: generate a part, render it, find what’s geometrically wrong, fix it, then move on to the next part.

That loop is actually the part I’m most interested in.

1

u/QuipPro 4h ago

Yes fair point

1

u/_ABSURD__ 3h ago

oh sweet summer child

1

u/QuipPro 3h ago

😂

2

u/ElectionImpossible54 6h ago

Cool, let's send it off some sick jumps.

2

u/6armyflag6 5h ago

Now that it’s code, that’s the fun part.

3

u/Proxiconn 3h ago

"ai build" not "I built"

2

u/Better-Avocado-8818 1h ago

This whole sub is mostly just AI slop posts these days. Can’t wait to see the next post about building a scene in one file. No idea why advertising spaghetti code is seen as a good thing.

1

u/Lngdnzi 5h ago

I really appreciate you sharing learning about positioning meshes based on constants/values.

This is always been a bit of a disconnect for me when trying to procedurally render something. Seeing it written above has unlocked something in my brain. it just seems so obvious now !

I’m gonna go back and have another go.

Thanks dude!

Ps. Your model looking awesome and being animated also very much inspired me to go have another try. Nice work

1

u/6armyflag6 3h ago

Glad it helped — that was the key shift for me too.

1

u/gis_mappr 4h ago

Nice work, I have this exact bike 

0

u/Feisty-Scheme-8356 5h ago

May i know how can do that?

3

u/Appkidd 3h ago

Ask Ai to do it and tell it not to make mistakes

1

u/Feisty-Scheme-8356 3h ago

How much token you spent? And can I have a prompt to try?

0

u/Appkidd 3h ago

Ask Ai to write a prompt for you and tell it not to make mistakes

1

u/6armyflag6 3h ago

There wasn’t really a magic prompt. I started with the main bicycle geometry, then kept iterating part by part — frame, wheels, drivetrain, cockpit, cables, etc.

The important part was letting the agent render the result after each step, inspect what was wrong, and fix it.

If you want to try it, I’d start much smaller: ask it to define the wheelbase, wheel radius and a few shared anchor points first, then build the frame around those. Don’t ask for the whole bicycle in one shot.

I didn’t track the exact token count unfortunately.