A-frame Teleportation Mechanic? (Desktop/Cardboard)

Question

I'm working on a project for aframe in which at some point the user "enters" a room (really just getting teleported to a different point in the environment) on clicking on a button.
I have tried using Don McCurdy's checkpoint system as well as simple javascript, but I don't have much knowledge of js and would appreciate any help you could provide.

Example of what I have tried:

AFRAME.registerComponent('teleporter', {

init: function () {
  var button = document.querySelector('#button');
  var cam = document.querySelector('#camera');

  button.addEventListener('click', function () {
    cam.setAttribute('position', '10, 1.6, 10');
  });
 }
});

Answer 1

How about this:

1. You teleport to the button: create a component, which will be attached to the button, and will teleport the camera to the button:

   init: function () {
     var cam = document.querySelector('a-camera');
     var position = this.el.getAttribute("position");
     this.el.addEventListener('click', function () {
       cam.setAttribute('position', position);
     });
   }
   

fiddle here.

2. You specify where to teleport by defining a schema: add a schema to the component:

   AFRAME.registerComponent('teleporter', {
    schema: {
      position: {default: "0 0 0"},
    },
    init: function () {
      var cam = document.querySelector('a-camera');
      var position = this.data.position;
      this.el.addEventListener('click', function () {
        cam.setAttribute('position', position);
      });
    }
   });
   

and use it like this:

<a-sphere position="5 1.25 -6" radius="1.25" color="#EFFD5E"
   teleporter="position:5 1.6 -6"></a-sphere>

defining where You want the player to teleport after the click.

fiddle here.