Drehung eines Kind Objekt (Kamera) relativ übergeordnetes Objekt (Raumschiff)

Question

Ich habe zwei Probleme in meiner experimental project - (WASDEQ - Steuerungstaste und Maus)

1. Rotation eines Kind Objekt (Kamera) relativ übergeordnetes Objekt Wie kann ich das Raumschiff um 180 Grad relativ zur Kamera drehen?

2. Wenn ich das Raumschiff mit der Maus nur die Y-Achse (rechte oder linke Mausbewegung) dreht, dreht es sich automatisch auf der anderen Achse.

   var loader = new THREE.JSONLoader(); 
       loader.load("https://api.myjson.com/bins/2w5m2", function (geom, mater) { 
        var mater = new THREE.MeshNormalMaterial({ color: 0x00ff00 }); 
        var spaceShip = new THREE.Mesh(geom, mater); 
        onLoadCompleted(spaceShip); 
       }); 
   var onLoadCompleted = function (spaceShip) { 
       var scene = new THREE.Scene(); 
       var camera = new THREE.PerspectiveCamera(30, window.innerWidth/window.innerHeight, 0.1, 2000); 
   
       var renderer = new THREE.WebGLRenderer({ antialias: true }); 
       renderer.setSize(window.innerWidth, window.innerHeight); 
       document.body.appendChild(renderer.domElement); 
   
       var geometry = new THREE.BoxGeometry(10, 10, 10); 
       var material = new THREE.MeshNormalMaterial({ color: 0x00ff00 }); 
       var cube = new THREE.Mesh(geometry, material); 
   
       cube.position.z = -300; 
       cube.position.y = 10; 
   
       camera.position.y = 5; 
       camera.position.z = 30; 
   
       scene.add(cube); 
       scene.add(spaceShip); 
       spaceShip.add(camera); 
   
       for (var i = 0; i < 1000; ++i) { 
        var dotGeometry = new THREE.Geometry(); 
        dotGeometry.vertices.push(new THREE.Vector3(Math.random() * (1500 + 1500) - 1500, Math.random() * (1500 + 1500) - 1500, Math.random() * (1500 + 1500) - 1500)); 
        var dotMaterial = new THREE.PointCloudMaterial({ size: 1, sizeAttenuation: true }); 
        var dot = new THREE.Points(dotGeometry, dotMaterial); 
        scene.add(dot); 
       } 
       var cameraControl = new CameraControl(spaceShip); 
   
       var render = function() { 
        cameraControl.update(); 
        requestAnimationFrame(render); 
        renderer.render(scene, camera); 
       }; 
       render(); 
   } 
   
   function CameraControl(object3D) { 
       var rotationQuaternion = new THREE.Quaternion(); 
       var rotationVector = new THREE.Vector3(0, 0, 0); 
       var movingVector = new THREE.Vector3(0, 0, 0); 
       var rotationSpeed = 0.01; 
       var movingSpeed = 1; 
   
       this.update = function() { 
        object3D.translateX(movingVector.x); 
        object3D.translateY(movingVector.y); 
        object3D.translateZ(movingVector.z); 
   
        rotationQuaternion.set(rotationVector.x, rotationVector.y, rotationVector.z, 1).normalize(); 
        object3D.quaternion.multiply(rotationQuaternion); 
        object3D.rotation.setFromQuaternion(object3D.quaternion, object3D.rotation.order); 
       }; 
   
       window.addEventListener('keydown', function (event) { 
        if (event.keyCode == 87) { 
         movingVector.z = -1; 
        } 
        else if (event.keyCode == 83) { 
         movingVector.z = 1; 
        } 
        else if (event.keyCode == 65) { 
         movingVector.x = -1; 
        } 
        else if (event.keyCode == 68) { 
         movingVector.x = 1; 
        } 
        else if (event.keyCode == 81) { 
         movingVector.y = -1; 
        } 
        else if (event.keyCode == 69) { 
         movingVector.y = 1; 
        } 
        movingVector.multiplyScalar(movingSpeed); 
       }); 
       window.addEventListener('keyup', function (event) { 
        if (event.keyCode == 87) { 
         movingVector.z = 0; 
        } 
        else if (event.keyCode == 83) { 
         movingVector.z = 0; 
        } 
        else if (event.keyCode == 65) { 
         movingVector.x = 0; 
        } 
        else if (event.keyCode == 68) { 
         movingVector.x = 0; 
        } 
        else if (event.keyCode == 81) { 
         movingVector.y = 0; 
        } 
        else if (event.keyCode == 69) { 
         movingVector.y = 0; 
        } 
       }); 
   
       window.addEventListener('mousemove', function (event) { 
        rotationVector.y = (window.innerWidth/2 - event.clientX)/(window.innerWidth/2) * rotationSpeed; 
        rotationVector.x = (window.innerHeight/2 - event.clientY)/(window.innerHeight/2) * rotationSpeed; 
       }); 
   } 
   

Answer 1

Das zweite Problem ist nicht unbedingt. das ist meine Sorglosigkeit. Ich habe vergessen, dass Quaternionen für die Rotation verwendet werden.