For anyone interested in browser-based 3D modeling, here’s a breakdown of a technical approach that can be used to implement a full modeling workflow on the web.

Rendering & stack

• Three.js handles all 3D rendering.
• All core logic is written in plain JavaScript.
• Supabase is used for auth (sign-up / sign-in) and as the backend/database.

Core mesh representation

Instead of editing Three.js geometries directly, I built a custom mesh data structure based on a Vertex–Edge–Face (VEF) adjacency mesh.

• All modeling operations (extrude, move, split, etc.) operate on this mesh data.
• After each operation, the mesh data is converted into a BufferGeometry.
• That geometry is then passed to Three.js purely for rendering.

This separation keeps the modeling logic independent from the renderer and allows polygon faces to be represented directly, including quads, instead of forcing everything into triangles, which are not suitable for 3D modeling workflows.

Undo / redo

Each modeling action is stored as a command (command pattern–style):

• Commands know how to apply and revert their changes.
• Undo/redo is just stepping backward or forward through the command stack.

Editing helpers & scenes

• Vertex, edge, and face helpers are just lightweight BufferGeometry objects.
• These helpers live in a dedicated edit scene.
• Actual objects live in the main scene, which makes it easy to:
  • Loop through objects for an outliner
  • Easy raycast-based selection
  • Keep editing visuals separate from final geometry

Fundamental tools for modeling

You don’t need many tools to start modeling in 3D. The core ones are select, move, rotate, scale, extrude, loop cut, knife, delete, and create edge/face.

These are enough to model most basic shapes. Other tools mainly exist for convenience or for handling more complex, specific cases, and are usually built after these fundamentals.

Math requirements

You don’t need hardcore graphics programming, but you do need:

• Linear algebra basics (vectors, matrices)
• Transformations in 3D space
• Quaternions for gizmo rotations
• Solid algorithmic thinking for mesh operations

Most of the difficulty isn’t pure math—it’s designing robust data structures and writing clean algorithms for geometry manipulation.

Takeaway

If you’re thinking about building a 3D modeling tool on the web:

• Treat the renderer as a viewer, not your source of truth
• Build your own mesh data model
• Use command-based operations early

Hope this helps anyone exploring browser-based 3D tooling.