<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/gftruj/aframe-hand-tracking-controls-extras/dist/aframe-hand-tracking-controls-extras-full.js"></script>
</head>
<body style="margin: 0px; overflow: hidden">
<a-scene>
<a-sky color="lightblue"></a-sky>
<a-plane
color="yellow"
width="100"
height="10"
position="0 0 0"
rotation="-90 0 0"
></a-plane>
<a-ocean position="0 0 -10" width="100" depth="10" density="15"></a-ocean>
<a-plane
color="yellow"
width="100"
height="10"
position="0 0 -20"
rotation="-90 0 0"
></a-plane>
<a-box color="red" height="0.5" class="tele" position="0 0.4 -14">
</a-box>
<a-box color="red" height="0.5" class="tele" position="1 0 -12"> </a-box>
<a-box color="red" height="0.5" class="tele" position="0.5 0.3 -10">
</a-box>
<a-box color="red" height="0.5" class="tele" position="-1 0.2 -8">
</a-box>
<a-box color="red" height="0.5" class="tele" position="0 0 -6"> </a-box>
<a-entity id="player">
<a-entity id="camera" camera wasd-controls look-controls></a-entity>
<a-entity
id="left-hand"
hand-tracking-controls="hand: left"
hand-tracking-extras
hand-teleport="rig: #player;"
></a-entity>
<a-entity
id="right-hand"
hand-tracking-controls="hand: right"
hand-tracking-extras
hand-teleport="rig: #player;"
></a-entity>
</a-entity>
</a-scene>
</body>
</html>