<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/aframe-blink-controls/dist/aframe-blink-controls.min.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"
oculus-touch-controls="hand: left"
></a-entity>
<a-entity
id="right-hand"
oculus-touch-controls="hand: right"
blink-controls="collisionEntities: a-plane,[color='red']"
></a-entity>
</a-entity>
</a-scene>
</body>
</html>