Moving A Dynamic Object With A Button In AFrame

I have asked this question before but I didn't ask it in the best way. I am trying to create a plinko-style aframe world with a ball that will have it's position reset to the start

Solution 1:

You need to synchronize the physics engine with the updated position. The dynamic-body component has a syncToPhysics() function:

<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/n5ro/aframe-physics-system@v4.0.1/dist/aframe-physics-system.min.js"></script>
<script>
  AFRAME.registerComponent("foo", {
    init: function() {
      this.el.addEventListener("click", e => {
        // reset position
        this.el.setAttribute("position", "0 2 -4")
        // sync
        this.el.components["dynamic-body"].syncToPhysics();
      })
    }
  })
</script>
<a-scene physics cursor="rayOrigin: mouse">
  <a-sphere position="0 1.25 -5" radius="0.25" color="#EF2D5E" dynamic-body foo></a-sphere>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" static-body></a-plane>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>