無法爲FirstPersonControls.js的相機設置lookAt位置

Question

// Init a perspective camera 
camera = new THREE.PerspectiveCamera(45, WIDTH/HEIGHT, 0.001, 10000); 

// Init free camera controls for default 
controls = new THREE.FirstPersonControls(camera); 
controls.movementSpeed = 1; 
controls.lookSpeed = 0.1; 

// Add camera to scene 
camera.position.set(3, 3, 3); 
camera.lookAt(0, 0, 0); 
scene.add(camera); 

我正在用FirstPersonControls.js爲我的相機創建演示場景。一切都很好，但相機的外觀，我無法爲它設置。 camera.lookAt(0, 0, 0);不起作用。我該如何處理？謝謝閱讀！

如需更多，這裏是我的demoscene的完整代碼。

<!-- Libraries --> 
<script type="text/javascript" src="js/libs/jquery-1.9.1.min.js"></script> 
<script type="text/javascript" src="js/libs/three.js"></script> 
<script type="text/javascript" src="js/loaders/BinaryLoader.js"></script> 
<!-- Camera control --> 
<script type="text/javascript" src="js/controls/TrackballControls.js"></script> 
<script type="text/javascript" src="js/controls/FirstPersonControls.js"></script> 
<script type="text/javascript" src="js/controls/FlyControls.js"></script> 
<script type="text/javascript" src="js/controls/PointerLockControls.js"></script> 
<!-- Event handler --> 
<script type="text/javascript" src="js/KeyboardState.js"></script> 
<!-- JS for HTML interface --> 
<script type="text/javascript" src="ajs/index.js"></script> 

<!-- THREE --> 
<script type="text/javascript"> 
// Set scene size 
var WIDTH = window.innerWidth, HEIGHT = window.innerHeight; 
// WebGL's object 
var container = null, renderer = null, scene = null, camera = null; 
// Camera object 
var controls = null; 
// Statistic object 
var stats = null; 
// Time 
var clock = new THREE.Clock(); 
// Keyboard 
var keyboard = new KeyboardState(); 
// Target geometry 
var mesh = null; 
// Objects array for handling something (haven't known yet) in PointerLock camera 
var objects = []; 
var ray = null; 

// Initialize WebGL 
function initWebGL() { 
    setupRenderer(); 
    setupScene(); 
    setupCamera(); 
    setupLight(); 
} 

// Initialize renderer 
function setupRenderer() { 
    // Create the canva element 
    renderer = new THREE.WebGLRenderer(); 
    renderer.setClearColor({ 
     clearColor: 0x999999, 
     clearAlpha: 1.0 
    }); 
    renderer.setSize(WIDTH, HEIGHT); 
    // Add the canvas into its container 
    container = $('#canvas-container-1'); 
    container.append(renderer.domElement); 
} 

// Initialize camera 
function setupCamera() { 
    // Init a perspective camera 
    camera = new THREE.PerspectiveCamera(45, WIDTH/HEIGHT, 0.001, 10000); 
    // Init free camera controls for default 
    controls = new THREE.FirstPersonControls(camera); 
    controls.movementSpeed = 1; 
    controls.lookSpeed = 0.1; 
    // Add camera to scene 
    camera.position.set(3, 3, 3); 
    camera.lookAt(new THREE.Vector3(0.0, 0.0, 0.0)); 
    scene.add(camera); 

    // Init camera controls (get the checked radio input value) 
    var chosenCamera = $('input[name=camera]:checked').val(); 

    // What will happen if $('input[name=camera]') value is changed 
    $('input[name=camera]').change(function() { 
     // Reload chosenCamera value 
     chosenCamera = $('input[name=camera]:checked').val(); 

     // Camera controls 
     if (chosenCamera == 0) { // Free 
      controls = new THREE.FirstPersonControls(camera); 
      controls.movementSpeed = 1; 
      controls.lookSpeed = 0.1; 
      // Add camera to scene 
      scene.add(camera); 

     } else if (chosenCamera == 1) { // Track ball 
      controls = new THREE.TrackballControls(camera); 
      // Add camera to scene 
      scene.add(camera); 

     } else if (chosenCamera == 2) { // First person 
      // Add controls 
      controls = new THREE.PointerLockControls(camera); 

      ray = new THREE.Raycaster(); 
      ray.ray.direction.set(0, -1, 0); 

      // Add camera to scene 
      scene.add(controls.getObject()); 

      // Feature detection 
      var havePointerLock = 'pointerLockElement' in document || 
        'mozPointerLockElement' in document || 
        'webkitPointerLockElement' in document; 

      if (havePointerLock) { 
       // Object(s) 
       var element = document.body; 

       // Action for event listener below 
       var pointerlockchange = function (e) { // Action for changes pointerlock 
        if (document.pointerLockElement === element || 
          document.mozPointerLockElement === element || 
          document.webkitPointerLockElement === element) { 
         controls.enable = true; 
        } else { 
         controls.enable = false; 
        } 
       } 

       var pointerlockerror = function (e) { // Action for pointerlock error 
        $('#instructions').html('Error!'); 
       } 

       // Hook pointer lock state change events 
       document.addEventListener('pointerlockchange', pointerlockchange, false); 
       document.addEventListener('mozpointerlockchange', pointerlockchange, false); 
       document.addEventListener('webkitpointerlockchange', pointerlockchange, false); 

       document.addEventListener('pointerlockerror', pointerlockerror, false); 
       document.addEventListener('mozpointerlockerror', pointerlockerror, false); 
       document.addEventListener('webkitpointerlockerror', pointerlockerror, false); 

       // Ask the browser to lock the pointer 
       element.requestPointerLock = element.requestPointerLock || 
         element.mozRequestPointerLock || 
         element.webkitRequestPointerLock; 

       if (/Firefox/i.test(navigator.userAgent)) { 
        var fullscreenchange = function (e) { 
         if (document.webkitFullscreenElement === element || 
           document.mozFullscreenElement === element || 
           document.mozFullScreenElement === element) { // Older API upper case 'S'. 
          document.removeEventListener('fullscreenchange', fullscreenchange); 
          document.removeEventListener('mozfullscreenchange', fullscreenchange); 
          element.requestPointerLock(); 
         } 
        } 

        document.addEventListener('fullscreenchange', fullscreenchange, false); 
        document.addEventListener('mozfullscreenchange', fullscreenchange, false); 

        element.requestFullscreen = requestFullscreen = element.requestFullscreen || 
          element.mozRequestFullscreen || 
          element.mozRequestFullScreen || // Older API upper case 'S'. 
          element.webkitRequestFullscreen; 

        element.requestFullscreen(); 
       } else { 
        element.requestPointerLock(); 
       } 
      } else { 
       $('#instructions').html('Your browser doesn\'t seem to support Pointer Lock API'); 
      } 
     } 
    }); 
} 

// Add lights to the scene 
function setupLight() { 
    var ambientLight = new THREE.AmbientLight(0x404040); // soft white light 
    scene.add(ambientLight); 

    var directionalLight = new THREE.DirectionalLight(0xffffff); 
    directionalLight.position.set(1, 0, 0).normalize(); 
    scene.add(directionalLight); 

    var pointLight = new THREE.PointLight(0xffffff); 
    pointLight.position.set(250, 250, 250); 
    scene.add(pointLight); 
} 

// Initialize scene 
function setupScene() { 
    scene = new THREE.Scene(); 
    render(); 
} 

// Rendering 
function render() { 
    /* ********** ********** ********** ********** ********** ********** ********** ********** ********** ********** 
    Floor texture 
    */ 
    var floorTexture = new THREE.ImageUtils.loadTexture('models/textures/grey-concrete-texture-01.jpg'); 
    floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping; 
    floorTexture.repeat.set(100, 100); 

    // Floor material 
    var floorMaterial = new THREE.MeshBasicMaterial({ 
     map: floorTexture, 
     side: THREE.DoubleSide 
    }); 

    // Floor geometry 
    var floorGeometry = new THREE.PlaneGeometry(200, 200); 

    // Floor 
    var floor = new THREE.Mesh(floorGeometry, floorMaterial); 
    floor.rotation.x = Math.PI/2; 
    floor.position.y = 0; 
    objects.push(floor); 
    scene.add(floor); 


    /* ********** ********** ********** ********** ********** ********** ********** ********** ********** ********** 
    Add sky box 
    */ 
    var r = "models/textures/skybox/sky6/"; 
    var urls = [ 
     r + "px.png", 
     r + "nx.png", 
     r + "py.png", 
     r + "ny.png", 
     r + "pz.png", 
     r + "nz.png" 
    ]; 

    var textureCube = THREE.ImageUtils.loadTextureCube(urls); 
    textureCube.format = THREE.RGBFormat; 

    var shader = THREE.ShaderLib["cube"]; 
    shader.uniforms["tCube"].value = textureCube; 

    var material = new THREE.ShaderMaterial({ 
     fragmentShader: shader.fragmentShader, 
     vertexShader: shader.vertexShader, 
     uniforms: shader.uniforms, 
     depthWrite: false, 
     side: THREE.BackSide 
    }); 

    var skybox = new THREE.Mesh(new THREE.CubeGeometry(7000, 7000, 7000, 1, 1, 1), material); 
    scene.add(skybox); 


    /* ********** ********** ********** ********** ********** ********** ********** ********** ********** ********** 
    Load A1 building 
    */ 
    var building = null; 
    var jsonLoader = new THREE.BinaryLoader(); 
    jsonLoader.load('models/a1/A1.js', function (geometry, materials) { 
     // Init material 
     var faceMaterial = new THREE.MeshFaceMaterial(materials); 
     for (var s = 0; s < materials.length; s++) 
      materials[s].side = THREE.DoubleSide; 

     // Init mesh 
     building = new THREE.Mesh(geometry, faceMaterial); 
     building.scale.set(0.0001, 0.0001, 0.0001); 

     // Add mesh to the scene 
     scene.add(building); 
    }); 


    /* ********** ********** ********** ********** ********** ********** ********** ********** ********** ********** 
    Axis 
    */ 
    scene.add(new THREE.AxisHelper(10)); 

    (function loop() { 
     update(loop); 
    })() 
} 

// Update 
function update(act) { 
    // Variables for calculation of animation 
    var delta = clock.getDelta(); // milliseconds 

    // If the chosen camera is PointerLock 
    if ($('input[name=camera]:checked').val() == 2) { 
     controls.isOnObject(false); 
     ray.ray.origin.copy(controls.getObject().position); 
     ray.ray.origin.y -= 10; 
     var intersections = ray.intersectObjects(objects); 
     if (intersections.length > 0) { 
      var distance = intersections[0].distance; 
      if (distance > 0 && distance < 10) { 
       controls.isOnObject(true); 
      } 
     } 
    } 

    // Update camera control 
    (controls == null) ? {} : controls.update(delta); 

    // Update renderer 
    renderer.render(scene, camera); 

    // Loop 
    requestAnimationFrame(act); 
} 
</script> 

<!-- Assistant functions --> 
<script type="text/javascript"> 
    // Resize canvas 
    function windowResize() { 
     camera.aspect = window.innerWidth/window.innerHeight; 
     camera.updateProjectionMatrix(); 
     renderer.setSize(window.innerWidth, window.innerHeight); 
    } 

    // Animation loop 
    window.requestAnimFrame = (function() { 
     return window.requestAnimationFrame || 
       window.webkitRequestAnimationFrame || 
       window.mozRequestAnimationFrame || 
       window.oRequestAnimationFrame || 
       window.msRequestAnimationFrame || 
       function (callback) { 
        window.setTimeout(callback, 1000/60); 
       }; 
    })(); 
</script> 

<!-- jQuery --> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     // Init drawing 
     initWebGL(); 

     // Window resize event 
     $(window).resize(function() { 
      windowResize(); 
     }); 
    }); 
</script> 
</head> 

<body> 
<div id="canvas-container-1"></div> 

<!-- panel --> 
<div id="panel" class="dock"> 
    <p class="pull"><b>Camera</b></p> 

    <form id="pan" name="pan" method="post"> 
     <input id="free-camera" name="camera" type="radio" value="0" checked=""/> 
     <label for="free-camera">Free</label> 
     <br/> 
     <input id="trackball-camera" name="camera" type="radio" value="1"/> 
     <label for="trackball-camera">Track Ball</label> 
     <br/> 
     <input id="pointer-lock-camera" name="camera" type="radio" value="2"/> 
     <label for="pointer-lock-camera">Pointer Lock</label> 
    </form> 
</div> 

<!-- instructions --> 
<div id="instructions" class="dock"> 
    <p class="pull"><b>Thông tin</b></p> 

    <article> 
     Đề tài nghiên cứu khoa học của nhóm sinh viên lớp ĐH Hệ Thống Thông Tin K5, trường Đại Học Công Nghiệp Hà Nội. 
    </article> 
</div> 
</body> 
</html> 

Answer 1

camera.lookAt (new THREE.Vector3 (0.0, 0.0, 0.0)); 

Answer 2

你可以用

controls.lon = degrees; 
controls.lat = someOtherDegrees;