A 型框按钮 onClick 更改对象

Question

我正在尝试在 A 型框架 (aframe.io) 中创建一些东西，当按钮点击事件发生时，立方体会改变颜色。这是我当前的代码：

 <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<button style="z-index: 999; position: fixed">RESIZE</button>
<script>
  AFRAME.registerComponent("foo", {
    init: function() {
      const btn = document.querySelector("button");
      const sphere = document.querySelector("a-sphere");
      btn.addEventListener("click", e => {
         sphere.setAttribute("color","red");
      })
    }
  })
</script>
<a-scene foo>
  <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
</a-scene>

此处的代码运行良好，但它没有使用 onclick 事件。我怎样才能更改上面的代码，以便当按钮上有一个 onclick 功能时，当该功能发生时颜色会发生变化？澄清一下，我知道上面的代码运行良好，但它使用事件侦听器来判断按钮何时被单击，我需要将其更改为 onclick 事件。

Answer 1

定义一个变量s，然后，当AFRAME初始化后，分配一个改变球体颜色的函数给它。将 onclick 事件附加到按钮，然后调用函数 s.

var s;
AFRAME.registerComponent("foo", {
  init: function() {
    const sphere = document.querySelector("a-sphere");
    s = function() {
      sphere.setAttribute("color", "red");
    }
  }
})
console.clear();//<-- this is to get rid of the console logs which clog up the snippet view

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<button style="z-index: 999; position: fixed" onclick="s()">RESIZE</button>
<script>
</script>
<a-scene foo>
  <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
</a-scene>

Answer 2

如果你想使用普通的 JS (onclick) 而不是所有的注册组件，那么你可以尝试这样的事情

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <button style="z-index: 999; position: fixed" onclick="s()">RESIZE</button>
    <a-scene foo>
        <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
    </a-scene>
<script>
    function s(){
        const sphere = document.querySelector("a-sphere");
        sphere.setAttribute("color","red");
    }
</script>

您可以调用函数 s，该函数将为颜色设置属性

A 型框按钮 onClick 更改对象

A-frame button onClick changes object

html

javascript

virtual-reality

webvr

aframe