制作一个按钮来移动一个对象

Question

我正在制作一个 A-Frame 网站，我需要创建一个按钮来将 ID 为“test”的球移动到它的起始位置：0 8 0。我已经尝试使用 setAttribute 脚本并且它不起作用。这是我目前正在使用的 javascript 代码：

AFRAME.registerComponent('ballreset', {
  events: {
    click: function(evt)
    {
      document.getElementById('test').setAttribute('position', {x:0, y:8, z:0});
      
    }
  }
});

编辑：我发现代码中有错别字。但是没有解决问题

Answer 1

如果没有完整的例子，很难说出问题到底是什么，但是，

确保你有一个基于 raycaster 的 cursor component。鼠标点击无法像处理 HTML 元素那样处理 webGL 渲染。
确保点击侦听器正常工作，即。通过记录每次点击
确保具有给定 id 的元素在单击时存在

下面是一个类似于你想要实现的东西的工作版本（点击任何对象）：

<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
<script>
  AFRAME.registerComponent('foo', {
    events: {
      click: function(evt) {
        // grab the current position
        let pos = this.el.getAttribute("position");
        // move upwards
        this.el.setAttribute('position', { x: pos.x, y: pos.y + 0.25, z: pos.z });
      }
    }
  });
</script>
<!-- attach a cursor component -->
<a-scene cursor="rayOrigin: mouse">
  <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" foo></a-box>
  <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" foo></a-sphere>
  <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" foo></a-cylinder>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" foo></a-plane>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

制作一个按钮来移动一个对象

Making a Button to move an object

javascript

three.js

aframe