Javascript Three.js |围绕场景旋转摄影机-四元数和（可能）万向节锁

我正在使用three.js中的范围滑块围绕场景的x轴和y轴旋转相机，但遇到了一个无法解决的问题。Y轴的工作原理就像一个符咒，但当在X轴上旋转时，会出现奇怪的行为，这（我想）是由万向节锁引起的。为了解决这个问题，我尝试实现四元数（如下所示），但它并没有真正的帮助。我尝试过的事情：

• 使用球坐标。问题仍然存在

• 轴心点。工作得很好，但我希望滑块能够像缩放滑块（下面的小提琴）一样使用轨道控件-在使用鼠标旋转后更改其值，这样我就不想使用枢轴点，因为它不会影响控件。getPolar/AzimutHandle（）

• 通过以下方式将旋转应用于摄影机矩阵：

camera.applyMatrix4（新的三个.Matrix4（）.makeRotationAxis（新的三个.Vector3（1,0,0）.normalize（），angle））

，但没有成功。
更重要的是，该应用程序必须使用OrbitControls，但当相机通过滑块旋转时，使用OrbitControls进行操作是随机的。极有可能包含错误的代码部分：

//angle in X before rotating
xCurrentAngle = controls.getPolarAngle();

//angle set by user in slider
xAngleToGet = xRotSlider.value;

//angle between those values
diffX = Math.abs(xAngleToGet - xCurrentAngle);

//check direction of rotation
(xAngleToGet < xCurrentAngle) ? diffX = -diffX: diffX;

//trying to rotate camera by applying quaternion
//in Y axis works well
camera.position.applyQuaternion(new THREE.Quaternion().setFromAxisAngle(
    new THREE.Vector3(1, 0, 0).normalize(), diffX
));
camera.up.applyQuaternion(new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(1, 0, 0).normalize(), diffX));

controls.update();
camera.lookAt(scene.position);

//旋转前以X为单位的角度
xcurrtangle=controls.getPolarAngle（）；
//用户在滑块中设置的角度
xAngleToGet=xRotSlider.value；
//这些值之间的夹角
diffX=Math.abs（xAngleToGet-xcurrengure）；
//检查旋转方向
（xAngleToGet

完整的代码可以在下面的fiddle中访问。
希望有人能帮助我，我已经为这个问题挣扎了一段时间了。提前感谢您的帮助！
//angle in X before rotating
xCurrentAngle = controls.getPolarAngle();

//angle set by user in slider
xAngleToGet = xRotSlider.value;

//angle between those values
diffX = Math.abs(xAngleToGet - xCurrentAngle);

//check direction of rotation
(xAngleToGet < xCurrentAngle) ? diffX = -diffX: diffX;

//trying to rotate camera by applying quaternion
//in Y axis works well
camera.position.applyQuaternion(new THREE.Quaternion().setFromAxisAngle(
    new THREE.Vector3(1, 0, 0).normalize(), diffX
));
camera.up.applyQuaternion(new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(1, 0, 0).normalize(), diffX));

controls.update();
camera.lookAt(scene.position);