javascript - 绕局部轴旋转

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

您需要了解欧拉 Angular 在 three.js 中的工作原理。为此，请参阅 this answer .

对于您的用例，您可以使用这些方法:

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

object.rotateY( angle );

three.js r.77