Aframe A-Frame：我正在尝试添加一个单击功能，该功能将更改长方体的颜色。为什么不起作用？

我试着从添加一个简单的点击功能开始，这个功能会把它的颜色变成红色。你能看看我的脚本和html，告诉我我做错了什么吗

HTMLonly用于更改颜色的元素：

<a-box id='soundbox' position='0 2 -5' color="#6173F4" rotation="0 45 45 opacity=" 0.8" depth="1" alongpath="path:2,2,-5 -2,1,-2.5 0,1,-1; closed:false; dur:5000; delay:4000; inspect:false;" change-colors></a-box>

---

关于如何在a-Frame网站上的中创建a-Frame中的组件，有一个非常好的描述

您的组件将如下所示：

AFRAME.registerComponent('change-color', {
  schema: {
    color: {default: '#666'}
  },
  init: function(){
    var data = this.data;
    this.el.addEventListener('click', function(){
      this.setAttribute('color', data.color);
    })
  }                
});

还有你的a盒：

您还需要将光标添加到场景中，以便单击实体。可以通过将其附着到摄影机图元来执行此操作：

<a-camera position="0 -0.5 0">
  <a-cursor scale="0.5 0.5" color="#fff"></a-cursor>
</a-camera>

整个代码如下：

工作示例如下：

<a-box
   position="0 2 -5"
   color="#6173F4"
   rotation="0 45 45"
   opacity=" 0.8"
   depth="1"
   change-color="color: #f00"
   >
</a-box>

<a-camera position="0 -0.5 0">
  <a-cursor scale="0.5 0.5" color="#fff"></a-cursor>
</a-camera>