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

Posted 2023-02-27

【中文标题】如何使用 Three.js 更改立方体的颜色

【英文标题】：How to change the color of a cube with Three.js

【发布时间】：2015-11-22 00:05:55

【问题描述】：

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

单选按钮

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

【参考方案1】：

我发现材质的颜色可以直接补间！

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

【参考方案2】：

幸运的是，我不久前实现了一个解决方案 - 只要你不介意使用补间库（我使用 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; 
    );

Link to full code in fiddle

记住，这个小提琴起作用的原因是因为我链接到两个外部库：

three.min.js TweenMax.min.js

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

Link to the GSAP TweenLite docs

---

编辑

我已更新答案以包含使用单选按钮触发补间的功能。重要的是，当您创建网格时，您实例化 new THREE.Material() 而不是 引用已经在 color 数组中的材质。像这样：

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 - 尽管如此，它仍然是一个令人难以置信 能力和闪电般快速的库，所以我会毫不犹豫地使用它。

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

【讨论】：

酷。感谢分享！您知道如何将其与单选按钮连接吗？因此，如果选中第二个单选按钮，则该框为白色。

@AlexanderHein 正在研究解决方案 - 目前它在两种颜色之间进行补间，但没有变回黑色。 Here's my progress

@AlexanderHein 查看我的编辑，全部完成！

你太棒了乔纳森·布鲁克斯！谢谢。

您有更新整个材料的解决方案吗？ jsfiddle.net/dz9zbk7d