Component als DOM element

componenten box en cylinder als DOM API's of elementen. terug naar de inleiding

In regels 25 en 33 worden met createElement de HTML elementen a-box en a-cylinder aangemaakt

In de regels 26 t/m 30 en 38 t/m 44 krijgen de elementen met setAttribute hun instellingen

In regel 31 t/m 34 nog een demonstratie van het gebruik van getAttribute, in combinatie met het if statement, zo is de kleur van de cylinder #FF9500 ipv red.

In regels 31 en 41 worden de elementen als child aan de scene verbonden dus a-cylinder en a-box tags staan daarom binnen de scene tags

zie het artikel "Adding an entity width .appendChild()

De render functie

In de functie render wordt met requestAnimationFrame een tekenlus gestart waardoor de cylinder in x richting en de box in y richting sinusvormig beweegt

Dit gaat mbv van "position" (regel 52 en 53) daarom zijn de coderegels 29 en 43 overbodig

In de VR Box staan de DOM elementen stil ! De render functie (regel 44) werkt niet in mijn telefoon.

directional light

In regel 19 en 20 zijn twee directional lichtbronnen gecodeerd het effect van deze lichtbronnen is goed te zien op de torus

Je zie een weerkaatsing van het licht op de torus dit door de material eigenschappen roughness: 0.1 en metalness; 0.5 (regel 13)

In regels 39 en 40 krijgt de box ook deze eigenschappen maar het effect van weerkaatsing is niet te zien.

 
<!DOCTYPE html>
<html>
<head>
  <title>componenten als DOM elementen>/title>
  <meta name="description" content="componenten">
  <script src="../lib/aframe-v1.2.0.min.js"></script>
</head>
<body>
<a-scene>
  <a-entity
     geometry="primitive: torus; radius: 1.5; radiusTubular: 0.1; segmentsTubular: 60;"
     material="color: #EAEFF2; roughness: 0.1; metalness: 0.5;"
     rotation="10 0 0"
     position="0 1 -4">
  </a-entity>
  <a-sky color="#E6FBFF"></a-sky>
  <a-entity light="type: ambient; color: #BBB"></a-entity>
  <a-entity light="type: directional; color: #FFF; intensity: 0.3" position="0.4 0.5 1"></a-entity>
  <a-entity light="type: directional; color: #FFF; intensity: 0.3" position="-0.4 0.5 1"></a-entity>
</a-scene>
 
<script>
  var scene = document.querySelector('a-scene');
  var cylinder = document.createElement('a-cylinder');
    cylinder.setAttribute('color', 'red');
    cylinder.setAttribute('height', '2');
    cylinder.setAttribute('radius', '0.75');
    cylinder.setAttribute('position', '-2 2 -4');
    cylinder.setAttribute('rotation', '0 0 0');
    color = cylinder.getAttribute('color'); 
    if(color == 'red'){ 
        cylinder.setAttribute('color', '#FF9500'); 
 }
    scene.appendChild(cylinder);
 
    var box = document.createElement('a-box');
    box.setAttribute('color', '#46BBE8');
    box.setAttribute('metalness', '0.4');
    box.setAttribute('roughness', '0.1');
    box.setAttribute('height', '2');
    box.setAttribute('radius', '0.75');
    box.setAttribute('position', '-2 2 -4');
    box.setAttribute('rotation', '45 45 0');
    scene.appendChild(box);
    var t = 0;
    var t2 = 0;
 function render() {
  t += 0.02;
  t2 -= 0.01
  requestAnimationFrame(render);
  cylinder.setAttribute('position',''+(Math.sin(t))*5+' 1 -4');
  box.setAttribute('position', '-1 '+(Math.sin(t2)+1)+' -4');
 }
   render();
    </script>
  </body>
</html>

Flevopink