绕本地轴旋转

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 );

- Simon T

Answer 1

你需要了解在three.js中欧拉角的工作原理。请参考此答案。

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

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

object.rotateY( angle );

three.js r.77

- WestLangley

---

非常感谢！我猜在58版本中它被移除了，但在72版本中又重新实现了，但文档没有更新：http://threejs.org/docs/#Reference/Core/Object3D - Simon T