How does threejs editor make sure that bounding box gets dragged with the object when dragged using TransformControls?

Questions
,
1

I want to know how is threejs editor making sure that the bounding-box gets dragged with the object when dragging using TransformControls? When I drag the object in my scene with bounding-box, only the object gets dragged and the box remains at the same position. I want to replicate what the editor does when dragging using TransformControls. How can I achieve it?

This is what I am doing for every object in the scene.

createBoundingBox(object) {
var box = new THREE.BoxHelper( object, 0xffff00 );
this.scene.add(box)
}
2

The editor recomputes the selection box when TransfromControls fires the change event:

2 Likes
3

Thanks! It’s exactly what I was looking for.

4

@Mugen87 When a group is created in the editor, do we follow the same path as above or not?

Because when creating a group, currently, and attaching it to TransformControls it takes the last added object from the group and attaches TransformControls to it. What I want is to not add TransformControls but I should be able to move the whole group when set from the right pane where you can control the rotation/scale/position?

Here’s what I am doing:

  • create a group of meshes
  • attaching TransformControls to it using THREE.TransformControls.attach()
  • in the event listener of ‘change’, I am setting the box as above for the group that I have received.

Here’s what is happening but not what I want:

  • Whenever a group is attached to TransformControls, TransformControls gets attached to the last pushed mesh in the group and all the other meshes from the group gets removed from the scene.

What I want to achieve:

  • Create a bounding box as the editor and to be able to move/rotate using controls from GUI as is done in the editor?

Can you pinpoint me the code how it is being done for a group, if it is being done in a different way when compared to single mesh objects?