绕局部轴旋转 [英] Rotate around local axis

问题描述

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

I'm trying to implement an object, flying around a position (POI - Point Of Interest) and facing it. when you press WASD, you can change the POI's rotation. A and D -> change y-axis, W and S for the x-axis.

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

As you can see in the demo (http://jsbin.com/yodusufupi) the y-axis rotation is done based on local rotation of the helper object, but the x-axis is calculated in global space. Setting the rotation is done via: helper.rotation.set(rotX, rotY, 0);.

我做错了什么?我想在本地空间中完成两个旋转.

What I'm doing wrong? I want to have both rotations beeing done in local space.

谢谢！

PS:最小工作示例(围绕 Y 的旋转似乎是正确的，而 x 轴是全局计算的)

PS: minimal working example (the rotation around Y seems correct while x-axis is calculated globally)

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

推荐答案

您需要了解欧拉角在three.js 中的工作原理.为此，请参阅此答案.

You need to understand how Euler angles work in three.js. For that, see this answer.

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

For your use case you can use these methods:

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

object.rotateY( angle );

three.js r.77

three.js r.77

这篇关于绕局部轴旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！