plein als cubemapbox afbeelding geregistreerd

Cubemapbox met afbeelding van een plein als component geregistreerd. terug naar de inleiding

Cubemap afbeeldingen zijn 6 afbeeldingen op een cube geplakt die, als de camera zich in het midden van deze cube bevindt een, 3d afbeelding vormen

Om een 3D afbeelding met cubemaps te maken moeten deze in de juiste volgorde in MeshBasicMaterial worden geladen. Zie ook het Three.js voorbeeld.

Met bijv als benaming (n = negatief, p = positief)

de afbeeldingen worden geladen in de volgorde: px = right , nx = left, py = top, ny = bottom, pz = back en nz = front (zie regel 26 t/m 31)

Cubemap afbeeldingen

In het voorbeeld zijn de cubemap afbeeldingen van Emil Persson, aka Humus gebruikt. Zie ook zijn website met veel cubemap afbeeldingen.

Zie ook het github kanaal van Lucas Crane om panorama afbeeldingen in de verhouding 2 : 1 om te zetten in cubemap afbeeldingen.

 
<!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/px.jpg' ), side: THREE.DoubleSide } ),
        new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../assets/nx.jpg' ), side: THREE.DoubleSide } ),
        new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../assets/py.jpg' ), side: THREE.DoubleSide } ),
        new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../assets/ny.jpg' ), side: THREE.DoubleSide } ),
        new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../assets/pz.jpg' ), side: THREE.DoubleSide } ),
        new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../assets/nz.jpg' ), 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">
      <a-entity
                    camera position="0 1.6 0"
        look-controls wasd-controls="acceleration:10">
      </a-entity>
    </a-entity>
 
  <a-entity cubemapbox="width: 2.5; height: 2.5; depth: 2.5;"
       position="0 0 0">
    </a-entity>
</a-scene>
</body>
</html>

Flevopink