Is there a way to rotate a model without it rolling sideways? While using quaternions on a single axis works well, attempting to rotate on multiple axes causes the model to twist.
The original orientation is 0,0,1 https://i.sstatic.net/F79dK.png
Rotating to 1,0,0 works smoothly. https://i.sstatic.net/M5knz.png
However, rotating to 1,1,0 results in undesired rolling/twisting around the original z-axis. https://i.sstatic.net/Z84is.png
Does anyone have suggestions on how to resolve this issue? It seems necessary to constrain the z-axis while applying the quaternion.
Below is the sample code:
//Box's default direction
let vB = new THREE.Vector3(0, 0, 1);
//Cable direction
let vC = new THREE.Vector3(1, 1, 0).normalize();
//Quaternion calculation
let q = new THREE.Quaternion();
q.setFromUnitVectors(vB, vC);
//Box with connector
const boxG = new THREE.BoxGeometry(4, 8, 10);
const boxM = new THREE.Mesh(boxG, matSS);
const conG = new THREE.CylinderGeometry(0.5, 0.5, 2, 16);
conG.rotateX(Math.PI / 2);
const conM = new THREE.Mesh(conG, matSS);
conM.translateZ(5);
boxM.applyQuaternion(q);
boxM.add(conM);
scene.add(boxM);
//Connecting cable
const cabG = new THREE.CylinderGeometry(0.25, 0.25, 100, 16);
cabG.rotateX(Math.PI / 2);
const cabM = new THREE.Mesh(cabG, matBL);
const cabP = vC.clone().setLength(50);
cabM.applyQuaternion(q);
cabM.position.set(cabP.x,cabP.y,cabP.z);
scene.add(cabM);
I've attempted several approaches such as rotating the Z-axis back, but without success.