Question

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

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

我做错了什么？我希望在当地空间完成两次轮换。

THX！

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

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

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

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

object.rotateY( angle );

three.js r.77

围绕局部轴旋转

1 个答案: