Javascript 如何使用Three.js更改立方体的颜色

我想根据单选按钮选择更改立方体的颜色。如何通过平稳过渡实现这一点

单选按钮

<input id="black" type="radio" data-color="black" name="color" value="" checked="checked">
<input id="white" type="radio" data-color="white" name="color" value="">
<input id="blue" type="radio" data-color="chamois" name="color" value="">

几何图形

var geometry= new THREE.BoxGeometry(2,2,2);
var mesh = new THREE.Mesh(geometry, color [ "black" ]);
scene.add(mesh );

---

幸运的是，我不久前实现了一个解决方案——只要您不介意使用tweening库（我使用GSAP），这段代码就非常有效

以下仅为颜色粗花呢代码（为简洁起见）：

记住，小提琴之所以有效是因为我链接到两个外部库：

如果你有任何问题，给我留言，我一定会回答的

---

编辑 我已经更新了答案，加入了用单选按钮触发tween的功能。创建网格时，实例化新的THREE.Material（）而不是引用颜色数组中已有的材质，这一点很重要。像这样：

var mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ color: 0x222222})); 

那么，将其链接到收音机控制装置根本没有问题：

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

---

编辑2 在上一个示例中，我使用了一个超轻量的tweening插件（

<340 B

），不幸的是（我不知道）该插件正在等待退役。此后，我更新了这个示例，使用了一个更通用、更重的库，称为GSAP——尽管如此，它还是一个功能强大、速度极快的库，所以我会毫不犹豫地使用它

---

最后一次（希望如此），祝您编码愉快

我发现材料的颜色可以直接用粗花呢

var targetColor = new THREE.Color(0xafe2f3);
TweenMax.to( object.material.color, 2, {
                r: targetColor.r,
                g: targetColor.g,
                b: targetColor.b
});

---

酷。谢谢分享！你知道怎么把它和单选按钮连接起来吗？因此，如果选中第二个单选按钮，则该框为白色。@AlexanderHein正在研究一种解决方案-目前它介于两种颜色之间，但不会返回到黑色@AlexanderHein看到我的编辑，全部完成！你真了不起，乔纳森·布鲁克斯！谢谢。你有更新整个材料的解决方案吗？

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

var targetColor = new THREE.Color(0xafe2f3);
TweenMax.to( object.material.color, 2, {
                r: targetColor.r,
                g: targetColor.g,
                b: targetColor.b
});