How to group a set of meshes and drag all of the meshes together?

I am able to drag and rotate the meshes individually using TransformControls but now I am trying to group together a set of meshes and then drag/rotate the group altogether. Is it possible to drag a group with three.js - as what I have researched till now is that raycaster looks for a single mesh when raycasting and not the group. I don’t want to merge the meshes into one single mesh and drag them as I am able to on one mesh individually.

What I am looking for:

  • To rotate/drag a group of meshes using TrasformControls or any other controller

What I have working:

  • Able to rotate/drag a single mesh in the scene using TrasformControls

No, TransformControls or DragControls only allow the transformation of individual objects.

You can still merge your meshes internally and use the result just for interaction. An other option is to add your objects into a temporary instance of THREE.Group and transform the group instead. In both cases, you have to apply the final transformation of the temporary objects to the individual 3D objects when the interaction is done.

An other option is to add your objects into a temporary instance of THREE.Group

So, is it possible to drag a group containing meshes?

In both cases, you have to apply the final transformation of the temporary objects to the individual 3D objects when the interaction is done.

Why is this required to be done on the temorary group object and then apply the transformation on all the 3d objects when you can drag the group as one entity?

No, but transforming works (see editor). Sorry if that was not clear from my previous post.

Because you would remove the group after the interaction. Applying the transformation ensures that you do not lose it.

No, but transforming works

What do you mean when you say transforming works - is it scaling, rotation value changes? How are transformation and drag different?

You can still merge your meshes internally and use the result just for interaction

Merging meshes internally will have issues with material because THREE.mergeBufferGeometries merges only the geometries and not different materials - if I am not wrong. Correct me if I am wrong.

What I want to achieve is:

  • There are meshes in the scene with its own material
  • User will select multiple meshes in the scene
  • Once selected, he will drag/rotate the group and the drag/rotate event should get rendered to the screen
  • Now, he will unselect the group and repeat the process if he/she wants
  • he will drag/rotate the group and the drag/rotate event should get rendered to the screen

This is what is creating bottle-neck for me. How can I achieve this with threejs, is it possible?

https://github.com/mrdoob/three.js/issues/6336 - Someone had raise a similar request and
https://github.com/arodic/three.js-controls this guy has this repo which looks like handles the same.

How does https://www.homestyler.com/floorplan/?assetId=abba5302-59b0-4a6f-94a4-2476209b1738 handle the same then?

I mean you can select a group in the editor (via the outline menu) and then transform it via TransformControls.

BTW: Sorry but I realize now that you don’t want to use DragControls at all^^. In most cases when people talk about “dragging” an object, they refer to DragControls.

I was able to create a group of assets in the editor but have not been able to use TransformControls on it the same way as I am able to on a single mesh - as in, a bounding box do surround the group but I am not able to drag/rotate the group together using TransformControls.

Here is what I have done:

  • Loaded a scene with meshes
  • Created a group in the editor
  • Drag-and-drop the meshes from the scene in the group
  • Bounding box appears around the group
  • The group is not getting dragged/rotated

Can the group be dragged using TransformControls the same way as the individual mesh in the scene once grouped?

Hey,

Were you able to apply transform controls for multiple meshes?

if not does anyone has solution for the same?

Thanks in advance.