Aframe：配列を使用して色を循環させる

Question

私はカスタムコンポーネントを使用して色を循環させようとしています。

<script> 
    AFRAME.registerComponent('floor-cycle', { 
    init: function() { 
     var sceneEl = document.querySelector('a-scene'); 
     var floorEl = sceneEl.querySelector('#floor') 
     status = 1; 
     floorEl.addEventListener('click', function() { 
     if(status==1) { 
     floorEl.setAttribute('color', 'red'); status = 2 
     } 
     else if(status==2) { 
     floorEl.setAttribute('color', 'blue'); status = 3; 
     } 
     else if(status==3) { 
     floorEl.setAttribute('color', 'green'); status = 1 
     } 
     }      
    ); 
    } 
    }); 
</script> 

コンポーネントはステータスを使用してクリックイベントのカラー属性を設定しますが、これは非効率的です。これはステータスではなく配列を使用して実装できますか？

デモ - https://codepen.io/MannyMeadows/pen/GWzJRB

Answer 1

あなたはそれを介して、アレイ['red','green','blue']とサイクルを行うことができます。配列は今、どのようにパフォーマンスについて確認、動的ではないよう

colors = ['red','green','blue']; 
let i = 0; 
floorEl.addEventListener('click',function(){ 
    floorEl.setAttribute('material','color', colors[i]); 
    function add(){(i==colors.length-1) ?i= 0 : i++;} 
    add(); 
}); 

が良さそうです。 ここで作業してください：https://jsfiddle.net/gftruj/g9wfLgab/2/