I'm currently working on a project where I need to implement an object that can fly around a specific point of interest (POI) and always face it. The goal is to allow the user to change the rotation of the POI by using the keys WASD. Pressing A and D should rotate the object along the y-axis, while W and S should adjust the rotation along the x-axis.
In the provided demo (http://jsbin.com/yodusufupi), you'll notice that the y-axis rotation is based on the local rotation of the helper object, while the x-axis rotation is calculated in global space. The rotation is set using the following code:
helper.rotation.set(rotX, rotY, 0);I'm encountering an issue where only one axis rotation is happening in local space. Can anyone offer some guidance on how to make both rotations occur in local space?
Thank you in advance!
PS: Below is a minimal example illustrating the problem (where the y-axis rotation appears correct but the x-axis rotation 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);