How do I use checkpoint controls in A-Frame?

Question

I am new to A-Frame and still trying to figure everything out! I'm currently constructing a 3D space and would like to create a guided experience for visitors by providing dots on the floor for them to click and be transported to that position. I found this code online which is perfect but I can't get it to work. Here is the link to my project on Glitch: https://glitch.com/~museum-exhibit-demo

This is the code for my camera:

And this is the code for the cylinder:

Can anyone spot where I'm going wrong?

user_8284356 · Answer

UPDATE:

I just read the current source of aframe-extra and it seems that nothing is broken! In fact there was a backward-incompatible change in the new versions. Rather than the old syntax of:

universal-controls="movementControls: checkpoint;"

Now this new syntax should be used:

movement-controls="controls: checkpoint;"

But keep in mind that since version 3.2.7, the movement offset is calculated on all 3 XYZ axis and therefore the camera will move to the center of the checkpoint. If you want to preserve the height (y) then simply add the code below above line 83:

targetPosition.y = position.y;

Here is a complete working example:


  
    
    Checkpoint Control with AFrame 1.2.0

Information below this line is not valid anymore.

As Piotr already mentioned, the new releases of Aframe-Extra are somehow broken! Using an older version everything will work again.

Below is a working example with Aframe-extra version 3.2.7.

Once the page is fully loaded, click on the screen to lock the cursor, then point the cursor (tiny ring) at a red circle and click.

I also noted few additional options just in case:

spectator: false (switch between 1st and 3rd person view)
pointerLockEnabled:true (hide the mouse)
mode: animate (the other option is teleport)
animateSpeed: 10 (well... adjusts the animation speed)
wasd-controls="enabled: false;" (otherwise user can move around via WASD/arrow keys)

Code:


  
    
    Checkpoint Control with AFrame 1.2.0

user_2425787 · Answer

This won't answer the question, but should solve your problem.

You can substitute the checkpoint-controls with a simple animation system:

you click on a cylinder
you animate the camera from the current position to the cylinder

Which could be implemented like this:

// use a system to keep a global track if we are already moving
AFRAME.registerSystem('goto', {
  init: function() {
    this.isMoving = false
  }
})

// this component will have the actual logic
AFRAME.registerComponent('goto', {
  init: function() {
     let camRig = document.querySelector('#rig')

     // upon click - move the camera
     this.el.addEventListener('click', e => {
        // check if we are already moving
        if (this.system.isMoving) return;

        // lock other attempts to move
        this.system.isMoving = true

        // grab the positions
        let targetPos = this.el.getAttribute("position")
        let rigPos = camRig.getAttribute("position")

        // set the animation attributes. 
        camRig.setAttribute("animation", {
          "from": rigPos,
          "to": AFRAME.utils.coordinates.stringify({x: targetPos.x, y: rigPos.y, z: targetPos.z}),
          "dur": targetPos.distanceTo(rigPos) * 750
        })
        camRig.emit('go')
     })

     // when the animation is finished - update the "shared" variable
     camRig.addEventListener('animationcomplete', e=> {
       this.system.isMoving = false
     })
  }
})

with a setup like this:

How do I use checkpoint controls in A-Frame?

2 Answers