Hi,
I am having a hard time rotating a Group that contains GLTF model in place.
The idea is to create a Group like following:
const group = new THREE.Group();
group.matrixAutoUpdate = false;
this.scene.add(group);
Then add a GLTF model into it:
// Load and center the model
const gltf = await loadGLTF('scene.gltf');
gltf.scene.scale.set(0.0010, 0.0010, 0.0010);
const box = new THREE.Box3().setFromObject(gltf.scene );
const center = box.getCenter( new THREE.Vector3() );
gltf.scene.position.x += ( gltf.scene.position.x - center.x );
gltf.scene.position.y += ( gltf.scene.position.y - center.y );
gltf.scene.position.z += ( gltf.scene.position.z - center.z );
gltf.scene.position.z -= 0.5;
group.add(gltf.scene);
When group is created and object added I want to it to be positioned in a predefined position and rotated based on Quaternion in-place. I tried everything and for some reason couldn’t combine these two operations (ThreeJs r143).
My last attempt was following:
// Translate group to the center to rotate it
const trnslate = new THREE.Matrix4().transpose().toArray();
group.matrix.set(...trnslate);
group.updateMatrix();
// Perform rotation
group.setRotationFromQuaternion(estimateResult.rotationQuaternion);
group.updateMatrix();
// Translate rotated group to the new position
const position = new THREE.Vector3(npos[0], npos[1], npos[2]);
const trnslateBack = new THREE.Matrix4().setPosition(position).transpose().toArray();
group.matrix.set(...trnslateBack);
group.updateMatrix();
Rotation works, however, translation doesn’t. I am pretty sure I am missing something very basic, but for some reason I cannot understand what exactly is wrong.
I also tried to update position by passing a new vector to it using group.position.set(npos[0], npos[1], npos[2])
it didn’t work either. Even manually created matrix didn’t work properly.
Whenever I apply rotation, the object just flies around instead of being rotated in place.