Fractalstad

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

roterende fractalstad in fullscreen

De panorama afbeelding is 5000 x 3750 pixels waardoor er veel meer details zijn te zien

In mijn computer is de afbeelding omgezet naar 4096 x 3072 pixels (zie de console)

De fractalstad is gemaakt met de fractals Amazing Box en Sierpinski

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

Met de joystick kan de camera, binnen de fractalstad, in y richting roteren en in x en z richting verplaatsen

met de schuifknop naast de joystick roteert de x as

Met functieknop 1 reset de camera naar het midden van de fractalstad

Met functieknop 2 reset de camera 900 meter buiten de fractalstad.

de niet roterende fractalstad in fullscreen

Onderstaand de schets van de roterende fractalstad

 
<!DOCTYPE html>
<html>
<head>
  <title>roterende fractalstad</title>
  <meta name="description" content="fractalstad">
  <script src="../lib/aframe-v1.2.0.min.js"></script>
  <script src="../lib/aframe-gamepad-controls.js"></script>
</head>
<body>
 
<script>
       AFRAME.registerComponent('knop_1', {
         schema: {
         position:{default:"0 -1.6 0.2"}
   },
        init: function () {
           var data = this.data;
           var el = this.el;
           el.addEventListener('gamepadbuttondown:0', function () {
           el.setAttribute('position', data.position);
           });
         }
       });
 
  </script> 

  <script>
       AFRAME.registerComponent('knop_2', {
         schema: {
         position:{default:"0 -1.6 0.2"}
   },
         init: function () {
           var data = this.data;
           var el = this.el;
           el.addEventListener('gamepadbuttondown:1', function () {
           el.setAttribute('position', data.position);
           });
         }
       });
  </script>

  <a-scene>
    <a-assets>
      <img id ="fractal" src="../assets/AmazingBox_Sierpinski_3d.png">
      <img id ="wolken" src="../assets/wolken_equirect.jpg">
    </a-assets> 
 
   <a-sky src="#wolken"></a-sky> 

   <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:800"
       gamepad-controls ="acceleration:800"
      knop_1="position: 0 1.6 0.2"
      knop_2="position: 0 1.6 800">
    </a-entity>
  </a-entity>
 <a-entity
   geometry="primitive: sphere; radius: 200;"
   position="0 0 0"
   material="src: #fractal; transparent: true; side: double;"
   animation="property: rotation; from: 0 0 0; to: 360 360 360; easing: linear; loop: true; dur: 50000">
 </a-entity>
 </a-scene>
</body>
</html>

Flevopink