CODEWITHSUNDEEP
typescriptthree.js
werwuifi
werwuifi

Reputation: 409

threejs move multiple objects

I have a threejs scene with multiple objects. When I select one and move across the screen it works, if I select > 1 all objects are put on the same position as object 1. They do however need to stay where they are. Here is some code:

translateObjectTo(absX, absY, absZ) {
    this.selectedObjects.forEach((selection) => {
        if (absX !== null) {
            selection.translateX(absX - selection.position.x);
        }
        ...
    });
}

If I write selection.translateX(absX); it works but with a wrong value of course

Upvotes: 0

Views: 1502

Answers (1)

TheJim01
TheJim01

Reputation: 8896

Object3D.translateX (and the other translate methods) is additive. This means if your X value is already 5, and you call myMesh.translateX(5), your new myMesh.position.x will be 10.

To this end, you want to calculate the difference between the dragged object's original position.x and its new position.x, then apply that different to all the other objects.

Here's some code/pseudo-code as a very loose example. If you want this to happen as you're dragging, you'll need to compute the difference for each frame (or however often you intend to update).

// start dragging
originalPosition.copy(dragObject.position)

// drag is done (or you're ready to update)
let xDiff = originalPosition.x - dragObject.position.x

// apply this difference to all selected objects (except the dragged one)
selectedObjects.forEach(function(obj){
  if(obj.id !== dragObject.id){
    obj.translateX(xDiff)
  }
})

Upvotes: 1

Related Questions