A帧限制相机y距离答案

【问题标题】：A-frame limit cameras y distanceA帧限制相机y距离
【发布时间】：2021-11-24 01:13:24
【问题描述】：

我有一些代码可以限制相机在 A 帧中的移动，所以当相机从起点移动 10 个空间时，它们会被传送回位置 0、1.6、0。目前，这适用于玩家 x或 y 轴从起点移动 10 个空格。我该如何修改它，以便玩家只有在仅他们的 y 位置从他们的起点移动 10 个空格时才会被传送回来？代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
  <meta charset="UTF-8" />
</head>

<body>
  <script>
    AFRAME.registerComponent('limit-my-distance', {
      init: function() {
        this.zero = new THREE.Vector3(0, 0, 0);
      },
      tick: function() {
        if (this.el.object3D.position.distanceTo(this.zero) > 10) {
          this.el.object3D.position.set(0, 1.6, 0);
        }
      }
    });
  </script>
  <a-scene>
    <a-sphere position="0 2 -10"color="red"></a-sphere>
    <a-plane color="green" position="0 0 -5" rotation="-90 0 0" width="20" height="20"></a-plane>
    <a-camera limit-my-distance></a-camera>
    <a-sky color="#fff"></a-sky>
  </a-scene>
</body>

</html>

【问题讨论】：

标签： javascript three.js aframe webvr

【解决方案1】：

如果你只想检查y轴，那么就像检查两个数字的差一样简单：

// distance = |y_position - y_start|
const y = this.el.object3D.position.y;
const distance = Math.abs(0 - y);
if (distance > 10) {// do your stuff}

类似这样的：

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
  AFRAME.registerComponent('limit-my-distance', {
    tick: function() {
      if (Math.abs(this.el.object3D.position.y) > 3) {
        this.el.object3D.position.y = 2;
      }
    }
  });
  AFRAME.registerComponent("fall", {
    tick: function() {
      this.el.object3D.position.y -= 0.15
    }
  })
</script>
<a-scene>
  <a-sphere position="0  2 -5" color="red" fall limit-my-distance></a-sphere>
  <a-plane color="green" position="0 0 -5" rotation="-90 0 0" width="20" height="20" material="wireframe: true"></a-plane>
  <a-camera></a-camera>
</a-scene>

【讨论】：

【解决方案2】：

你甚至可以做这样的事情来避免在你周围的位置 4 被困在墙上！这里还有相机移动设置 WASD

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
    AFRAME.registerComponent('limit-my-distance', {
      init: function() {
          // nothing here
      },
      tick: function() {
        // limit Z
        if (this.el.object3D.position.z > 3.8) {
          this.el.object3D.position.z = 3.8;
        }
        if (this.el.object3D.position.z < -3.8) {
          this.el.object3D.position.z = -3.8;
        }

        // limit X
        if (this.el.object3D.position.x > 3.8) {
          this.el.object3D.position.x = 3.8;
        }
        if (this.el.object3D.position.x < -3.8) {
          this.el.object3D.position.x = -3.8;
        }

      }
    });
</script>
<a-scene>
<a-sphere position="0 2 -10"color="red"></a-sphere>
<a-plane color="green" position="0 0 -5" rotation="-90 0 0" width="20" height="20"></a-plane>
<a-camera limit-my-distance look-controls wasd-controls="acceleration:10" position="0 1.6 0"></a-camera>
<a-sky color="#fff"></a-sky>
</a-scene>

【讨论】：