组件中的 a-frame 相机位置值不会改变答案

【问题标题】：a-frame camera position value in component does not change组件中的 a-frame 相机位置值不会改变
【发布时间】：2022-01-03 05:33:09
【问题描述】：

为什么new_position的值在移动相机并再次点击时没有变化？

   <html>
  <head>
    <meta charset="UTF-8" />
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-event-set-component@3.0.3/dist/aframe-event-set-component.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>

    <script>
      AFRAME.registerComponent("go_in_front_camera", {
        init: function() {
          var el = this.el;
          el.addEventListener("click", function() {
            console.log(
              document.querySelector("a-scene").camera.el.object3D.position.x
            );
            var new_position_x = document.querySelector("a-scene").camera.el
              .object3D.position.x;
            var new_position_z = document.querySelector("a-scene").camera.el
              .object3D.position.z;

            var new_position = {
              x: new_position_x - 1,
              y: el.object3D.position.y,
              z: new_position_z - 1
            };

            console.log(new_position);

            el.setAttribute("animation", {
              property: "position",
              to: new_position,
              dur: 2000,
              easing: "linear"
            });
          });
        }
      });
    </script>
  </head>
  <body>
    <a-scene>
      <a-entity
        id="camera-rig"
        position="0 0 0"
        movement-controls="controls: cardboard, gamepad, keyboard, touch; constrainToNavMesh: true; speed: 0.2"
      >
        <a-entity
          id="head"
          camera
          look-controls="pointerLockEnabled: true"
          position="0 1.6 0"
        >
          <a-entity
            cursor="fuse: true;fuseTimeout: 500"
            animation__click="property: scale; startEvents: click; easing: easeInCubic; dur: 150; from: 0.1 0.1 0.1; to: 1 1 1"
            animation__fusing="property: scale; startEvents: fusing; easing: easeInCubic; dur: 1500; from: 1 1 1; to: 0.1 0.1 0.1"
            animation__mouseleave="property: scale; startEvents: mouseleave; easing: easeInCubic; dur: 500; to: 1 1 1"
            geometry="primitive: ring; radiusInner: 0.002; radiusOuter: 0.003"
            material="shader: flat; color: #f7f7ed;"
            position="0 0 -0.1"
          ></a-entity>
        </a-entity>
      </a-entity>

      <a-plane
        id="ground_floor"
        color="blue"
        repeat="10 10"
        rotation="-90 0 0"
        width="30"
        height="30"
      ></a-plane>

      <a-sky color="#212120"></a-sky>

      <a-box
        position="0 1 -2"
        width="1"
        height="1"
        color="red"
        go_in_front_camera
      ></a-box>
    </a-scene>
  </body>
</html>

我编辑了我的代码以显示一个完整的示例。

【问题讨论】：

它似乎正在工作（fiddle here，单击框）
谢谢，确实在您的示例中有效。我添加了我的 camera-rig ，也许是问题所在。

标签： aframe

【解决方案1】：

关于相机，您将框放置在“-1 0 -1”。但相机没有移动。它只是在旋转。所以它的世界地位根本没有改变。

要么：

将坐标转换为相机局部参考空间
获取相机方向向量，并将其添加到相机中

方向选项：

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
  AFRAME.registerComponent('go_in_front_camera', {
    init: function() {
      var el = this.el;
      const dir = new THREE.Vector3();
      el.addEventListener('click', function() {
        const acamera = document.querySelector('a-scene').camera.el.object3D
        acamera.getWorldDirection(dir);
        dir.multiplyScalar(-2);
        dir.add(acamera.position)
        el.setAttribute('animation', {
          property: 'position',
          to: AFRAME.utils.coordinates.stringify(dir),
          dur: 2000,
          easing: 'linear'
        });
      });
    }
  });
</script>
<a-scene cursor="rayOrigin: mouse" raycaster="objects: a-box">
  <a-box position="-1 0.5 -3" color="#4CC3D9" go_in_front_camera></a-box>
  <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
  <a-sky color="#ECECEC"></a-sky>

  <a-entity id="camera-rig" position="0 0 0" movement-controls="controls: cardboard, gamepad, keyboard, touch; constrainToNavMesh: true; speed: 0.2">
    <a-entity id="head" camera look-controls="pointerLockEnabled: true" position="0 1.6 0">
      <a-entity geometry="primitive: ring; radiusInner: 0.002; radiusOuter: 0.003" material="shader: flat; color: #f7f7ed;" position="0 0 -0.1"></a-entity>
    </a-entity>
  </a-entity>

</a-scene>

【讨论】：

【解决方案2】：

由于它是一个以相机为子对象的绑定，因此不应在相机对象上读取位置，而应在相机父对象上读取位置。

document.querySelector("a-scene").camera.el.parentNode.object3D.position

【讨论】：