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

【问题标题】：Making a Button to move an object制作一个按钮来移动一个对象
【发布时间】：2021-02-05 17:30:59
【问题描述】：

我正在制作一个 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});
      
    }
  }
});

编辑：我在代码中发现了一个错字。但没有解决问题

【问题讨论】：

setAttribute 接受字符串值，尝试使用 document.getElementById('test').setAttribute('position', '0 8 0');
没有。那没用。

标签： javascript three.js aframe

【解决方案1】：

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

确保你有一个基于光线投射器的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>

【讨论】：

我会考虑到这一点，让球返回给用户，让他们点击并返回。这可能会使其不那么复杂。