fly camera

This example is almost entirely the same as the last one, but it adds a camera that can fly under user control. The controls for the camera include dragging the left mouse button for rotation and the WASD keys for forward and lateral movement. Q and E control roll.

The camera is moved by putting it under the control of a FlyControls object. Note that there is nothing special about the camera; any other object could be made to fly in the same way. The following lines create and initialize this controller.

var control = new THREE.FlyControls(camera,mycanvas);

creates the FlyControls object.

control.dragToLook = true;

requires the mouse button to remain down in order to steer with the mouse.

control.movementSpeed = 4;
control.rollSpeed = 0.5;

controls the responsiveness of the movement.

The controller needs to be able to move the camera to its current position before rendering each frame. This is accomplished by invoking the update function of the controller before each frame.

1-2-three
example 2: fly camera

<!DOCTYPE html>
<html>
<head>
<title>example 2: fly camera</title>
<script type="text/javascript" src="js/three/three.js"></script>
<script type="text/javascript" src="js/three/examples/js/controls/FlyControls.js"></script>
<script type="text/javascript">

function init() {  
  var canv = document.getElementsByTagName("canvas")[0];
  var w = canv.clientWidth;
  var h = canv.clientHeight;

var renderer = new THREE.WebGLRenderer({canvas:canv});
  renderer.setSize( w, h );
  renderer.setClearColor( new THREE.Color(0xeeeeee), 1 );

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(
      15,     // Field of view
      w / h,  // Aspect ratio
      0.1,    // Near
      10000   // Far
  );
  scene.add(camera);
  
  // Camera looks toward negative z with y up
  camera.position.set( 5, 5, 100 );
  
  var control = new THREE.FlyControls(camera,canv);
  control.dragToLook = true;
  control.movementSpeed = 5;
  control.rollSpeed = 0.5;

var cube = new THREE.Mesh(
      new THREE.CubeGeometry( 5, 5, 5 ),
      new THREE.MeshLambertMaterial( { color: 0xFF0000 } )
  );
  scene.add( cube );

var light = new THREE.PointLight( 0xFFFF00 );
  light.position.set( 10, 0, 10 );
  scene.add( light );
  
  var clock = new THREE.Clock();
  
  var animate = function() {
    var dt = clock.getDelta();
    control.update(dt);
    renderer.render(scene,camera);
    requestAnimationFrame(animate);
  };

requestAnimationFrame(animate);
}
  
window.onload = init;
window.onresize = init;
</script>
</head>
<body><canvas style="width:100%;height:95%;border:1px gray solid;"></body>
</html>