title: three.js pointLight changes from r.67 to r.68
body: <p>The interaction between pointlight and a plane seems to have changed from r.67 to r.68</p>
  
  <p>I'm trying to learn three.js, going through a book that is a year old.
  I've stripped down the tutorial example to just a plane, a cube, and a pointlight and The "Shinyness" effect of the light on the plane goes away when i use r.68, which is the point of the light effect tutorial.
  I'm guessing it must have something to do with the material reflectivity of planes now?</p>
  
  <p>I didn't get any clues going through three.js github revision notes or history of the function sourcecode or similar current three.js examples, but my three.js rookie status is probably holding me back from knowing what to look for.</p>
  
  <p>If someone could explain what changed and why it's not working I would love to turn this broken tutorial into a learning experience.</p>
  
  <p><strong>EDITED TO ADD FIDDLE EXAMPLES INSTEAD OF SOURCE</strong></p>
  
  <p>Here is r.68:</p>
  
  <pre><code>http://jsfiddle.net/nnu3qnq8/5/
  </code></pre>
  
  <p>Here is r.67:</p>
  
  <pre><code>http://jsfiddle.net/nnu3qnq8/4/
  </code></pre>
  
  <p>Code:</p>
  
  <pre><code>  $(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 a render and set the size
      var renderer = new THREE.WebGLRenderer();
  
      renderer.setClearColorHex(0xEEEEEE, 1.0);
      renderer.setSize(window.innerWidth, window.innerHeight);
  
      // create the ground plane
      var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);
      var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
      var plane = new THREE.Mesh(planeGeometry, planeMaterial);
  
      // rotate and position the plane
      plane.rotation.x = -0.5 * Math.PI;
      plane.position.x = 15
      plane.position.y = 0
      plane.position.z = 0
  
      // add the plane to the scene
      scene.add(plane);
  
      // create a cube
      var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
      var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff7777});
      var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
      cube.castShadow = true;
  
      // position the cube
      cube.position.x = -4;
      cube.position.y = 3;
      cube.position.z = 0;
  
      // add the cube to the scene
      scene.add(cube);        
  
      // position and point the camera to the center of the scene
      camera.position.x = -25;
      camera.position.y = 30;
      camera.position.z = 25;
      camera.lookAt(new THREE.Vector3(10, 0, 0));
  
      // add subtle ambient lighting
      var ambiColor = "#0c0c0c";
      var ambientLight = new THREE.AmbientLight(ambiColor);
      scene.add(ambientLight);
  
      // add spotlight for the shadows
      // add spotlight for the shadows
      var spotLight = new THREE.SpotLight(0xffffff);
      spotLight.position.set(-40, 60, -10);
      spotLight.castShadow = true;
      // scene.add( spotLight );
  
      var pointColor = "#ccffcc";
      var pointLight = new THREE.PointLight(pointColor);
      pointLight.distance = 100;
      pointLight.position = new THREE.Vector3(3, 5, 3);
      scene.add(pointLight);
  
      // add the output of the renderer to the html element
      $("#WebGL-output").append(renderer.domElement);
  
      // call the render function
      var step = 0;
  
      // used to determine the switch point for the light animation
      var invert = 1;
      var phase = 0;
  
      var controls = new function () {
          this.rotationSpeed = 0.03;
          this.ambientColor = ambiColor;
          this.pointColor = pointColor;
          this.intensity = 1;
          this.distance = 100;
      }
  
      var gui = new dat.GUI();
      gui.addColor(controls, 'ambientColor').onChange(function (e) {
          ambientLight.color = new THREE.Color(e);
      });
  
      gui.addColor(controls, 'pointColor').onChange(function (e) {
          pointLight.color = new THREE.Color(e);
      });
  
      gui.add(controls, 'intensity', 0, 3).onChange(function (e) {
          pointLight.intensity = e;
      });
  
      gui.add(controls, 'distance', 0, 100).onChange(function (e) {
          pointLight.distance = e;
      });
      render();
  
      function render() {
          stats.update();
          // move the light simulation
          if (phase &gt; 2 * Math.PI) {
              invert = invert * -1;
              phase -= 2 * Math.PI;
          } else {
              phase += controls.rotationSpeed;
          }
          pointLight.position.z = +(7 * (Math.sin(phase)));
          pointLight.position.x = +(14 * (Math.cos(phase)));
          if (invert &lt; 0) {
              var pivot = 14;
              pointLight.position.x = (invert * (pointLight.position.x - pivot)) + pivot;
          }
          // render using requestAnimationFrame
          requestAnimationFrame(render);
          renderer.render(scene, camera);
      }
  
      function initStats() {
          var stats = new Stats();
          stats.setMode(0); // 0: fps, 1: ms
          // Align top-left
          stats.domElement.style.position = 'absolute';
          stats.domElement.style.left = '0px';
          stats.domElement.style.top = '0px';
          $("#Stats-output").append(stats.domElement);
          return stats;
      }
  
  });
  </code></pre>