keypress three.jsでオブジェクトの素材を変更する問題

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