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>

组件使用status来设置click事件的颜色属性，但这似乎效率低下。这可以使用数组而不是状态来实现吗？

演示 - 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/

Aframe：使用数组循环显示颜色

1 个答案: