Rotate around local axis
<p>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.</p>

<p>As you can see in the demo (<a href="http://jsbin.com/yodusufupi" rel="nofollow">http://jsbin.com/yodusufupi</a>) 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: <code>helper.rotation.set(rotX, rotY, 0);</code>.</p>

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

<p>Thx!</p>

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

<pre><code>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 );
</code></pre>