title: Why does my three.js lighting not work?
body: <p>I can't figure out what's wrong in this fiddle (<a href="http://jsfiddle.net/resistdesign/s6npL/" rel="nofollow">http://jsfiddle.net/resistdesign/s6npL/</a>), based on the docs and some examples and such, the lights should be working.</p>
  
  <pre><code>var camera, scene, renderer, geometry, material, mesh, light1;
  
  init();
  animate();
  
  function init() {
  
      scene = new THREE.Scene();
  
      camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
      camera.position.z = 500;
      scene.add(camera);
  
      geometry = new THREE.CubeGeometry(200, 200, 200);
      material = new THREE.MeshPhongMaterial( { ambient: 0x555555, color: 0x555555, specular: 0xffffff, shininess: 50, shading: THREE.SmoothShading } );
  
      mesh = new THREE.Mesh(geometry, material);
      scene.add(mesh);
  
      scene.add( new THREE.AmbientLight( 0x000000 ) );
  
      light1 = new THREE.PointLight( 0xff0040, 2, 50 );
      scene.add( light1 );
  
      renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
  
      document.body.appendChild(renderer.domElement);
  
  }
  
  function animate() {
  
      requestAnimationFrame(animate);
      render();
  
  }
  
  function render() {
  
      var time = Date.now() * 0.0005;
  
      mesh.rotation.x += 0.01;
      mesh.rotation.y += 0.02;
  
      light1.position.x = Math.sin( time * 0.7 ) * 30;
      light1.position.y = Math.cos( time * 0.5 ) * 40;
      light1.position.z = Math.cos( time * 0.3 ) * 30;
  
      renderer.render(scene, camera);
  
  }
  </code></pre>