title: Cannot set lookAt position for camera with FirstPersonControls.js
body: <pre><code>// 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);
  </code></pre>
  
  <p>I'm creating a demo scene with FirstPersonControls.js for my camera. Everything is good but the lookAt position of the camera, I cannot set up for it. <code>camera.lookAt(0, 0, 0);</code> is not work. How can I handle this? Thanks for reading!<br/><br/>
  For further, Here is full code of my demoscene.
      
      
      
      
      
      
      </p>
  
  <pre><code>&lt;!-- Libraries --&gt;
  &lt;script type="text/javascript" src="js/libs/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/libs/three.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/loaders/BinaryLoader.js"&gt;&lt;/script&gt;
  &lt;!-- Camera control --&gt;
  &lt;script type="text/javascript" src="js/controls/TrackballControls.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/controls/FirstPersonControls.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/controls/FlyControls.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/controls/PointerLockControls.js"&gt;&lt;/script&gt;
  &lt;!-- Event handler --&gt;
  &lt;script type="text/javascript" src="js/KeyboardState.js"&gt;&lt;/script&gt;
  &lt;!-- JS for HTML interface --&gt;
  &lt;script type="text/javascript" src="ajs/index.js"&gt;&lt;/script&gt;
  
  &lt;!-- THREE --&gt;
  &lt;script type="text/javascript"&gt;
  // 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 &lt; 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 &gt; 0) {
              var distance = intersections[0].distance;
              if (distance &gt; 0 &amp;&amp; distance &lt; 10) {
                  controls.isOnObject(true);
              }
          }
      }
  
      // Update camera control
      (controls == null) ? {} : controls.update(delta);
  
      // Update renderer
      renderer.render(scene, camera);
  
      // Loop
      requestAnimationFrame(act);
  }
  &lt;/script&gt;
  
  &lt;!-- Assistant functions --&gt;
  &lt;script type="text/javascript"&gt;
      // 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);
                  };
      })();
  &lt;/script&gt;
  
  &lt;!-- jQuery --&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          // Init drawing
          initWebGL();
  
          // Window resize event
          $(window).resize(function () {
              windowResize();
          });
      });
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="canvas-container-1"&gt;&lt;/div&gt;
  
  &lt;!-- panel --&gt;
  &lt;div id="panel" class="dock"&gt;
      &lt;p class="pull"&gt;&lt;b&gt;Camera&lt;/b&gt;&lt;/p&gt;
  
      &lt;form id="pan" name="pan" method="post"&gt;
          &lt;input id="free-camera" name="camera" type="radio" value="0" checked=""/&gt;
          &lt;label for="free-camera"&gt;Free&lt;/label&gt;
          &lt;br/&gt;
          &lt;input id="trackball-camera" name="camera" type="radio" value="1"/&gt;
          &lt;label for="trackball-camera"&gt;Track Ball&lt;/label&gt;
          &lt;br/&gt;
          &lt;input id="pointer-lock-camera" name="camera" type="radio" value="2"/&gt;
          &lt;label for="pointer-lock-camera"&gt;Pointer Lock&lt;/label&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;!-- instructions --&gt;
  &lt;div id="instructions" class="dock"&gt;
      &lt;p class="pull"&gt;&lt;b&gt;Thông tin&lt;/b&gt;&lt;/p&gt;
  
      &lt;article&gt;
          Đề 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.
      &lt;/article&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>