unindentified objects

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

unindentified objects in fullscreen

De equirectangulaire afbeelding lucht is 5000 x 2500 en wordt door A-frame omgezet in 4096 x 2048

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 van de joystick reset de camera naar het midden van de tunnel

Probleem met de A-Frame box primitive

Zodra de alien buiten de tunnel (box) komt is hij niet meer te zien.

Buiten de tunnel roteren twee sphere primitieven (regel 88 en 94) deze primitiven zijn in de tunnel niet te te zien.

Dit probleem is opgelost door de box als Three.js BoxBuffergeometry en MeshBasicMaterial te registreren, zie de animatie "gevangen in aliens"

camera instellingen

De camera wordt ingesteld in 2 posities 1) voor de VR mode (regel 39) en een voor de browser (regel 40)

zie verder de README in aframe extra, is het githhub kanaal van Don Mcurdy

geneste entity

De entity van de gele en rode cirkel (regel 55 en 60) staan binnen de box entity (regel 49)

zo krijgen de cirkels dezelfde rotation en animation properties (regel 31 en 33) als die van de box en de cirkels bewegen mee met de box.

De sphere (regel 88 en regel 94) krijgen zo ook de animatie properties van regel 86

De schets is gemaakt volgens het ECS = Entity Component System.

 
 <!DOCTYPE html>
<html>
  <head>
    <title>unindentified objects</title>
    <meta name="description" content="unindentified objects">
    <script src="../lib/aframe-v1.2.0.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>

 
    <a-scene>
      <a-assets>
       <img id ="driehoek" src="../assets/driehoeken.png">
       <img id ="alien" src="../assets/alien.png">
       <img id ="lucht" src="../assets/lucht.jpg">
       <img id ="bezier" src="../assets/bezier.png">
       <img id ="bezier2" src="../assets/bezier2.png">
     </a-assets>
     <a-sky src="#lucht"></a-sky>
  
   <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"
          gamepad-controls ="acceleration:100"
          knop_1="position: 0 1.6 0">

    </a-entity>
</a-entity>
 
<a-entity
    geometry="primitive: box; width: 2; height: 2; depth: 40;"
    rotation="0 0 45"
    material="src: #driehoek; transparent: true; side: double;"
    animation="property: position; from: 0 0 -20; to: 0 0 20; dur: 20000; easing: linear; loop: true">
 
    <a-entity
         geometry="primitive: circle; radius: 0.5;"
         material="color: #C8FF32">
    </a-entity>
 
    <a-entity
         geometry="primitive: circle; radius: 0.5;"
         material="color: #DB2A2A"
         rotation="0 90 0">
    </a-entity>
</a-entity>
 
<a-entity
     geometry="primitive: box; width: 2; height: 2; depth: 2;"
     material="src: #alien; transparent: true; side: double;"
     animation="property: position; from: 0 2 0; to: 0 -2 0; dur: 10000; easing: linear; loop: true">
</a-entity>
 
<a-entity
    geometry="primitive: box; width: 2; height: 2; depth: 2;"
    material="src: #bezier; transparent: true; side: double;"
    animation="property: position; from: 0  -1  3; to: 0 1 3; dur: 10000; easing: linear; loop: true">
</a-entity>
 
<a-entity
    geometry="primitive: box; width: 2; height: 2; depth: 2;"
    material="src: #bezier2; transparent: true; side: double;"
    animation="property: position; from: 0  2  -2.5; to: 0  -2  -2; dur: 10000; easing: linear; loop: true">
</a-entity>
 
 
<a-entity
    animation="property: rotation; from: 0 0 0; to: 360 0 0; loop: true; dur: 10000">
    <a-entity
       geometry="primitive: sphere; radius: 3.5;"
       position="5 0 0"
       material="src: #driehoek; transparent: true; side: double">
   </a-entity>
 
  <a-entity
       geometry="primitive: sphere; radius: 3.5;"
       position="-5 0 0"
       material="src: #driehoek; transparent: true; side: double;">>
  </a-entity>
</a-entity>
 
  </a-scene>
 <</body>
</html>

alien.jpg

zie in tekenen met code de schets

alien met meerdere vormen

driehoeken.png

zie in tekenen met code de schets

animatie met 24 driehoeken

bezier.png

zie in curven de schets

Bezier Quadratic Cubic Quadratic animatie

Flevopink