javascript - 在按键三.js 上更改对象 Material 的问题

Question

我试图在按下按键时将存储在数组中的颜色应用于我的对象，但由于某种原因，按下按键时我只能获取数组的第一个元素。请告诉我是否还有其他方法可以做到这一点。

我尝试了随机颜色功能，但我的要求不包括随机应用颜色。

 var onKeyDown = function(event) {

    if (event.keyCode == 67) { // when 'c' is pressed
                                 var index=0;    

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

                                        if (child.material.name == "Leather")  {
                                           var colors = [0xff0000, 0x00ff00, 0x0000ff]; // red, green and blue
                                            if(index == colors.length) index = 0;
                                            child.material.color.setHex(colors[index++]);
                                            child.material.needsUpdate=true;
                                            child.geometry.buffersNeedUpdate = true;
                                            child.geometry.uvsNeedUpdate = true;

                                        }
                                        }});

                            } };
                                document.addEventListener('keydown', onKeyDown, true);

Answer 1

您的变量“index”位于函数的局部范围内。因此，每次按下 C 键时都会对其进行初始化 (var index=0;)。

您只需将此变量移到函数之外，一切都会好起来的。

var index=0,
onKeyDown = function(event) {
    if (event.keyCode == 67) { // when 'c' is pressed
        object.traverse( function(child) { 
            if (child instanceof THREE.Mesh) {
                if (child.material.name == "Leather")  {
                    var colors = [0xff0000, 0x00ff00, 0x0000ff]; // red, green and blue
                    if(index == colors.length) index = 0;
                    child.material.color.setHex(colors[index++]);
                    child.material.needsUpdate=true;
                    child.geometry.buffersNeedUpdate = true;
                    child.geometry.uvsNeedUpdate = true;
                }
             }
        });
    }
};

document.addEventListener('keydown', onKeyDown, true);