So far I have not seen teleportation used in any mobile VR experiences, and I don’t see why. We should be using it more, I don’t know about you but I prefer being able to control my own moment instead of being along for the ride. But that’s why I made this tutorial about my favorite method:
Waypoints
They are my favorite method of movement for mobile devices. And yes, (at least to my knowledge) I did invent them. So let me explain the concept. The theory is that you have objects in your scene that can be clicked on using a cursor, and when clicked they teleport you to their location. This is what I used in my gallery demo. So why is this method of movement best? First, teleportation is the best method of movement for VR in general since it does not cause nausea. For a lot of people, the experience of moving without the feeling of moving or causing the movement is unsettling. Second, just selecting the floor where you want to teleport to is very easy to implement but is really hard to navigate, I tried it and it is really hard to navigate.
The Code:
I created waypoints using a component so it is really easy to turn any object into a waypoint just like this <a-box waypoint=”.5″></a-box> that box is now a waypoint. Here is the code for the component and camera:
<script type="text/javascript">
AFRAME.registerComponent('waypoint',{
schema:{
offset:{type:'number'default:0}
},
init:function(data){
var offset = this.data.offset;
this.el.addEventListener('click',function(evt){
document.querySelector('a-scene').querySelector('#view').setAttribute('position',{
x:this.getAttribute('position').x,
y:this.getAttribute('position').y+offset,
z:this.getAttribute('position').z
});
});
}
});
</script>
<a-scene>
<a-entity wasd-controlls id="view">
<a-camera position="0 1.6 0">
<a-entity cursor="fuse: false"
position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
material="color: black; shader: flat">
</a-entity>
</a-camera>
</a-entity>
</a-scene>
When you click a waypoint it replaces your position with its position plus a y offset so you aren’t standing inside it. So let’s add some waypoints to our scene:
<a-box position="0 0 2.5" color="#3385ff" height=".25" waypoint=".125"></a-box> <a-box position="0 0 -2.5" color="#3385ff" height=".25" waypoint=".125"></a-box> <a-box position="2.5 0 0" color="#3385ff" height=".25" waypoint=".125"></a-box> <a-box position="-2.5 0 0" color="#3385ff" height=".25" waypoint=".125"></a-box> <a-sphere position="0 3 2.5" color="#ff0000" waypoint=".5"></a-sphere> <a-sphere position="0 3 -2.5" color="#ff0000" waypoint=".5"></a-sphere> <a-sphere position="2.5 3 0" color="#ff0000" waypoint=".5"></a-sphere> <a-sphere position="-2.5 3 0" color="#ff0000" waypoint=".5"></a-sphere>
And now for our demo:
