无法更改点击threejs的纹理

Question

我正在尝试通过单击更改对象的纹理/颜色（通过单击单独的立方体）

我只能更改对象的颜色一次（即使我使用了 for-loop ）并且前提是对象上没有以前的纹理或颜色。 但是，如果对象已经具有现有颜色，我将无法更改颜色。 我需要添加一些需求更新吗？我做了，但没有运气.. 请看看我的 onclick 功能。

EventsControls.attachEvent('onclick', function() {
    var colors = ['White', 'blue', 'gold'];
    for (var i = 0; i < colors.length; i++) {
        object.traverse(function(child) {
            if (child instanceof THREE.Mesh) {
                if (child.material.name == "Sofa_Leather") {
                    child.material = colors[i]; // array elements are already defined
                    child.material.needsUpdate = true;
                    child.material.buffersNeedUpdate = true;
                    child.material.uvsNeedUpdate = true;
                    child.receiveShadow = true;
                }
            }
        })
    }
});

请让我知道我哪里出错了。谢谢。

//重试但可以设法使用以下代码仅更改一种颜色，我认为我以错误的方式使用了需求更新。

                    var index=0;    
                    var colors=[0xfffeef,0xffff00,0x000fff];

                     object.traverse( function( child ) { if ( child instanceof THREE.Mesh ) {

                    if (child.material.name == "Sofa_Leather")  {

                                 if(index == colors.length) index = 0;
                                 child.material.color.setHex(colors[index++]);

                                child.material.needsUpdate = true;
                                child.receiveShadow = true;
                            } }
                     })

Answer 1

我相信您可以通过以下方式做到这一点：

material.color.setHex(0xffffff * Math.random()); // set to random color

编辑：

好吧，当然你也可以这样做：

var colors = [0xff0000, 0x00ff00, 0x0000ff]; // red, green and blue
if(index == colors.length) index = 0;
line.material.color.setHex(colors[index++]);

看到这个更新jsfiddle