AFrame - Moving Camera Upon Gaze/Click

Question

I'm relatively new to coding, so please be gentle! I'm working on a project in AFrame for a graphic design class, and need help making part of my concept function.

I'm working on the idea of moving a user through space via checkpoints using just their gaze. I've been able to dig up the code for checkpoints, as well as code for initiating a click upon gaze, but I'd like to make the two work together and I'm not sure how.

Essentially, what I need is for the camera to move to the position of the checkpoint when the cursor hovers over the checkpoint for a set amount of time.

I feel like this is probably an easy fix for someone who knows what they're doing, but unfortunately, I don't.

My code is currently as follows:

  <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/[email protected]/dist/aframe-environment-component.min.js"></script>
<script src="https://unpkg.com/[email protected]/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>

Noam Almosnino Noam Almosnino · Accepted Answer · 2018-04-05T07:08:35

From a quick glance at the checkpoint component, looks like it waits for a 'click' event to initiate the movement to the checkpoint. The cursor triggers a 'click' event by default after 1500ms and you can change that timing to a preferred value:

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

If you modify your cursor like this does it help?

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

Another thing to consider is to move your universal-controls component to the entity that is wrapping the camera, instead of on the camera itself:

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

A bit more info on wrapping the camera:

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

AFrame - Moving Camera Upon Gaze/Click

1 Answers