如何在 Aframe 中更改相机或热点位置

Question

我是A-Frame 和Javascript 的新手。我浏览了A-Frame 博客上的360gallery 代码并对其进行了调整。

我需要的是：如果我站在天空盒中的特定位置，我已经设置了3个热点

1. 在我站的地方
2. 和 3. 我想去的热点的位置，它将在天空盒上切换另一个纹理，同时将我的位置更改为那个选定的热点。一种虚拟旅游。

到目前为止，我已经实现的是天空盒的纹理随着我看到或选择一个热点而变化。

但这个职位是我卡住并需要帮助的地方。

Answer 1

Don McCurdy 的library for aframe checkpoints 可能对您有所帮助。您可以将属性checkpoint 添加到热点实体，然后单击它们，相机将飞到热点。如果相机应该在热点之前停止，以便它仍然可见，那么您可以添加一个偏移量（在本例中为 5m）。

  <script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v4.1.2/dist/aframe-extras.min.js"></script>

  <a-entity id="rig" movement-controls="controls: checkpoint" checkpoint-controls="mode: animate" position="0 1.6 0" >
    <a-entity id="camera" camera
              look-controls="pointerLockEnabled: true"
              position="0 0 5" <!-- camera will stop 5m (on z-axis) before the checkpoint -->
              camera-listener>
      <a-entity cursor="fuse: true"
                position="0 0 -1"
                geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03;"
                material="color: #CCC; shader: flat;"
                visible="false">
        <a-animation begin="click" easing="ease-in" attribute="scale" dur="150"
           fill="forwards" from="0.1 0.1 0.1" to="1 1 1"></a-animation>
        <a-animation begin="cursor-fusing" easing="ease-in" attribute="scale" dur="1500"
           fill="backwards" from="1 1 1" to="0.1 0.1 0.1"></a-animation>
      </a-entity>
    </a-entity>
  </a-entity>

  <a-sphere checkpoint position="-10 1.6 8" color="white" material="emissive: white" radius="0.2"></a-sphere>
  <a-sphere checkpoint position="0 1.6 0" color="white" material="emissive: white" radius="0.2"></a-sphere>
  <a-sphere checkpoint position="-10 1.6 0" color="white" material="emissive: white" radius="0.2"></a-sphere>