Question

我首先尝试将一个简单的点击功能添加到一个将其颜色更改为红色的框中。你能看看我的剧本和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');
  }
});

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

A-Frame：我正在尝试添加一个可以改变盒子颜色的点击功能。为什么不工作？

1 个答案: