Three.js相机外观无法正常工作

whitwhoa 发表于 Dev

惠特

我正在尝试使用Vector3更改相机看起来的位置，但是相机会继续观察场景的原点。我不确定为什么这行不通。我所看到的所有示例似乎都非常简单。有任何想法吗？

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="/three.js"></script>
    <script type="text/javascript" src="/MTLLoader.js"></script>
    <script type="text/javascript" src="/OBJLoader.js"></script>

    <script type="text/javascript" src="/stats.js"></script>
    <style>
        body {
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
<script type="text/javascript" src="/World.js"></script>
<script type="text/javascript" src="/Controls.js"></script>
<script type="text/javascript">
    // Initialize our new world object which will 
    //  setup our scene, camera, lights, and renderer.
    var world = new World(true);
    var controls = new Controls();

    // Load the map for this given level. 
    // A reference to every model loaded is saved in world.model[*name_of_file*]
    world.modelLoader('meter_grid');
    world.modelLoader('skybox1');
    world.modelLoader('test_character');

    // Render loop. Important things happens in here.
    (function render() {
        if(world.stats){
            world.stats.update();
        }
        //console.log(JSON.stringify(world.camera.position));
        world.updateRotation(controls.left, controls.right);
        requestAnimationFrame(render);
        world.renderer.render(world.scene, world.camera);
    }());
</script>
<script src="/domevents.js"></script>
</body>
</html>

下面是正在构建场景的世界“类”

// =======================================================
//  The World.
// =======================================================
var World = function(showStats){

    this.currentTime = (+new Date()) / 1000.0;
    this.stats = showStats ? this.initStats() : false;

    // Create scene object, add fog to scene: Fog( hex, near, far )
    this.scene = new THREE.Scene();

    // Create camera object: PerspectiveCamera( fov, aspect, near, far )
    this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
    this.camera.position.x = 0;
    this.camera.position.y = 5;
    this.camera.position.z = 5;

    this.look = new THREE.Vector3(5, 0, -5);
    this.camera.lookAt(this.look);

    this.scene.add(this.camera);

    // Create ambient light
    this.light = new THREE.AmbientLight( 0x444444 );
    this.light.intensity = 5;
    this.scene.add( this.light );

    // Create renderer and bind to dom element
    this.renderer = new THREE.WebGLRenderer();
    this.renderer.setClearColor(0xffffff);
    this.renderer.setPixelRatio(window.devicePixelRatio);
    this.renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(this.renderer.domElement);
    this.rotationSpeed = .02;
};

World.prototype.modelLoader = function(filename){
    var scope = this;
    var mtlLoader = new THREE.MTLLoader();
    mtlLoader.setBaseUrl( '/obj_assets/' );
    mtlLoader.setPath( '/obj_assets/' );
    mtlLoader.load( filename + '.mtl', function( materials ) {
        materials.preload();

        var objLoader = new THREE.OBJLoader();
        objLoader.setMaterials( materials );
        objLoader.setPath( '/obj_assets/' );
        objLoader.load( filename + '.obj', function ( object ) {

            object.name = filename;
            scope.scene.add( object );

            if(filename === 'test_character'){
                scope.moveCharacter(filename, 0, 0);
            }
        });
    }); 
};
World.prototype.render = function(){  
    if(this.stats){
        this.stats.update();
    }
    this.controls.update();
    requestAnimationFrame(this.render);
    this.renderer.render(this.scene, this.camera);
};

World.prototype.initStats = function(){
    var stats = new Stats();
    stats.setMode(0); // 0: fps, 1: ms

    // Align top left
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.left = '0px';
    stats.domElement.style.top = '0px';

    document.body.appendChild(stats.domElement);
    return stats;
};

World.prototype.updateRotation = function(key_left, key_right){
    var x = this.camera.position.x,
        y = this.camera.position.y,
        z = this.camera.position.z;
    if (key_right){ 
        this.camera.position.x = x * Math.cos(this.rotationSpeed) + z * Math.sin(this.rotationSpeed);
        this.camera.position.z = z * Math.cos(this.rotationSpeed) - x * Math.sin(this.rotationSpeed);
    } else if (key_left){
        this.camera.position.x = x * Math.cos(this.rotationSpeed) - z * Math.sin(this.rotationSpeed);
        this.camera.position.z = z * Math.cos(this.rotationSpeed) + x * Math.sin(this.rotationSpeed);
    }
    this.camera.lookAt(this.scene.position);
};
// Move the character from a 2D xy grid perspective
World.prototype.moveCharacter = function(name, x, y){

    this.scene.getObjectByName(name).position.x = x;
    this.scene.getObjectByName(name).position.z = -y;    
};