javascript - 将相机 W.R.T 3d 对象放置在 Three.js 中

Question

我有一个可以移动和旋转的物体，我希望相机在它后面保持一定的距离。需要明确的是，我正在画一架飞机，并希望相机始终看着它的后方。 (除非用户拖动鼠标，例如在飞机飞行时查看飞机的顶部)。

假设我已经设置了飞机的位置和旋转(THREE.Object3D 的实例):

airplane.position = {x: 1, y:2, z: 3};
airplane.rotation = {x: Math.PI/4, y:1.2, z: 0};

假设，当旋转和位置为 (0,0,0) 时，摄像机位于 (5, 0, 0)(即飞机中心后面 5 个单位)，找到将相机设置在的位置向量？

谢谢

抱歉，代码杂乱无章，我正在把它砍死。我会为它制作一个 jsfiddle，但没有服务器来托管 Three.js...

$(function(){
    var camera1, camera2, scene, renderer, viewPort;
    var objectManager;
    var views = [];
    var vpWidth, vpHeight;
    init();
    animate();
    updateSize();
    function updateSize(){
        vpWidth = viewPort.innerWidth();
        vpHeight = viewPort.innerHeight();
    }
    function init() {
        viewPort = $('#viewPort');
        objectManager = new ObjectManager();

        views[0] = new View(viewPort, objectManager);
        var view = views[0];
        view.fov = 20;
        view.proportions.height = 0.5;
        view.proportions.bottom = 0.5;
        view.init();
        views[1] = new View(viewPort, objectManager);
        var view = views[1];
        view.fov = 10;
        view.proportions.height = 0.5;
        view.init();
        view.updateCamera = function(){

            //-----------------------------------------------------
            // when the user drags the mouse, (not yet implemented)
            // the following camera position numbers would change
            // so that he could view for example the top of the
            // airplane as it flies
            //-----------------------------------------------------
            this.camera.position.set( 5,5,5 );

            //-----------------------------------------------------
            // This line does not work as expected: the airplane
            // does not stay in the center of the view but follows
            // some sort of curved path with respect to the camera
            //-----------------------------------------------------
            this.camera.lookAt(objectManager.airplane.position);

            this.camera.updateProjectionMatrix();
        };
        scene = new THREE.Scene();
        objectManager.addTo(scene);

        objectManager.airplane.add(views[1].camera);

        //-----------------------------------------------
        // The following two lines *do* work correctly //
        //-----------------------------------------------
        views[1].camera.position.set( 0,0,5 );
        views[1].camera.lookAt(objectManager.airplane.position);

        var ambientLight = new THREE.AmbientLight(0x808080);
        scene.add(ambientLight);        

        var pointLight = new THREE.PointLight(0x808080);
        pointLight.position = {x: 100, y: 100, z: 100};
        scene.add(pointLight);      

        renderer = new THREE.WebGLRenderer();
        renderer.setClearColorHex(0x000000, 1);
        renderer.setSize( viewPort.innerWidth(), viewPort.innerHeight() );
        viewPort.get(0).appendChild(renderer.domElement);
    }

    function animate() {
        requestAnimationFrame( animate );
        render();
    }
    function render() {
        objectManager.tick();
        var view;
        for (var i in views){
            view = views[i];
            view.updateCamera();
            pixels = view.pixels;
            renderer.setViewport(pixels.left, pixels.bottom, pixels.width, pixels.height);
            renderer.setScissor(pixels.left, pixels.bottom, pixels.width, pixels.height);
            renderer.enableScissorTest(true);
            renderer.render( scene, view.camera );
        }
    }
});
function View(vp, om){
    this.objectManager = om;
    this.viewPort = vp;
    this.fov = 30;
    this.proportions = { left: 0, bottom: 0, height: 1, width: 1 };
    this.pixels = { left: 0, bottom: 0, height: 0, width: 0, aspect: 0 };
    this.aspect;
    this.init = function(){
        this.camera = new THREE.PerspectiveCamera( 
                this.fov, 
                this.viewPort.innerWidth() / this.viewPort.innerHeight(), 
                0.1, 10000 
        );
        this.pixels.left = Math.floor(this.proportions.left * this.viewPort.innerWidth()); 
        this.pixels.width = Math.floor(this.proportions.width * this.viewPort.innerWidth()); 
        this.pixels.bottom = Math.floor(this.proportions.bottom * this.viewPort.innerHeight()); 
        this.pixels.height = Math.floor(this.proportions.height * this.viewPort.innerHeight()); 
        this.pixels.aspect = this.pixels.width / this.pixels.height;
        this.camera.position.y = 0;
        this.camera.position.z = 10;
        this.camera.aspect = this.pixels.aspect;
        this.camera.updateProjectionMatrix();
    };
    this.updateCamera = function(){};
}

function newCube(dims, pos, cols, colAss){
    var mesh;
    var geometry;
    var materials = [];
    geometry = new THREE.CubeGeometry( dims.x, dims.y, dims.z );
    for (var i in cols){
        materials[i] = new THREE.MeshLambertMaterial( { color: cols[i], ambient: cols[i], overdraw: true } );
    }
    geometry.materials = materials;
    for (var i in colAss){
        geometry.faces[i].materialIndex = colAss[i];
    }
    mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
    mesh.position = pos;
    return mesh;
}
function ObjectManager(){
    this.airplane;
    var fuselage;
    var tail;
    var grid;
    this.addTo = function(scene){
        this.airplane = new THREE.Object3D();
        fuselage = newCube(
                {x: 1, y: 0.1, z: 0.1}, 
                {x: 0, y: 0, z: 0},
                [0xffff00, 0x808000, 0x0000ff, 0xff00000, 0xffffff, 0x808080],
                [0, 1, 2, 3, 4, 5]
        );
        this.airplane.add(fuselage);
        tail = newCube(
                {x: 0.15, y: 0.2, z: 0.05}, 
                {x: 0.5, y: 0.199, z: 0},
                [0xffff00, 0x808000, 0x0000ff, 0xff00000, 0xffffff, 0x808080],
                [0, 1, 2, 3, 4, 5]
        );
        this.airplane.add(tail);
        scene.add( this.airplane );

        grid = new THREE.Object3D();

        var geometry = new THREE.Geometry();
        geometry.vertices.push(new THREE.Vector3( - 200, 0, 0 ) );
        geometry.vertices.push(new THREE.Vector3( 200, 0, 0 ) );

        linesMaterial = new THREE.LineBasicMaterial( { color: 0x00ff00, opacity: 1, linewidth: .1 } );

        for ( var i = 0; i <= 200; i ++ ) {

            var line = new THREE.Line( geometry, linesMaterial );
            line.position.z = ( i * 2 ) - 200;
            grid.add( line );

            var line = new THREE.Line( geometry, linesMaterial );
            line.position.x = ( i * 2 ) - 200;
            line.rotation.y = 90 * Math.PI / 180;
            grid.add( line );
        }       
        scene.add( grid );

    };
    this.tick = function(){
        this.airplane.rotation.x += 0.005;
        this.airplane.rotation.y += 0.01;
        this.airplane.position.x += 0.01;
    };
};

Answer 1

将相机添加为飞机的子级。

airplane.add( camera );
camera.position.set( 5, 0, 0 );
camera.lookAt( new THREE.Vector3( 0, 0, 0 ) );

现在，当您旋转/移动飞机时，相机将自动跟随。