title: How to update THREE material data?
body: <p>I would like to change the material of a objects based on a radio button selection. A color change works in my current example. Unfortunately it does not update the whole material.</p>
  
  <p>How do I tell THREE to update its internal data accordingly?</p>
  
  <p><strong>Materials</strong></p>
  
  <pre><code>  var lederfaserMap = THREE.ImageUtils.loadTexture( 'textures/lederfaser.jpg' );
    lederfaserMap.anisotropy = 16;
    lederfaserMap.wrapS = lederfaserMap.wrapT = THREE.RepeatWrapping;
    lederfaserMap.repeat.set( 5, 5 );
  
  
    var feinleinenMap = THREE.ImageUtils.loadTexture( 'textures/feinleinen.jpg' );
    feinleinenMap.anisotropy = 16;
    feinleinenMap.wrapS = feinleinenMap.wrapT = THREE.RepeatWrapping;
    feinleinenMap.repeat.set( 8, 8 );
  
  
    var material = {     
    "feinleinen-schwarz":     new THREE.MeshPhongMaterial( { color: 0x222222, map: feinleinenMap, combine: THREE.MixOperation} ),
    "feinleinen-weiss":   new THREE.MeshPhongMaterial( { color: 0xffffff, map: feinleinenMap, combine: THREE.MixOperation } ),
    "lederfaser-schwarz":     new THREE.MeshPhongMaterial( {color: 0x222222, map: lederfaserMap, combine: THREE.MixOperation } ),
    }
  </code></pre>
  
  <p><strong>Update the Material here</strong></p>
  
  <pre><code>  var group = new THREE.Group();
  
  loader.load('/models/object.js', function(geometry){
    var materialchange= new THREE.Mesh(geometry, material[ "feinleinen-schwarz" ]);
    materialchange.name = "materialchange";
    group.add( materialchange);
  });  
  
    scene.add( group );
  
  
  
  function animate() {
  
    requestAnimationFrame(animate);
    TWEEN.update();
    renderer.render(scene, camera);
  
  }
  </code></pre>
  
  <p><strong>Function to get and update the material</strong></p>
  
  <pre><code>function colorTo (target, value){
        var target = scene.getObjectByName(target);
        var initial = new THREE.Color(target.material.color.getHex());
        var value = new THREE.Color(value.color.getHex());
        var tween = new TWEEN.Tween(initial).to(value, 500)
            .easing(TWEEN.Easing.Cubic.InOut)
            .onUpdate(function(){
                target.material.color = initial;
            })
            .start();
    }  
  </code></pre>
  
  <p><strong>Function to get the attribute of the checked radio button</strong></p>
  
  <pre><code>$("input[name=material]").change(function(event){
      if ($(this.checked)) {
          var targetColor = $(this).data("visual");
            colorTo("materialchange", material[targetColor]);
        }
    });
  </code></pre>