在 AFrame 中使用按钮移动动态对象

Question

我以前问过这个问题，但我问的不是最好的方式。我正在尝试用一个球创建一个 plinko 风格的 aframe 世界，单击它时它的位置将重置为起始位置。我想要一个按钮来执行此操作，但单击球将起作用。这是我正在使用的html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-text-geometry-component@0.5.1/dist/aframe-text-geometry-component.min.js"></script>
    <script src="https://unpkg.com/aframe-template-component@3.x.x/dist/aframe-template-component.min.js"></script>
    <script src="https://unpkg.com/aframe-layout-component@4.x.x/dist/aframe-layout-component.min.js"></script>
    <script src="https://unpkg.com/aframe-event-set-component@5.x.x/dist/aframe-event-set-component.min.js"></script>
    <script src="https://unpkg.com/aframe-proxy-event-component/dist/aframe-proxy-event-component.min.js"></script>
    <script src="https://unpkg.com/aframe-debug-cursor-component/dist/aframe-debug-cursor-component.min.js"></script>
    <script src="//cdn.rawgit.com/donmccurdy/aframe-physics-system/v4.0.1/dist/aframe-physics-system.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
    
    <title>Project ssdd</title>
  </head>
  <body>
    <script src="/pball.js"></script>
    <a-scene
      class="fullscreen"
      canvas=""
      debug="true"
      physics="debug: true"
      background="color: #0d0d0d"
      cursor="rayOrigin: mouse"
    >
      <a-entity id="camera" position="0 1.6 0">
        <a-entity
          id="camera"
          look-controls=""
          wasd-controls
          kinematic-body
          foo
          velocity="0 0 0"
        >
        </a-entity>
      </a-entity>

      <a-entity
        geometry="primitive: plane; height: 20; width: 20"
        material="color: #009e2f"
        static-body=""
        rotation="-90 0 0"
      ></a-entity>
      <a-entity
        geometry="primitive: plane; height: 7; width: 20"
        position="-10 3 0"
        material="color: #828282"
        velocity=""
        static-body="sphereRadius: NaN"
        rotation="0 90 0"
      ></a-entity>
      <a-entity
        geometry="primitive: plane; height: 7; width: 20"
        position="0 3 -10"
        material="color: #828282"
        velocity=""
        static-body="sphereRadius: NaN"
      ></a-entity>
      <a-entity
        geometry="primitive: plane; height: 7; width: 20"
        position="0 3 10"
        material="color: #828282"
        velocity=""
        static-body="sphereRadius: NaN"
        rotation="0 180 0"
      ></a-entity>
      <a-entity
        geometry="primitive: plane; height: 7; width: 20"
        position="10 3 0"
        material="color: #828282"
        velocity=""
        static-body="sphereRadius: NaN"
        rotation="0 -90 0"
      ></a-entity>
      <a-entity></a-entity>
      <a-entity
        light="color: #ffffff; type: point; angle: 180; intensity: 0.5"
        data-aframe-default-light=""
        aframe-injected=""
        position="0 5 0"
      ></a-entity>
      <a-entity
        geometry="primitive: box;"
        velocity=""
        dynamic-body="sphereRadius: NaN"
        position="1 8 1"
        rotation="0 0 0"
        id="test"
        material="color: #ff0000"
        foo
      ></a-entity>
    </a-scene>
  </body>
</html>

这是我正在使用的 Javascript：

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 });
      }
    }
  });

Answer 1

您需要将物理引擎与更新后的位置同步。 dynamic-body 组件有一个 syncToPhysics() 函数：

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

在 AFrame 中使用按钮移动动态对象

Moving a Dynamic object with a button in AFrame

html

javascript

three.js

aframe