joystickknop events als component

registreren van joystickknop events als component tergug naar de inleiding

Met de joystick roteer en verplaats je de balk, met joystickknop 2 verandert de kleur.

De naam van de component is "button_down_up" (regel 13)

De addEventListener functies (regel 22 en regel 27) worden uitgevoerd als knop 2 van de joystick (in de code is dat gamepadbutton 1) wordt ingedrukt of losgelaten.

De component wordt in regel 44 van de box entity aangeroepen met "gamepad-controls button_down_up"

De addEventListeners bemerken veranderingen van de data in het datatype "el" (regel 19) waarin alle data van de box (het element) zit

In regel 20 wordt de color waarde "03befc" (regel 37) van de box met getAttribute uit "el" gehaald en in de variabele defaultColor gestopt

Zodra de knop wordt losgelaten wordt met setAttribute (regel 29) deze kleur weer aan de box gegeven

De component "weet" dankzij de addEventListener (regel 22 en 27) of de knop is ingedrukt of losgelaten.

Het datatype "data" bevat de data van de component hier color data blue (regel 44)

Deze kleur wordt door het indrukken van de knop middels setAttribute (regel 24) aan de box color gegeven (regel 41) zo wordt de box blauw

In het schema staat de default color van de component hier "red" (regel 15) deze waarde wordt overgeschreven door color blue (regel 44)

this.data en this.el zijn component prototype properties

De init methode (regel 17) is een van de 8 methodes die worden gebruikt in AFRAME.registerComponent

Camera bewegingen

De camera wordt in de schets niet gecodeerd dus in de scene wordt de default camera gebruikt

De default camera beweegt zich in de wereld (de scene) met de toetsen a,s ,d en w, de pijltjestoetsen en de muis

De joystick camera staat binnen de box (gamepad-controls regel 44) entity zo zal met de joystick alleen de box bewegen. De wereld beweegt niet !!

In de animatie objecten boven de wolken beweegt de camera zich in de wereld.

Je kan de camera bewegen met:

1) toetsen: a, s, d, w , x en z bewegingen

2) de pijltjestoetsen, x en z bewegingen

3) de muis, x en y rotatie

4) de joystick, x en y rotatie en x, en z bewegingen

Voor de schets werd als voorbeeld gebruikt "Handling Events Width Javascript"

 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>button_down_up</title>
  <meta name="description" content="button_down_up">
  <script src="../lib/aframe-v1.2.0.min.js"></script>
  <script src="../lib/aframe-gamepad-controls.js"></script>
<body>
 
  <script>
    AFRAME.registerComponent('button_down_up', {
      schema: {
     color: {default: 'red'}
   },
      init: function () {
        var data = this.data;
        var el = this.el;  // <a-box>
        var defaultColor = el.getAttribute('material').color;
 
        el.addEventListener('gamepadbuttondown:1', function () {
          console.log('knop 2 is ingedrukt');
          el.setAttribute('color', data.color);
        });
 
        el.addEventListener('gamepadbuttonup:1', function () {
          console.log('knop 2 is losgelaten');
          el.setAttribute('color', defaultColor);
        });
      }
    });
  </script>
 
    <a-scene>
    <a-assets>
        <img id="wolken" src="../assets/lucht.jpg">
      </a-assets>
    <a-sky src="#wolken"></a-sky>
 
    <a-box color="#03befc" width="10"
         position="0 1 -4"
         rotation="45 0 0"
         gamepad-controls
         button_down_up="color: blue"></a-box>
  </a-scene>
 
  </body>
</body>
</html>

Flevopink