如何使用单选按钮改变对象的材质

我想根据单选按钮选择更改立方体的材质。在我当前的例子中，颜色变化是有效的。不幸的是，它没有更新整个材料。我使用一个叫做tweenjs的渐变插件来制作平滑的动画。

我怎样才能捕捉整个MeshPhongMaterial而不仅仅是颜色?

单选按钮

<div id="inputs">
    <input id="black" type="radio" data-color="black" name="color" value="" checked>
    <input id="white" type="radio" data-color="white" name="color" value="">
    <input id="red" type="radio" data-color="red" name="color" value="">
</div>

jQuery用于单选按钮连接

 $("#inputs input").change(function(event){
        if ($(this.checked)) {
            var targetColor = $(this).data("color");
            colorTo("box", color[targetColor]);
        }
    });

THREE.JS

var colorMap = THREE.ImageUtils.loadTexture( 'textures/color.jpg' );
colorMap.anisotropy = 16;
colorMap.wrapS = colorMap.wrapT = THREE.RepeatWrapping;
colorMap.repeat.set( 5, 5 );

var color = {
  "black": new THREE.MeshPhongMaterial({
      color: 0x222222, map: colorMap, combine: THREE.MixOperation
  }),
      "white": new THREE.MeshPhongMaterial({
      color: 0xffffff, map: colorMap, combine: THREE.MixOperation
  }),
      "red": new THREE.MeshPhongMaterial({
      color: 0xf80000, emissive: 0x222222, specular: 0x222222, map: colorMap, combine: THREE.MixOperation
  })
}
var renderer, scene, camera;
init();
animate();
function init() {    
    var WIDTH = window.innerWidth;
    var HEIGHT = window.innerHeight;
    camera = new THREE.PerspectiveCamera( 60, WIDTH / HEIGHT, 1, 300 );
    camera.position.z = 10;
    scene = new THREE.Scene();
    var geometry= new THREE.BoxGeometry(2,2,2);
var mesh = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial({ color: 0x222222}));
    mesh.name = "box";
    scene.add(mesh );
    renderer = new THREE.WebGLRenderer({ antialias: true });    //Create WebGL context
    renderer.setClearColor( 0xffffff );                         //Set background
    renderer.setPixelRatio( window.devicePixelRatio );          //Set pixel aspect ratio
    renderer.setSize( WIDTH, HEIGHT );                          //Set viewport size
    document.body.appendChild( renderer.domElement );           //Append renderer object to the DOM
}
function animate() {                        //Animation draw loop
    requestAnimationFrame(animate);         //Request animation frame (graphics performant setTimeout equivalent)
    TWEEN.update();                         //Update tweens in progress
    renderer.render(scene, camera);         //Render the updates
}
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, 1000)
        .easing(TWEEN.Easing.Cubic.InOut)
        .onUpdate(function(){
            target.material.color = initial;
        })
        .start();
}

http://jsfiddle.net/489k6s3g/