3

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.

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.

Thx!

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 );
Simon T
  • 59
  • 1
  • 6

1 Answers1

5

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

Community
  • 1
  • 1
WestLangley
  • 102,557
  • 10
  • 276
  • 276
  • many thanks to that! It was removed in58 I guess and implemented again in 72 but the docu was not updated: http://threejs.org/docs/#Reference/Core/Object3D – Simon T Jun 06 '16 at 13:48