examples/example39.html

<!DOCTYPE html>
<html>
 <head> 
  <title>Example 39 - First person camera</title> 
  <style>
    body{
      margin: 0;
      overflow: hidden;
    }

    #stats {  /* Align stats top-left */
      position: absolute;
      left: 0px;
      top: 0px;
    }
  </style> 
  </head>
  <body>
  <!-- JavaScript libraries -->
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
  <script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r67/three.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/stats.js/r11/Stats.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
  <script type="text/javascript" src="assets/libs/OBJLoader.js"></script> 
  <script type="text/javascript" src="assets/libs/MTLLoader.js"></script> 
  <script type="text/javascript" src="assets/libs/OBJMTLLoader.js"></script> 
  <script src="assets/libs/FirstPersonControls.js"></script>
    <script src="assets/libs/chroma.js"></script>
  <!-- Javascript code that runs our Three.js examples --> 
  <script>

    // once everything is loaded, we run our Three.js stuff.
    $(function () {
      var clock = new THREE.Clock();

      var stats = initStats();

      // create a scene, that will hold all our elements such as objects, cameras and lights.
      var scene = new THREE.Scene();

      // create a camera, which defines where we're looking at.
      var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

      // create a render and set the size
      var webGLRenderer = new THREE.WebGLRenderer();
      webGLRenderer.setClearColor(new THREE.Color(0x000, 1.0));
      webGLRenderer.setSize(window.innerWidth, window.innerHeight);

      // position and point the camera to the center of the scene
      camera.position.set(100,10,10);
      camera.lookAt(new THREE.Vector3(0, 0, 0));

      var camControls = new THREE.FirstPersonControls(camera);
      camControls.lookSpeed = 0.4;
      camControls.movementSpeed = 20;
      camControls.activeLook = true;
      camControls.noFly = true;
      camControls.lookVertical = true;
      camControls.constrainVertical = true;
      camControls.verticalMin = 1.0;
      camControls.verticalMax = 2.0;
      camControls.lon = -150;
      camControls.lat = 120;

      var ambientLight = new THREE.AmbientLight(0x383838);
      scene.add(ambientLight);

      // add spotlight for the shadows
      var spotLight = new THREE.SpotLight(0xffffff);
      spotLight.position.set(100, 140, 130);
      spotLight.intensity = 2;
      scene.add(spotLight);

      // add the output of the renderer to the html element
      $('body').append(webGLRenderer.domElement);

      // call the render function
      var step = 0;

      // setup the control gui
      var controls = new function () {};

      var gui = new dat.GUI();
      var mesh;

      var loader = new THREE.OBJMTLLoader();
      loader.addEventListener('load', function (event) {

        var scale = chroma.scale(['red', 'green', 'blue']);
        var object = event.content;
        setRandomColors(object, scale);


        mesh = object;
        scene.add(mesh);
      });

      loader.load(
        'assets/models/city.obj',
        'assets/models/city.mtl',
        {side: THREE.DoubleSide}
      );

      render();

      function setRandomColors(object, scale) {
        var children = object.children;

        if (children && children.length > 0) {
          children.forEach(function (e) {
            setRandomColors(e, scale)
          });
        } else {
          // no children assume contains a mesh
          if (object instanceof THREE.Mesh) {

            object.material.color = new THREE.Color(scale(Math.random()).hex());
            if (object.material.name.indexOf("building") == 0) {
              object.material.emissive = new THREE.Color(0x444444);
              object.material.transparent = true;
              object.material.opacity = 0.8;
            }
          }
        }
      }

      function render() {
        stats.update();
        var delta = clock.getDelta();

        camControls.update(delta);
        webGLRenderer.clear();
        // render using requestAnimationFrame
        requestAnimationFrame(render);
        webGLRenderer.render(scene, camera)
      }

      function initStats() {
        var stats = new Stats();
        stats.setMode(0); // 0: fps, 1: ms
        $('body').append(stats.domElement);
        return stats;
      }
    });
  </script>  
 </body>
</html>