title: Three.js project crashes mobile
body: <p>I've  been working on a three.js project to try and learn the framework. Got a basic model floating around that works fine on the desktop browser but will crash repeatedly on mobile. I uploaded the project on my server <a href="http://threedeesneaker.404vanity.com/" rel="nofollow">http://threedeesneaker.404vanity.com/</a></p>
  
  <p>Is there any way to optimize this for mobile devices? I tried both chrome and safari for iPhone and iPad.</p>
  
  <p>The code it self:</p>
  
  <pre><code>(function() {
  
  var scene, camera, renderer;
  var geometry, material, mesh, sneaker;
  
  init();
  animate();
  
  function init() {
  
      scene = new THREE.Scene();
      var WIDTH = window.innerWidth,
          HEIGHT = window.innerHeight;
  
          var ambient = new THREE.AmbientLight( 0x444444 );
                  scene.add( ambient );
  
      camera = new THREE.PerspectiveCamera( 3, WIDTH / HEIGHT, 1, 20000 );
      camera.position.z = 1000;
  
  
  
      window.addEventListener('resize', function() {
        var WIDTH = window.innerWidth,
            HEIGHT = window.innerHeight;
        renderer.setSize(WIDTH, HEIGHT);
        camera.aspect = WIDTH / HEIGHT;
        camera.updateProjectionMatrix();
      });
  
      geometry = new THREE.BoxGeometry( 200, 200, 200 );
      material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
  
      mesh = new THREE.Mesh( geometry, material );
      scene.add( mesh );
  
  
      // prepare loader and load the model
      var oLoader = new THREE.OBJMTLLoader();
      oLoader.load('models/sneaker.obj', 'models/sneaker.mtl', function(object) {
  
        object.scale.set(1, 1, 1);
        object.rotation.y = 600;
        object.rotation.z= 600;
        sneaker = object;
        scene.add(sneaker);
      });
  
  
    // var loader = new THREE.OBJLoader();
    // loader.load('models/sneaker.obj', function(object) {
    //   sneaker = object;
    //   sneaker.scale.set(1,1,1);
    //   sneaker.rotation.y = 600;
    //   sneaker.rotation.z= 600;
    //   scene.add(sneaker);
  
    // });
  
  
  
  
  
      renderer = new THREE.WebGLRenderer();
      renderer.setSize( WIDTH, HEIGHT );
  
      renderer.setClearColor(0x333F47, 1);
  
  
      var light = new THREE.PointLight(0xffffff);
      light.position.set(-100,200,100);
      scene.add(light);
  
      document.body.appendChild( renderer.domElement );
  
  }
  
  function animate() {
  
      requestAnimationFrame( animate );
  
      mesh.rotation.x += 0.01;
      mesh.rotation.y += 0.02;
      sneaker.rotation.x += 0.01;
      sneaker.rotation.y += 0.02;
  
  
      renderer.render( scene, camera );
  
  }
  
  })();
  </code></pre>