examples/example34.html


<!DOCTYPE html>
<html>
 <head> 
  <title>Example 34 - Load OBJ and MTL model</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 src="assets/libs/TrackballControls.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> 
  <!-- Javascript code that runs our Three.js examples --> 
  <script>
    // once everything is loaded, we run our Three.js stuff.
    $(function () {
      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 trackball controls
      var trackballControls = new THREE.TrackballControls(camera);

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

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


      // add spotlight for the shadows
      var spotLight = new THREE.SpotLight(0xffffff);
      spotLight.position.set(0, 40, 30);
      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 object = event.content;

        var wing2 = object.children[5].children[0];
        var wing1 = object.children[4].children[0];

        wing1.material.alphaTest = 0.5;
        wing1.material.opacity = 0.6;
        wing1.material.transparent = true;

        wing2.material.alphaTest = 0.4;
        wing2.material.opacity = 0.7;
        wing2.material.transparent = true;

        object.scale.set(140, 140, 140);
        mesh = object;
        scene.add(mesh);

        object.rotation.x = 0.2;
        object.rotation.y = -1.3;
      });


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

      render();

      function render() {
        stats.update();
        trackballControls.update();

        // 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>