Question

我对编码比较新，所以请保持温和！我正在AFrame的一个项目中从事图形设计课程，需要帮助才能成为我的概念功能的一部分。

我正致力于通过检查点仅通过他们的凝视将用户移动到太空。我已经能够挖掘检查点的代码，以及启动点击凝视的代码，但我想让两者一起工作，我不确定如何。< / p>

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

对于知道自己正在做什么的人，我觉得这可能很容易解决，但不幸的是，我没有。

我的代码目前如下：

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

Answer 1

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

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

关于包装相机的更多信息：

https://aframe.io/docs/0.8.0/primitives/a-camera.html#manually-positioning-the-camera

AFrame - 在凝视/点击时移动相机

1 个答案: