AFrame - 在注视/点击时移动相机答案

【问题标题】：AFrame - Moving Camera Upon Gaze/ClickAFrame - 在注视/点击时移动相机
【发布时间】：2018-04-05 15:47:09
【问题描述】：

我对编码比较陌生，所以请温柔一点！我正在 AFrame 中为一个平面设计课程做一个项目，需要帮助来实现我的概念功能的一部分。

我正在研究仅使用他们的凝视通过检查点移动用户在空间中移动的想法。我已经能够挖掘出检查点的代码，以及启动凝视点击的代码，但我想让两者一起工作，但我不确定如何。

本质上，我需要的是当光标悬停在检查点上一段时间后，相机移动到检查点的位置。

我觉得对于知道自己在做什么的人来说，这可能是一个简单的解决方法，但不幸的是，我不知道。

我的代码目前如下：

  <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v3.13.1/dist/aframe-extras.min.js"></script>
<script src="https://unpkg.com/aframe-environment-component@1.0.0/dist/aframe-environment-component.min.js"></script>
<script src="https://unpkg.com/aframe-animation-component@3.2.1/dist/aframe-animation-component.min.js"></script>
<script src="gpoly.js"></script>
<!---CAMERA--->
        <a-entity position="0 2.2 4">
<a-entity camera="userHeight: 1.6" universal-controls="movementControls: checkpoint"
            checkpoint-controls="mode: animate">
  <a-entity position="0 0 -3"
            geometry="primitive: ring; radiusOuter: 0.30;
                      radiusInner: 0.20;"
            material="color: cyan; shader: flat"
            cursor="maxDistance: 30; fuse: true">
    <a-animation begin="click" easing="ease-in" attribute="scale"
         fill="backwards" from="0.1 0.1 0.1" to="1 1 1" dur="150"></a-animation>
    <a-animation begin="fusing" easing="ease-in" attribute="scale"
         fill="forwards" from="1 1 1" to="0.1 0.1 0.1" dur="1500"></a-animation>
  </a-entity>
</a-entity>

 <!--- CHECKPOINTS --->
              <a-entity position="1 1 1">
    <a-cylinder checkpoint="offset: 0 1.6 0" radius="1" height="0.1" position="0 0 -5.2" color="#CCCCCC"></a-cylinder>
    <a-cylinder checkpoint="offset: 0 1.6 0" radius="1" height="0.1" position="3 0 0" color="#CCCCCC"></a-cylinder>
    <a-cylinder checkpoint="offset: 0 1.6 0" radius="1" height="0.1" position="-3 0 0" color="#CCCCCC"></a-cylinder>
    <a-cylinder checkpoint="offset:0 1.6 0" radius="1" height="0.1" position="-3 0 13.063" color="#CCCCCC"></a-cylinder>
  </a-entity> 
    </a-scene>
</body>

【问题讨论】：

标签： javascript aframe virtual-reality

【解决方案1】：

快速浏览一下检查点组件，看起来它正在等待“点击”事件来启动到检查点的移动。默认情况下，光标会在 1500 毫秒后触发“点击”事件，您可以将该时间更改为首选值：

https://aframe.io/docs/0.8.0/components/cursor.html#properties_fusetimeout

如果你像这样修改你的光标有帮助吗？

cursor="maxDistance: 30; fuse: true; fuseTimeout: 500;"

要考虑的另一件事是将通用控件组件移动到包装相机的实体上，而不是相机本身：

<a-entity position="0 2.2 4" universal-controls="movementControls: checkpoint"
        checkpoint-controls="mode: animate">
    <a-entity camera="userHeight: 1.6">
...

【讨论】：