子对象（相机）相对父对象（宇宙飞船）的旋转

Question

我的experimental project 有两个问题 - （WASDEQ - 控制键和鼠标）

1. 子对象（相机）相对于父对象的旋转。 如何将宇宙飞船相对于相机旋转 180 度？

2. 当我只用鼠标在 Y 轴（鼠标左右移动）旋转宇宙飞船时，它会自动在另一个轴上旋转。

   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

第二个问题并不实际。那是我的粗心。我忘了四元数是用来旋转的。