1 ThreeJS摄像机绕X轴、绕Y轴、绕Z轴旋转指定角度

在threejs中，如果我们想要摄像机绕某一个世界坐标轴旋转，比如绕Y轴旋转。我尝试过以下的方法

  • camera.rotateY(radian)
  • camera.rotateOnWorldAxis(new THREE.Vector3(0,1,0),radian);

这两个方法都是没有效果的。

其实要想摄像机绕轴旋转本质上是在改变摄像机的坐标，所以我们使用three.js的四元数，从头构造一个绕轴旋转的四元数然后对摄像机的坐标进行变换，这样就可以达到旋转摄像机的目的。

1.1 摄像机绕X轴旋转

var x_axis = new THREE.Vector3( 1, 0, 0 );
var quaternion = new THREE.Quaternion();
camera.position.applyQuaternion(quaternion.setFromAxisAngle(x_axis, radian));

1.2 摄像机绕Y轴旋转

var y_axis = new THREE.Vector3( 0, 1, 0 );
var quaternion = new THREE.Quaternion();
camera.position.applyQuaternion(quaternion.setFromAxisAngle(y_axis, radian));

1.3 摄像机绕Z轴旋转

var z_axis = new THREE.Vector3( 0, 0, 1 );
var quaternion = new THREE.Quaternion();
camera.position.applyQuaternion(quaternion.setFromAxisAngle(z_axis, radian));

参考链接