Fractals als cubemapbox afbeeldingen geregistreerd

cubemapbox met fractal afbeeldingen als component geregistreerd. terug naar de inleiding

Het gaat hier om 6 fractal afbeeldingen gemaakt met de formules ABoxModKali met _conj

De 6 afbeeldingen worden in regel 26 t/m 31 geladen en gemapt met MeshBasicMaterial een box

Het zijn geen cubemap afbeeldingen. Het map effect zorgt voor het uitrekken tijdens de rotatie

Problemen met A Frame

Het is mij niet gelukt om in A Frame, mbv cubemap , op een box op ieder vlak een andere afbeelding te plaatsen.

Zie verder stackoverflow en de oplossing van bryik op github

Hier heb ik het probleem opgelost door met de Three.js classes BoxBufferGeometry (regel 23) en MeshBasicMaterial (regel 26 t/m 31) een "cubemapbox" te registeren

In regel 36 wordt van de Mesh een 3D object aangemaakt die als entity "fractalbox" wordt gebruikt (regel 50)

Zie het A-Frame artikel "Writing a Component" en mijn "fractalbox" schets gemaakt in Three.js.

Materials

In de schets is gebruik gemaakt van MeshBasicMaterial dit material reageert niet op lichtbronnen dus ambientLight en directionaLicht hebben geen invloed.

MeshStandardMaterial heeft wel invloed op lichtbronnen hier is het directionalLight effect goed te zien.

Je hoef dan geen code voor lichtbronnen toe te voegen omdat A-Frame de default lichtbronnen inschakeld, zie het artikel "objecten boven de wolken"

Onder deze schets staat een schets van een cubemap animatie gemaakt mbv het "aframe-multisrc-component.js" script

 
<!DOCTYPE html>
<html>
<head>
  <title>cubemapbox>/title>
  <meta name="description" content="register cubemapbox">
  <script src="../lib/aframe-v1.2.0.min.js"></script>
</head>
<body>
 
<script>
AFRAME.registerComponent('cubemapbox', {
schema: {
  width: {type: 'number', default: 1},
  height: {type: 'number', default: 1},
  depth: {type: 'number', default: 1}
},
 
init: function () {
  var data = this.data;
  var el = this.el;
 
  this.vorm = new THREE.BoxBufferGeometry( data.width, data.height, data.depth );
      this.kubusafbeeldingen =
      [
        new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../assets/right.png' ), side: THREE.DoubleSide } ),
        new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../assets/left.png' ), side: THREE.DoubleSide } ),
        new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../assets/top.png' ), side: THREE.DoubleSide } ),
        new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../assets/bottom.png' ), side: THREE.DoubleSide } ),
        new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../assets/back.png' ), side: THREE.DoubleSide } ),
        new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../assets/front.png' ), side: THREE.DoubleSide } ),
     ];
 
  this.mesh = new THREE.Mesh(this.vorm, this.kubusafbeeldingen);
 
  el.setObject3D('mesh', this.mesh);
   }
});
  </script>
 
  <a-scene>
      <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:10">
      </a-entity>
    </a-entity>
 
  <a-entity cubemapbox="width: 2.5; height: 2.5; depth: 2.5;"
      animation="property: rotation; from: 0 0 0; to: 0 360 0; easing: linear; loop: true; dur: 30000"
       position="0 0 0">
    </a-entity>
</a-scene>
</body>
</html>

Cubemap met het "aframe-multisrc-component.js" script

Dit script heb ik ook getest met video dit werkt alleen na de eerste keer opstarten van de browser

Dit tgv beperkingen bij autoplay van video en audio, zie het artikel "Autoplay policy in chromium" Deze restricties gelden ook voor firefox

de code is overgenomen van github, de volgorde waarin de afbeeldingen worden geladen klopt hier niet

 
<!DOCTYPE html>
<html>
 <head>
    <title>multisrc cubemapbox</title>
    <script src="../lib/aframe-v1.2.0.min.js"></script>
    <script src="../lib/aframe-multisrc-component.js"></script>
 </head>
<body>
 
  <a-scene>
    <a-assets>
        <img id="xpos" src="../assets/back.png">
        <img id="xneg" src="../assets/bottom.png">
        <img id="ypos" src="../assets/front.png">
        <img id="yneg" src="../assets/left.png">
        <img id="zpos" src="../assets/right.png">
        <img id="zneg" src="../assets/top.png">
  </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:10">
      </a-entity>
   </a-entity>
 
    <a-entity
        geometry="primitive: box;"
        position="0 0 0"
        multisrc="srcs:#xpos,#xneg,#ypos,#yneg,#zpos,#zneg"
        material="side: double;"
        animation="property: rotation; from: 0 0 0; to: 0 360 0; easing: linear; loop: true; dur: 30000">
    </a-entity>
 
      </a-scene>
   </body>
</html>

Flevopink