A-Frame：我正在尝试添加一个单击功能来更改框的颜色。为什么它不起作用？

【问题标题】：A-Frame: I am trying to add a click function that will change the color of a box. Why isn't it working?A-Frame：我正在尝试添加一个单击功能来更改框的颜色。为什么它不起作用？
【发布时间】：2017-03-25 16:56:31
【问题描述】：

我正在尝试首先向一个框添加一个简单的单击功能，该功能会将其颜色更改为红色。你能看看我的脚本和html，请告诉我我做错了什么？

HTML（仅用于改变颜色的元素）：

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

脚本：

var soundbox = document.querySelector('#soundbox');

AFRAME.registerComponent('change-color', {
  init: function(){
    this.soundbox = soundbox;
    this.el.addEventListener('click', this.onClick.bind(this));
  },
  onClick: function(){
    soundbox.setAttribute('color', 'red');
  }
});

【问题讨论】：

标签： aframe

【解决方案1】：

在 A-Frame 网站的Building a Basic Scene Tutorial 中有很好的描述如何在 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-box：

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

完整代码在这里：https://glitch.com/edit/#!/enshrined-energy

工作示例：https://enshrined-energy.glitch.me/

【讨论】：