绕局部轴旋转

Question

我正在尝试实现一个对象，围绕一个位置（POI - 兴趣点）飞行并面向它。当您按 WASD 时，您可以更改 POI 的旋转。A 和 D -> 更改 y 轴，W 和 S 更改 x 轴。

正如您在演示 ( http://jsbin.com/yodusufupi ) 中看到的，y 轴旋转是基于辅助对象的局部旋转完成的，但 x 轴是在全局空间中计算的。设置旋转是通过以下方式完成的：helper.rotation.set(rotX, rotY, 0);。

我做错了什么？我希望这两个旋转都在本地空间中完成。

谢谢！

PS：最小工作示例（绕 Y 的旋转似乎是正确的，而 x 轴是全局计算的）

var scene = new THREE.Scene();

var DEG_2_RAD = Math.PI / 180;
var rotX = -45 * DEG_2_RAD;
var rotY = 45 * DEG_2_RAD;

var helper = new THREE.AxisHelper(2);
var cam = new THREE.AxisHelper(1);
helper.add(cam);
scene.add(helper);

cam.translateZ(4);

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 10;
camera.position.y = 10;
camera.lookAt(new THREE.Vector3(0, 0, 0));

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild( renderer.domElement );

helper.rotation.set(rotX, rotY, 0);
renderer.render( scene, camera );

Answer 1

您需要了解欧拉角在 Three.js 中如何工作。为此，请参阅此答案。

对于您的用例，您可以使用以下方法：

object.rotateX( angle ); // angle is in radians

object.rotateY( angle );

三.js r.77