下面的脚本不能正常工作。 (它只需要 jquery 和 three.js 来运行)。麻烦的是这两行:

// change the view so looking at the top of the airplane
views[1].camera.position.set( 0,5,0 );
views[1].camera.lookAt(objectManager.airplane.position);

奇怪的是，如果这两行被注释掉，可以看出下面两行类似的前面的行确实按预期运行:

views[1].camera.lookAt(objectManager.airplane.position);

和

view.camera.position.set( 5,0,0 );

出于某种原因，对 camera.lookAt 的调用似乎只在第一次有效。之后，相机不再跟随飞机物体。如果有人能找出我做错了什么，我将不胜感激!

完整的脚本如下。

谢谢

$(function(){
    var scene, renderer, viewPort, objectManager, views;

    init();
    animate();

    function init() {
        viewPort = $('body');

        scene = new THREE.Scene();

        // construct the two cameras
        initialiseViews();

        // construct airplane, lights and floor grid
        objectManager = new ObjectManager();
        objectManager.construct();
        objectManager.addToScene(scene);

        // make the second camera's position
        // stay fixed relative to the airplane
        objectManager.airplane.add(views[1].camera);

        // make the second camera stay looking
        // at the airplane
        views[1].camera.lookAt(objectManager.airplane.position);

        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();
        for (var i in views){
            views[i].render(scene, renderer);
        }
    }
    function initialiseViews(){
        views = [];

        // ----------------------------------------------------
        // Create the first view, static with respect to ground
        // ----------------------------------------------------
        views[0] = new View(viewPort, objectManager, scene);
        var view = views[0];
        view.fov = 40;
        view.proportions.height = 0.5;
        view.proportions.bottom = 0.5;
        view.init();
        view.camera.position.y = 1;
        view.camera.position.z = 4;

        // ----------------------------------------------------
        // Create the second view, which follows the airplane
        // ----------------------------------------------------

        views[1] = new View(viewPort, objectManager, scene);
        var view = views[1];

        view.fov = 20;
        view.proportions.height = 0.5;
        view.init();

        // set the initial position of the camera
        // with respect to the airplane. Views from behind
        view.camera.position.set( 5,0,0 );

        view.updateCamera = function(){

            // change the view so looking at the top of the airplane
            views[1].camera.position.set( 0,5,0 );
            views[1].camera.lookAt(objectManager.airplane.position);

            views[1].camera.updateProjectionMatrix();
        };
    }
});
function View(viewport, om, scene){
    this.scene = scene;
    this.camera;
    this.objectManager = om;
    this.viewPort = viewport;
    this.fov = 30;
    // default: full width and height
    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.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.makeCamera();
    };
    this.makeCamera = function(){
        this.camera = new THREE.PerspectiveCamera( 
                this.fov, 
                this.pixels.aspect, 
                0.1, 10000 
        );
        this.camera.updateProjectionMatrix();
        this.scene.add(this.camera);
    };
    this.render = function(scene, renderer){
        this.updateCamera();
        pixels = this.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, this.camera );
    };
    this.updateCamera = function(){};
}

function ObjectManager(){
    // manages all visible 3d objects (including lights)
    this.airplane;
    var grid;
    var ambientLight;
    var pointLight;
    this.construct = function(){
        this.constructAirplane();
        this.constructLights();
        this.constructFloorGrid();
    };
    this.constructAirplane = function(){
        this.airplane = new THREE.Object3D();
        var 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);
        var tail = newCube(
                {x: 0.15, y: 0.2, z: 0.03}, 
                {x: 0.5, y: 0.199, z: 0},
                [0xffff00, 0x808000, 0x0000ff, 0xff00000, 0xffffff, 0x808080],
                [0, 1, 2, 3, 4, 5]
        );
        this.airplane.add(tail);
        var wings = newCube(
                {x: 0.3, y: 0.05, z: 1},    
                {x: -0.05, y: 0, z: 0},
                [0xffff00, 0x808000, 0x0000ff, 0xff00000, 0xffffff, 0x808080],
                [0, 1, 2, 3, 4, 5]
        );
        this.airplane.add(wings);
    };
    this.constructLights = function(){
        ambientLight = new THREE.AmbientLight(0x808080);
        pointLight = new THREE.PointLight(0x808080);
        pointLight.position = {x: 100, y: 100, z: 100};
    };
    this.constructFloorGrid = function(){
        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 );
        }       
    };
    this.addToScene = function(scene){
        scene.add( this.airplane );
        scene.add( grid );
        scene.add( ambientLight );
        scene.add( pointLight );
    };
    this.tick = function(){
        this.airplane.rotation.x += 0.005;
        this.airplane.rotation.y += 0.01;
        this.airplane.position.x -= 0.05;
    };
};

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;
}

最佳答案

你需要这样做:

views[1].camera.position.set( 0, 5, 0 );
views[1].camera.lookAt( new THREE.Vector3() );

不是这个:

views[1].camera.position.set( 0, 5, 0 );
views[1].camera.lookAt( objectManager.airplane.position );

你的相机是飞机的 child 。它需要在其本地坐标系中查看 ( 0, 0, 0 ) —— 而不是飞机在世界空间中的 位置。

您不必调用 updateProjectionMatrix()。复制 three.js 示例。

关于javascript - THREE.js:渲染后调用 lookAt 方法不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14772212/