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.
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>