title: How to change the color of a cube with Three.js
body: <p>I would like to change the color of a cube based on a radio button selection. How can I achieve this with a smooth transition?</p>
  
  <p><strong>Radio button</strong></p>
  
  <pre><code>&lt;input id="black" type="radio" data-color="black" name="color" value="" checked="checked"&gt;
  &lt;input id="white" type="radio" data-color="white" name="color" value=""&gt;
  &lt;input id="blue" type="radio" data-color="chamois" name="color" value=""&gt;
  </code></pre>
  
  <p><strong>Material</strong></p>
  
  <pre><code>var color = {
  
      "black": new THREE.MeshPhongMaterial({
          color: 0x222222
      }),
      "white": new THREE.MeshPhongMaterial({
          color: 0xffffff
      }),
      "chamois": new THREE.MeshPhongMaterial({
          color: 0xEDE6D4
      })
  
  }
  </code></pre>
  
  <p><strong>Geometry</strong></p>
  
  <pre><code>var geometry= new THREE.BoxGeometry(2,2,2);
  var mesh = new THREE.Mesh(geometry, color [ "black" ]);
  scene.add(mesh );
  </code></pre>