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

Question

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

5

我希望能够根据单选按钮的选择来改变立方体的颜色。如何实现平稳过渡？

单选按钮

<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 color = {

    "black": new THREE.MeshPhongMaterial({
        color: 0x222222
    }),
    "white": new THREE.MeshPhongMaterial({
        color: 0xffffff
    }),
    "chamois": new THREE.MeshPhongMaterial({
        color: 0xEDE6D4
    })

}

几何

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

- Alexander Hein

2个回答

3

我发现材料的颜色可以直接进行补间动画！

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

- Laura Juo-Hsin Chen

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jonny · Accepted Answer

幸运的是，我一段时间前实现了这个问题的解决方案——只要你不介意使用缓动库（我使用GSAP），这段代码就可以很好地工作。

以下是仅涉及颜色缓动的代码（为了简洁起见）：

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());

    TweenLite.to(initial, 1, {     //This syntax is relevant to GSAP's TweenLite, I'll provide a link to the docs
        r: value.r,
        g: value.g,
        b: value.b,
        ease: Cubic.easeInOut,
        onUpdate: function() { target.material.color = initial; }
    });
}

此处链接到完整的fiddle代码

请注意，这个fiddle能够工作的原因是因为我链接了两个外部库：

如果您有任何问题，请在评论区提问，我会确保回答您的问题！

链接到GSAP TweenLite文档

编辑

我更新了答案，以包含使用单选按钮触发tween的功能。重要的是，在创建网格时，您需要实例化一个new 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

在之前的示例中，我使用了一个超轻量级的动画插件（< 340 B），不幸的是（我不知道）这个插件已经被淘汰了。我已经更新了示例，使用了一个稍微通用一些、因此更重一些的库，叫做GSAP - 尽管如此，它仍然是一个非常强大和快速的库，所以我毫不犹豫地使用它。

希望这是最后一次，祝你编写愉快！