Looking to create an interactive 3D item that users can rotate with their mouse freely? I experimented with using three quaternions, one for each axis, and then multiplying them together to determine the final position of the item.
// Initializing xQuat, yQuat, zQuat as new instances of THREE.Quaternion()
rotate(e, axis) {
// e.movement represents mouse movement
const dy = e.movementY
switch(axis) {
case 'x':
this.xRot += dy / 100
break;
case 'y':
this.yRot += dy / 100
break;
case 'z':
this.zRot += dy / 100
break;
}
this.xQuat.setFromAxisAngle( new THREE.Vector3(1, 0, 0), this.xRot );
this.yQuat.setFromAxisAngle( new THREE.Vector3(0, 1, 0), this.yRot );
this.zQuat.setFromAxisAngle( new THREE.Vector3(0, 0, 1), this.zRot );
// Where target is a THREE.Mesh()
this.target.quaternion.multiplyQuaternions(this.yQuat, this.xQuat);
this.target.quaternion.multiply(this.zQuat)
}
Despite these calculations, I encountered a challenge where the rotation wasn't independent on each axis—instead, it affected the orientation of the axes themselves along with the item's rotation. My goal is to maintain the axes in place; for instance, when rotating around the y-axis, I aim to spin the item around the global y-axis rather than its local y-axis.