title: Problems with three.js
body: <p>I want to create a scene with a car and you should also be able to move around the scene with the mouse using three.js.</p>
  
  <p>I tried some coding, everything works fine but then I wanted to add the OrbitControl and now I can't see the whole scene anymore. What's wrong in there?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  </code></pre>
  
  <p></p>
  
  <p>
      scene</p>
  
  <pre><code>&lt;script src="js/THREE.js"&gt;&lt;/script&gt;
  &lt;script src="js/controls/OrbitControls.js"&gt;&lt;/script&gt;
  
  
  &lt;script&gt;
  
  var width = 1300;
  var height = 500;
  
  init();
  
  function animate() {
  requestAnimationFrame(animate);
  controls.update();
  
  function init(){
      var renderer = new THREE.WebGLRenderer({antialias: true});
      renderer.setSize(width,height);
  
      var camera = new THREE.PerspectiveCamera(45, width/height, 1, 10000);
  
      camera.position.x = 5;
      camera.position.y = 2;
      camera.position.z = 5.3;
  
      var controls = new THREE.OrbitControls( camera );
      controls.damping = 0.2;
      controls.addEventListener( 'change', render );
  
      document.body.appendChild(renderer.domElement);
  
      var scene = new THREE.Scene();
  
      var car = new THREE.Object3D();
      var body = new THREE.Object3D();
      var wheels = new THREE.Object3D();
      var ground = new THREE.Object3D();
  
  
              var cube = new THREE.Mesh(new THREE.CubeGeometry(2,1,5),
                                      new THREE.MeshLambertMaterial({color:0x856363}));
  
  
              var cube1 = new THREE.Mesh(new THREE.CubeGeometry(1.8,1,3),
                                      new THREE.MeshLambertMaterial({color:0x856363}));
              cube1.position.y = 0.8;
  
      body.add(cube);
      body.add(cube1);
      body.position.z = -1.5;
  
  
      car.add(body);
      car.add(wheels);
  
      car.rotation.y = Math.PI/6;
      car.position.y += 1;
  
      car.position.x += 3;
      car.position.z -= 3;
  
  
              var wheel1 = new THREE.Mesh(new THREE.CylinderGeometry(0.8,0.8,0.4,30),
                                      new THREE.MeshLambertMaterial({color:0x800000}));
              var wheel2 = new THREE.Mesh(new THREE.CylinderGeometry(0.8,0.8,0.4,30),
                                      new THREE.MeshLambertMaterial({color:0x800000}));
              var wheel3 = new THREE.Mesh(new THREE.CylinderGeometry(0.8,0.8,0.4,30),
                                      new THREE.MeshLambertMaterial({color:0x800000}));
              var wheel4 = new THREE.Mesh(new THREE.CylinderGeometry(0.8,0.8,0.4,30),
                                      new THREE.MeshLambertMaterial({color:0x800000}));
  
  
              wheel1.rotation.z = Math.PI/2;
              wheel2.rotation.z = Math.PI/2;
              wheel3.rotation.z = Math.PI/2;
              wheel4.rotation.z = Math.PI/2;
  
              wheel1.position.x = -1.2;
              wheel1.position.y = 0;
              wheel1.position.z = 0;
  
              wheel2.position.x = 1.2;
              wheel2.position.y = 0;
              wheel2.position.z = 0;
  
              wheel3.position.x = -1.2;
              wheel3.position.y = 0;
              wheel3.position.z = -2.5;
  
              wheel4.position.x = 1.2;
              wheel4.position.y = 0;
              wheel4.position.z = -2.5;
  
      wheels.add(wheel1);
      wheels.add(wheel2);
      wheels.add(wheel3);
      wheels.add(wheel4);         
  
  
              var plane;
              var planeGeo = new THREE.PlaneGeometry(30,30,100,100);  
  
              var texture = THREE.ImageUtils.loadTexture('grass.jpg',{},function(){renderer.render(scene,camera)});
              texture.wrapS = THREE.RepeatWrapping;
              texture.wrapT = THREE.RepeatWrapping;
  
              var planeMat = new THREE.MeshLambertMaterial({
                          map: texture,
                          });
  
  
              plane = new THREE.Mesh(planeGeo,planeMat);
  
      ground.add(plane);
      ground.position.z = - 7.5;
      ground.position.x =  5;
  
      scene.add(car);
      scene.add(ground);
  
      var light = new THREE.SpotLight(); 
      light.position.set(170,300,-160); 
      scene.add(light);
  
      var directionalLight = new THREE.DirectionalLight (0xffffff, 0.5);
      directionalLight.position.set(0,0,1);
      scene.add(directionalLight);
  
      var directionalLight1 = new THREE.DirectionalLight (0xffffff, 0.2);
      directionalLight1.position.set(0,1,0);
      scene.add(directionalLight1);       
  
  
      renderer.render(scene, cam);
  }   
  
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <p></p>