Question

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

子对象（相机）相对父对象的旋转。如何相对于相机以180度旋转飞船？

当我用鼠标只旋转宇宙飞船的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

第二个问题不是实际问题。那是我的粗心大意。我忘记了四元数用于旋转。

子对象（相机）相对父对象（太空船）的旋转

1 个答案: