VR tunnel. animatie verversen terug naar de inleiding klik, voor de VR mode in fullscreen, op het VR logo.
Met de muis kan je de camera draaien en met de pijltjestoets verplaatsen.
De tunnel bestaat uit 4 gekoppelde buizen die door het luchtruim zoeven
Animatie met pentomino "N", "Z" en parallellogrammen
Om interferentie tussen de achter en voorvlakken van de buizen te voorkomen is de afstand tussen de buizen 20 cm
Aan de tunnelbuizen is geluid toegevoegd (regel 39, 46, 53, en 60)
<!DOCTYPE html>
<html>
<head>
<title>VR Tunnel</title>
<meta name="description" content="tunnel">
<script src="../lib/aframe-v1.2.0.min.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<img id ="driehoek" src="../assets/driehoeken.png">
<img id ="pento" src="../assets/pento_drieh.png">
<img id ="vijfh" src="../assets/vlieger_vijfh2.png">
<img id ="lucht" src="../assets/wolken_equirect.jpg">
<img id ="pent_par" src="../assets/pento_paral.png">
<audio id="ruis" src="../assets/ruis.mp3"></audio>
</a-assets>
<a-entity
animation="property: rotation; from: 0 0 0; to: 360 0 360; easing: linear; loop: true; dur: 30000">
<a-sky src="#lucht"></a-sky>
</a-entity>
<a-entity id="rig"
movement-controls position="0 -1.6 0">
<a-entity
camera position="0 1.6 0"
look-controls wasd-controls="acceleration:100">
</a-entity>
</a-entity>
<a-entity
animation="property: position; from: 0 0 40.4; to: 0 0 -40.4; dur: 20000; easing: linear; loop: true">
<a-entity
geometry="primitive: box; width: 2; height: 2; depth: 20;"
rotation="0 0 45"
position="0 0 -30.4"
material="src: #vijfh; transparent: true; side: double;"
sound="src: #ruis; autoplay: true; loop: true">
</a-entity>
<a-entity
geometry="primitive: box; width: 2; height: 2; depth: 20;"
rotation="0 0 45"
position="0 0 -10.2"
material="src: #driehoek; transparent: true; side: double;"
sound="src: #ruis; autoplay: true; loop: true">
</a-entity>
<a-entity
geometry="primitive: box; width: 2; height: 2; depth: 20;"
rotation="0 0 45"
position="0 0 10.2"
material="src: #pento; transparent: true; side: double;"
sound="src: #ruis; autoplay: true; loop: true">
</a-entity>
<a-entity
geometry="primitive: box; width: 2; height: 2; depth: 20;"
rotation="0 0 0"
position="0 0 30.4"
material="src: #pent_par; transparent: true; side: double;"
sound="src: #ruis; autoplay: true; loop: true">
</a-entity>
</a-entity>
</a-scene>
</body>
</html>