Ruimtestad 2

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

roterende ruimtestad 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)

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

Met de joystick kan de camera, binnen de ruimtestad, 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 ruimtestad

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

de niet roterende ruimtestad in fullscreen

Onderstaand de schets van de roterende ruimtestad

 
<!DOCTYPE html>
<html>
<head>
  <title>roterende ruimtestad</title>
  <meta name="description" content="ruimtestad">
  <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/ruimtestad2.jpg">
    </a-assets> 
 
   <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
    animation="property: rotation; from: 0 0 0; to: 360 360 360; easing: linear; loop: true; dur: 50000">
    <a-sky src="#fractal"></a-sky> 
  </a-entity>
 
  </a-scene>
</body>
</html>

Flevopink