Possible to use with gaze?

[mokargas]

This is more a general question

I like the parabolic teleportation effect, however for my users with a cardboard HMD and no controllers, I don't see a way of using it. Is it possible to trigger the teleport parabolic path with a button and have it appear at the cursor?

[mauriciomartinez-itesm]

Hey @mokargas , I've used it with shake.js to implement a solution for buttonless HMD, you can use it with any other input you can think of that is web supported, just remember to emit the event then use it as a startevent and do the same for the stopevents.

[rdub80]

@mauriciomartinez-itesm I built a component a while back with shake.js: https://www.npmjs.com/package/aframe-shake2show-component, what @mokargas is asking is if there is a way to get the teleportation path show up on "long press" and execute on "release" on the cardboard v2 headsets and similar third party headsets - they come with a built-in button that touches the screen. I was looking for something like that too.

[mauriciomartinez-itesm]

Oh sure, there's no problem with that:

You'll have to do this in javascript

AFRAME.registerComponent('touch-listener', {
  init: function () {
    var targetEl = this.el;
    
    //Create the touchstart event
    document.querySelector('a-scene').addEventListener('touchstart', function () {
 //Emit this event to listen it from the teleport controls
      targetEl.emit('startouch')
    })
    
    //Create the touchend event
     document.querySelector('a-scene').addEventListener('touchend', function () {
//Emit this event to listen it from the teleport controls
        targetEl.emit('clickend')
    })
    
  }
});

And on your AFRAME Scene you'll have to do this

<a-entity position=".2 -.1 0"
       touch-listener
        teleport-controls=
                  "cameraRig: #player;
                   teleportOrigin: #eye;
                   startEvents:touchstart;
                   endEvents:touchend;"
        >

I hope this helps

[rdub80]

@mauriciomartinez-itesm could you elaborate on what #eye is? I set up a glitch for testing but I can't get it to work: https://glitch.com/edit/#!/aframe-teleport-controls-extra

[mauriciomartinez-itesm]

#eyes are the camera, I'm using a camera rig in order to be able to make use of a vive or a Rift if available, the #player is the camera rig.

[rdub80]

@mauriciomartinez-itesm do you have a working example? I have three ways on how I want to initiate and execute teleportation

1. MouseDown/MouseUp
2. TouchDown/TouchUp
3. KeyDown/KeyUp (spacebar 32)

I did some updates here but still no luck:
https://glitch.com/edit/#!/aframe-teleport-controls-extra

[mauriciomartinez-itesm]

You haven't added anything on your JS file, I'll help you in a bit directly on the glitch page.

[uurcank]

I could not apply this in react. Any idea how to register the component there? "AFRAME.registerComponent('touch-listener " does not seem to work there.