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, npos, npos); 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, npos, npos) 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.