title: load 3d model example using three js
body: <p>I have code which shows a button that says: "Import 3d model". There I wish to let the user select a 3ds/max/gsm 3d model to load and seen on the screen.</p>
  
  <p>My problem is that i just don't know how to do that, can some one write a simple example of how to do that? i'm kind of stuck..
  thanks for any help :)</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;script src="js/three.js"&gt;&lt;/script&gt;
      &lt;script src="js/jquery-2.0.3.min.js"&gt;&lt;/script&gt;
      &lt;link href="CSS/maincss.css" rel="stylesheet" /&gt;
      &lt;title&gt;PREZI&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;center&gt;
      &lt;div id="share-bottom"&gt;
          &lt;button type="button" class="photo-button"&gt; Upload 3D Model&lt;/button&gt;
          &lt;div id="upload-wrap"&gt;
              &lt;input id="upload-wrap-button" type="file" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/center&gt;
  &lt;script&gt;
  
      $('#share-bottom button').click(function () {
          $('#upload-wrap-button').click();
      });
  
      var renderer = new THREE.WebGLRenderer({ antialias: true });
      renderer.setSize(document.body.clientWidth, document.body.clientHeight);
      document.body.appendChild(renderer.domElement);
      renderer.setClearColorHex(0xEEEEEE, 1.0);
      renderer.clear();
      renderer.shadowCameraFov = 50;
      renderer.shadowMapWidth = 1024;;
      renderer.shadowMapHeight = 1024;
  
  
      var fov = 45; // camera field-of-view in degrees
      var width = renderer.domElement.width;
      var height = renderer.domElement.height;
      var aspect = width / height; // view aspect ratio
      var near = 1; // near clip plane
      var far = 10000; // far clip plane
      var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
      camera.position.z = -400;
      camera.position.x = 200;
      camera.position.y = 350;
      var scene = new THREE.Scene();
      var cube = new THREE.Mesh(
        new THREE.CubeGeometry(50, 50, 50),
        new THREE.MeshLambertMaterial({ color: 0xff0000 })
      );
  
      scene.add(cube);
      cube.castShadow = true;
      cube.receiveShadow = true;
  
      var plane = new THREE.Mesh(
        new THREE.PlaneGeometry(400, 200, 10, 10),
        new THREE.MeshLambertMaterial({ color: 0xffffff }));
      plane.rotation.x = -Math.PI / 2;
      plane.position.y = -25.1;
      plane.receiveShadow = true;
      scene.add(plane);
  
      var light = new THREE.SpotLight();
      light.castShadow = true;
      light.position.set(170, 330, -160);
      scene.add(light);
      var litCube = new THREE.Mesh(
        new THREE.CubeGeometry(50, 50, 50),
        new THREE.MeshLambertMaterial({ color: 0xffffff }));
      litCube.position.y = 50;
      litCube.castShadow = true;
      scene.add(litCube);
  
      renderer.shadowMapEnabled = true;
  
  
      renderer.render(scene, camera);
      var paused = false;
      var last = new Date().getTime();
      var down = false;
      var sx = 0, sy = 0;
  
      window.onmousedown = function (ev) {
          down = true; sx = ev.clientX; sy = ev.clientY;
      };
      window.onmouseup = function () { down = false; };
      window.onmousemove = function (ev) {
          if (down) {
              var dx = ev.clientX - sx;
              var dy = ev.clientY - sy;
              camera.position.x += dx;
              camera.position.y += dy;
              sx += dx;
              sy += dy;
          }
      }
      function animate(t) {
          if (!paused) {
              last = t;
              litCube.position.y = 60 - Math.sin(t / 900) * 25;
              litCube.position.x = Math.cos(t / 600) * 85;
              litCube.position.z = Math.sin(t / 600) * 85;
              litCube.rotation.x = t / 500;
              litCube.rotation.y = t / 800;
              renderer.clear();
              camera.lookAt(scene.position);
              renderer.render(scene, camera);
          }
          window.requestAnimationFrame(animate, renderer.domElement);
      };
      animate(new Date().getTime());
      onmessage = function (ev) {
          paused = (ev.data == 'pause');
      };
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>