fractalbox

Fractalbox. terug naar de inleiding klik, voor de VR mode in fullscreen, op het VR logo.

Een VR animatie met de boxIFS en Menger1-IFS fractal formules zie voorbeeld 5 in het artikel dIFS formules combineren

Met de muis kan je de camera draaien en met de pijltjestoets verplaatsen.

De rotaties van de boxen (regel 42) volgen een easInQuad rotatie dit door de default easing property. De wolken rotaties zijn linear (regel 17)

Andere easing rotaties zijn ook mogelijk, zie AR met Hiro en Kanji marker

Veel van de easing bewegingen zijn Bezier bewegingspatronen

 
<!DOCTYPE html>
<html>
 <head>
   <title>fractalbox in VR</title>
   <meta name="description" content="fractalbox in VR">
   <script src="../lib/aframe-v1.2.0.min.js"></script>
</head>
<body>
  <a-scene>
    <a-assets>
      <img id ="wolken" src="../assets/wolken_equirect.jpg">
      <img id ="menger" src="../assets/box_menger.png">
   </a-assets>
 
<a-entity
   animation="property: rotation; from: 0 0 0; to: 360 0 360; easing: linear; loop: true; dur: 30000">
    <a-sky src="#wolken"></a-sky>
</a-entity>
 
   <a-entity id="rig"
       movement-controls position="0 -1.6 0.2">
        <a-entity
                  camera position="0 1.6 0.2"
      look-controls wasd-controls="acceleration:10">
      </a-entity>
    </a-entity>
 
    <a-entity
        light="type: directional; color: #FFFFFF; intensity: 0.5;"
     position="0 300 300">
    </a-entity>
 
    <a-entity
       light="type: ambient; color: #BBB; intensity: 1;">
    </a-entity>
 
    <a-entity
         geometry="primitive: box;"
         position="0 0 0"
         material="src: #menger; transparent: true; side: double;"
        animation="property: rotation; from: 0 0 0; to: 0 -360 360; loop: true; dur: 20000">
    </a-entity>
 
  </a-scene>
</body>
</html>

Flevopink