Um die lokale Achse rotieren

Question

Ich versuche ein Objekt zu implementieren, fliege um eine Position (POI - Point of Interest) herum und schaue ihm gegenüber. Wenn Sie WASD drücken, können Sie die Drehung des POIs ändern. A und D -> ändern y-Achse, W und S für die x-Achse.

Wie Sie in der Demo sehen können (http://jsbin.com/yodusufupi), wird die Y-Achsenrotation basierend auf der lokalen Rotation des Hilfsobjekts durchgeführt, aber die X-Achse wird im globalen Raum berechnet. Die Einstellung der Drehung erfolgt über: helper.rotation.set(rotX, rotY, 0);.

Was mache ich falsch? Ich möchte beide Rotationen im lokalen Raum machen lassen.

Thx!

PS: minimales Arbeitsbeispiel (die Drehung um Y scheint richtig, während x-Achse global berechnet wird)

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

Sie müssen verstehen, wie Euler Arbeit in three.js Winkel. Siehe hierzu this answer.

Für Ihren Anwendungsfall können Sie diese Methoden verwenden:

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

object.rotateY(angle); 

three.js r.77