Create THREE.Group(), rotate it, and add children back to scene with new positions

Questions
,
1

Hello. I am new in three.js
My scene contains many objects.
I am trying to combine several objects into a group with new THREE.Group().
Then i rotate it:
new TWEEN.Tween(rotationGroup.rotation)
.to({
x: THREE.Math.degToRad(-90)
},1000)
After rotation i want to add groups children back to scene (because i will create new groups with this objects).
scene.add(rotationGroup.children[…])
Problem:
Positions of groups children become the same as at the beginning (before the rotation).
Сan anyone help me?

2

Objects transform (position, rotation, scale) is always related to the parent object, because they are physically inside the groupObject. So we speak about local transform.
Imagin having a terrarium with stones and plants in it. The stones/plants have their orientation and position, but they are bound to the terrarium. If you move or rotate the terrarium, the stones and plants will move/ rotate in the world too.

To solve this, you have to get the world position (basicly the plants relation not to his parent (local) but to the scene (world).

   let position = new THREE.Vector3()
   let direction = new THREE.Vector3()

   groupObject.children.forEach(child => {

       child.getWorldPosition(position)
       child.position.copy(position)

       child.getWorldDirection(direction)
       child.rotation.copy(direction
   })

Or you could just keep them grouped and make a new group

3

After this, all children positions become (0 0 0)

4

Solution:
getWorldQuaternion() to get world rotation
getWorldPosition() to get world position

1 Like