How to implement editable faces with push/pull behavior like SketchUp or Coohom in Three.js?

Questions
, , , , , , ,
1

Hi everyone,

I’m trying to implement a feature in Three.js similar to the Push/Pull tool in SketchUp (or the face extrusion tool in Coohom), where a user can click on a face of a 3D box, see a draggable arrow appear, and then drag that face along its normal to “extend” the geometry interactively. The rest of the geometry should update accordingly.

So far I can:

  • Use a Raycaster to detect the clicked face
  • Show an ArrowHelper or a TransformControls gizmo at the face center
  • Move a dummy object using TransformControls

But I’m unsure how to dynamically modify the mesh geometry based on the face movement:

  • How can I properly update the face’s vertices along the face normal?
  • How do I ensure connected vertices move in sync to preserve volume (e.g., when moving a side of a box)?
  • Is there a good way to represent and update topology for this kind of editing? (BufferGeometry + indexed faces seems tricky)

Has anyone implemented a similar feature in Three.js?
Any advice, examples, or libraries you’d recommend?

Thanks in advance!

2

I think a common way to do this would be to implement a half-edge structure (three.js does not provide part), and then to keep a mapping to/from vertices in the half-edge and vertices in the THREE.BufferGeometry. When you get a raycaster result you can look up the associated vertex in the half-edge, perform modifications there, and then push the data back into the affected vertices of the BufferGeometry.

If you are working only with solid geometry, you might also look at manifold-3d.

1 Like
3

If you find any ready similar example please share too