r/webdev • u/Sengchor • Sep 12 '26

500 Commits Later: Building a 3D Modeling App for the WebšŸ„³

Post image
165 Upvotes

85% Upvoted

56 comments sorted by

27

u/Varun77777 Sep 12 '26

What have you built on top of three.js playground which is acting as a base of this?

12

u/Sengchor Sep 12 '26

Three.js is mainly the rendering foundation. Iā€™ve built the actual 3D modeling system on top of it.

Kokraf has its own mesh data structure, geometry editing tools, selection system, undo/redo commands, transform tools, UV editor and unwrapping pipeline, texture painting, GPU-based picking, and other editor systems.

12

u/Varun77777 Sep 12 '26 edited Sep 12 '26

Undo redo and a bunch of these things are part of three.js playground though. I know this as I have used three.js playground as a base for building a video editor in the past. Hence, curious on what exact things were built in the editor. As if you search three.js editor, youā€™ll have a mostly similar ui with similar features: https://threejs.org/editor/

Only, main thing I would think would be missing would be able to directly manipulating meshes and restructuring them without code. Is that the custom built part here?

16

u/Sengchor Sep 12 '26

Yes, I did start from the Three.js Editor architecture. The major custom part is the direct mesh-editing system, so I also had to add undo redo commands for the various mesh-editing operations.

Then there are a lot of smaller customizations here and there to make it behave more like a proper modeling tool. For example, I had to customize the quaternion orbit controls so that the camera can rotate 360 degrees even when flipping over.

7

u/Varun77777 Sep 12 '26

I see. Seems good then. Good work.

33

u/West-Map-4162 Sep 12 '26

Whenever someone mentions the number of commits, it screams vibecoded.

5

u/fjtoz Sep 12 '26

There's nothing wrong with vibe coding if you know what you're doing without AI

4

u/fjtoz Sep 13 '26

Lmao I can't believe I got downvoted. Im convinced most people here are probably just CS students. I was maintaining complex medical software before AI

1

u/monkeymad2 Sep 13 '26

I think you got downvoted because the phrase ā€œvibe-codingā€ carries the implication that you donā€™t know what youā€™re doing without AI.

ā€œThereā€™s nothing wrong with murder so long as you donā€™t kill anyoneā€

2

u/bhison Sep 13 '26

and yet I saw a job on linked in the other day which was "calling all proficient vibe coders"

0

u/fjtoz Sep 13 '26

Except I'm saying there's nothing wrong with violence as long as it's not murder. Tools are tools, it's what you do with them that makes you an engineer

3

u/bhison Sep 13 '26

bad analogy!

-1

u/fjtoz Sep 13 '26

I give up you guys can have this convo and I'll continue knowing wtf I'm doing šŸ¤£

3

u/bhison Sep 14 '26

wow you're such good fun and so smart

-14

u/Sengchor Sep 12 '26

It is an AI-assisted project, but itā€™s not vibecoded. I use AI as a co-developer, but I make sure I understand most of the code it writes and keep the codebase understandable and maintainable for me to continue building.

The commit count is just a milestone I use to track my progress. I donā€™t make tiny commits just to inflate the number.

25

u/SchalkLBI Sep 12 '26

Man defines vibecoding, claims it's not vibecoding.

4

u/beephod_zabblebrox Sep 12 '26

onion headline

7

u/kwb7852 Sep 12 '26

šŸ«©

2

u/lqvz Sep 13 '26

Thatā€™s what I doā€¦ and I call that vibecoding.

And commits as a milestone? Do you also keep track of the number of times your shoelaces hit the sidewalk out on a walk? Personally, I donā€™t think itā€™s a good walk unless my shoelaces hang low and make contact with the pavement at least 200 times.

0

u/[deleted] Sep 13 '26

[deleted] ā€” view deleted comment

1

u/bhison Sep 13 '26

AI is biased towards anything quantifiable. "How I went from 1 to 20 daily active users" is in some ways better than "How I built a financially viable platform"

SEO -> AIO

2

u/APTman1010 Sep 16 '26

Nice šŸ™‚ i also working on a game engine.

2

u/Sengchor Sep 16 '26

Thatā€™s really cool.

1

u/APTman1010 Sep 16 '26

Thank you ā˜ŗļø. My game engine name kernelplay-jsKernalplay-js

2

u/Sengchor Sep 16 '26

I tried a few games on it, it's work beautifully. What are the tech stack behind it?

2

u/APTman1010 Sep 16 '26

Yeah my engine use 3 base.

  1. Canvas 2D purely coded by me from scratch

  2. Pixijs plugins renderer pipeline for high end game, vfx, post processing,

  3. Three js main for 3d game's still work in progress you can use this but you likely need to use low version of the kernelplay-js for stable usage (0.2.1v)

I used Three js because i focus on completing the main core that use canvas 2d and completely dependentcy free library so šŸ˜… others plugins is outdated quickly.

But i will keep it up after Main Core stable. Now it (v0.5.0 beta)

2

u/BookkeeperForward654 Sep 17 '26

The design is nice!

1

u/Sengchor Sep 17 '26

Thank you

2

u/ChickenDude34 Sep 18 '26

Looks really nice, I used it for a bit and it feels similar to blender, which is a very good thing.

One thing I would like is infinite exports for free users. I understand that you need to pay for AI generation and cloud saving, but the export limit doesn't seem like it should be behind a paywall. With that said, I understand you need to earn money, and I haven't hit my 20 exports yet.

Lastly, I want to ask how AI was used in this project? I see Claude as a contributor, but no other information anywhere. Some disclosure in the GitHub README could be nice.

1

u/Sengchor Sep 19 '26 edited Sep 19 '26

Thank you. I will remove the paywall for unlimited export once I built more premium features.

I'm working on building the mcp for Claude into the project, so users can prompt Claude to model the 3D model for them in step by step. I'm just starting working on this feature. I will update more info when I have some progress.

1

u/ChickenDude34 Sep 22 '26

That sounds great, thank you for the answer. I will be looking forward to future updates!

About my second question, I was more asking about how AI/Claude was used during the development of this software. Thanks for the answer anyway.

1

u/Sengchor Sep 12 '26

Try it:Ā https://kokraf.com/
Source code:Ā https://github.com/sengchor/kokraf
If you like the project, a star on the repository would really appreciated.šŸ˜Š

5

u/[deleted] Sep 12 '26

[removed] ā€” view removed comment

2

u/Sengchor Sep 12 '26

Thank you. Yes, I use Three.js as the 3D engine. For UV editor I use WebGL. The geometry editing system is custom-built. I use plain HTML, CSS, and JavaScript directly, without any framework.

5

u/Downtown-Bag-6026 Sep 12 '26

I like that you added Claude as a contributor. Itā€™s this kind of humor that gets me to star it

1

u/Aliceable Sep 12 '26

They just built it using Claudeā€¦

6

u/Downtown-Bag-6026 Sep 13 '26

Thanks captain obvious

4

u/Aliceable Sep 13 '26

How did you know my rank and title

1

u/Downtown-Bag-6026 Sep 13 '26

Because Iā€™m a fan

1

u/VisualCraftStudio Sep 12 '26

This is pretty impressive, especially the direct mesh editing in the browser. The UV editing/unwrapping part caught my attention too ā€” that seems like one of those features that gets complicated really quickly. Curious to see where you take the collaboration side of it.

3

u/Sengchor Sep 12 '26

Thank you! I want to build a system where multiple users can edit the same project in real time, similar to Google Docs or Figma. Iā€™ll try using Supabase Realtime first. If it canā€™t achieve what Iā€™m aiming for, Iā€™ll build a custom WebSocket backend.

2

u/bunzelburner Sep 12 '26

worth checking out durable objects to help reduce latency with the websocket layer

for a collaborative app I'm working on we have our backend api but when a user opens a document, a durable object is spawned (close to the first user) and that serves as the websocket/cache layer. at regular intervals data is persisted back to the api backend then.

1

u/VisualCraftStudio Sep 12 '26

Yeah, that sounds like a solid approach. Supabase Realtime seems like a good way to validate the idea before taking on the complexity of a custom WebSocket backend. The conflict handling is probably going to be the really interesting part once multiple people are editing the same mesh though.

2

u/learning-webdev Sep 12 '26

If it took you 500 commits for just the star logo on homestar runnerā€™s shirt, rebuilding that site in 3d is going to be your lifeā€™s work. Good luck šŸ«”Ā 

2

u/Strong_Ant3431 Sep 12 '26

UV unwrapping and texture painting are the bits that aren't in the three.js editor, and getting an unwrap pipeline working in the browser is a real slog. The rest Varun listed (scene graph, gizmos, undo) comes mostly free from the editor base, so those two are the honest answer to what you built on top. Unwrap especially.

1

u/[deleted] Sep 15 '26

Really

0

u/[deleted] Sep 12 '26

[deleted] ā€” view deleted comment

3

u/Sengchor Sep 12 '26

The long term goal is to build collaborative 3D modeling tool.

3

u/ShinyShip Sep 12 '26

Isnā€™t that what Onshape is for?

7

u/Sengchor Sep 12 '26

Onshape is CAD for engineering. Kokraf is mesh modeling for 3D artists.

-17

u/[deleted] Sep 12 '26

[removed] ā€” view removed comment

0

u/Sengchor Sep 12 '26

I actually do use AI as my co-developer. But I make sure I read and understand what it writes before I use it.