gevangen in aliens. terug naar de inleiding
Een animatie met 7 boxen met geometrische en bezier vormen als material. De camera bevindt zich in de middelste box met aliens als material
Met functieknop 1 reset de camera naar het midden van de box met de aliens.
Dit is niet mogelijk met de A-Frame box primitive. Zie de animatie Unindentified objects, de alien wordt onzichtbaar zodra hij buiten de box komt
Op de alien is duidelijke het directional light effect te zien dit omdat de alien gebruik maakt van MeshStandardMaterial, de overige kubussen maken gebruik van MeshBasicMaterial.
De materials van de boxen zijn afbeeldingen van de processing animaties:
<!DOCTYPE html>
<<html>
<head>
<title>register cubemapbox</title>
<meta name="description" content="register box">
<script src="../lib/aframe-v1.2.0.min.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);
});
}
});
</scrip>
AFRAME.registerComponent('cubemapbox2', {
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_nx_02.png' ), side: THREE.DoubleSide, alphaTest: 0.5} ),
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../assets/px_nx_02.png' ), side: THREE.DoubleSide, alphaTest: 0.5} ),
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../assets/py_ny_02.png' ), side: THREE.DoubleSide, alphaTest: 0.5} ),
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../assets/py_ny_02.png' ), side: THREE.DoubleSide, alphaTest: 0.5} ),
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../assets/pz_nz_02.png' ), side: THREE.DoubleSide, alphaTest: 0.5} ),
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../assets/pz_nz_02.png' ), side: THREE.DoubleSide, alphaTest: 0.5} ),
];
this.mesh = new THREE.Mesh(this.vorm, this.kubusafbeeldingen);
el.setObject3D('mesh', this.mesh);
}
});
</script>
<script>
AFRAME.registerComponent('cubemapbox3', {
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_nx_03.png' ), side: THREE.DoubleSide, alphaTest: 0.5} ),
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../assets/px_nx_03.png' ), side: THREE.DoubleSide, alphaTest: 0.5} ),
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../assets/py_ny_03.png' ), side: THREE.DoubleSide, alphaTest: 0.5} ),
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../assets/py_ny_03.png' ), side: THREE.DoubleSide, alphaTest: 0.5} ),
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../assets/pz_nz_03.png' ), side: THREE.DoubleSide, alphaTest: 0.5} ),
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../assets/pz_nz_03.png' ), side: THREE.DoubleSide, alphaTest: 0.5} ),
];
this.mesh = new THREE.Mesh(this.vorm, this.kubusafbeeldingen);
el.setObject3D('mesh', this.mesh);
}
});
</script>
<script>
AFRAME.registerComponent('cubemapbox4', {
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_nx_04.png' ), side: THREE.DoubleSide, alphaTest: 0.5} ),
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../assets/px_nx_04.png' ), side: THREE.DoubleSide, alphaTest: 0.5} ),
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../assets/py_ny_04.png' ), side: THREE.DoubleSide, alphaTest: 0.5} ),
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../assets/py_ny_04.png' ), side: THREE.DoubleSide, alphaTest: 0.5} ),
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../assets/pz_nz_04.png' ), side: THREE.DoubleSide, alphaTest: 0.5} ),
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../assets/pz_nz_04.png' ), side: THREE.DoubleSide, alphaTest: 0.5} ),
];
this.mesh = new THREE.Mesh(this.vorm, this.kubusafbeeldingen);
el.setObject3D('mesh', this.mesh);
}
});
</script>
<script>
AFRAME.registerComponent('cubemapbox5', {
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_nx_05.png' ), side: THREE.DoubleSide, alphaTest: 0.5} ),
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../assets/px_nx_05.png' ), side: THREE.DoubleSide, alphaTest: 0.5} ),
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../assets/py_ny_05.png' ), side: THREE.DoubleSide, alphaTest: 0.5} ),
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../assets/py_ny_05.png' ), side: THREE.DoubleSide, alphaTest: 0.5} ),
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../assets/pz_nz_05.png' ), side: THREE.DoubleSide, alphaTest: 0.5} ),
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../assets/pz_nz_05.png' ), side: THREE.DoubleSide, alphaTest: 0.5} ),
];
this.mesh = new THREE.Mesh(this.vorm, this.kubusafbeeldingen);
el.setObject3D('mesh', this.mesh);
}
});
</script>
<script>
AFRAME.registerComponent('cubemapbox6', {
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_nx_06.png' ), side: THREE.DoubleSide, alphaTest: 0.5} ),
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../assets/px_nx_06.png' ), side: THREE.DoubleSide, alphaTest: 0.5} ),
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../assets/py_ny_06.png' ), side: THREE.DoubleSide, alphaTest: 0.5} ),
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../assets/py_ny_06.png' ), side: THREE.DoubleSide, alphaTest: 0.5} ),
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../assets/pz_nz_06.png' ), side: THREE.DoubleSide, alphaTest: 0.5} ),
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../assets/pz_nz_06.png' ), side: THREE.DoubleSide, alphaTest: 0.5} ),
];
this.mesh = new THREE.Mesh(this.vorm, this.kubusafbeeldingen);
el.setObject3D('mesh', this.mesh);
}
});
</script>
<script>
AFRAME.registerComponent('cubemapbox7', {
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_nx_07.png' ), side: THREE.DoubleSide, alphaTest: 0.5} ),
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../assets/px_nx_07.png' ), side: THREE.DoubleSide, alphaTest: 0.5} ),
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../assets/py_ny_07.png' ), side: THREE.DoubleSide, alphaTest: 0.5} ),
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../assets/py_ny_07.png' ), side: THREE.DoubleSide, alphaTest: 0.5} ),
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../assets/pz_nz_07.png' ), side: THREE.DoubleSide, alphaTest: 0.5} ),
new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( '../assets/pz_nz_07.png' ), side: THREE.DoubleSide, alphaTest: 0.5} ),
];
this.mesh = new THREE.Mesh(this.vorm, this.kubusafbeeldingen);
el.setObject3D('mesh', this.mesh);
}
});
</script>
<a-scene>
<a-assets>
<img id="wolken" src="../assets/lucht.jpg">
<img id="alien" src="../assets/alien.png">
</a-assets>
<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:100"
gamepad-controls ="acceleration:100"
knop_1="position: 0 1.6 0">
</a-entity>
</a-entity>
<a-sky src="#wolken"> </a-sky>
<a-entity
geometry="primitive: box; width: 2; height: 2; depth: 2;"
material="src: #alien; transparent: true; side: double;"
animation="property: rotation; from: 0 0 0; to: 360 360 260; easing: linear; loop: true; dur: 10000"
position="0 0 0">
</a-entity>
<a-entity cubemapbox2="width: 2.5; height: 2.5; depth: 2.5;"
animation="property: rotation; from: 0 0 0; to: 360 360 360; easing: linear; loop: true; dur: 10000"
position="-4 0 0">
</a-entity>
<a-entity cubemapbox3="width: 2.5; height: 2.5; depth: 2.5;"
animation="property: rotation; from: 0 0 0; to: 360 360 360; easing: linear; loop: true; dur: 10000"
position="4 0 0">
<a-entity>
<a-entity cubemapbox4="width: 2.5; height: 2.5; depth: 2.5;"
animation="property: rotation; from: 0 0 0; to: 360 360 360; easing: linear; loop: true; dur: 10000"
position="0 0 -4">
</a-entity>
<a-entity cubemapbox5="width: 2.5; height: 2.5; depth: 2.5;"
animation="property: rotation; from: 360 360 360; to: 0 0 0; easing: linear; loop: true; dur: 10000"
position="0 0 4">
</a-entity>
<a-entity cubemapbox6="width: 4.5; height: 2.5; depth: 2.5;"
animation="property: rotation; from: 0 0 0; to: 360 360 360; easing: linear; loop: true; dur: 10000"
position="0 4 0">
</a-entity>
<a-entity cubemapbox7="width: 4.5; height: 2.5; depth: 2.5;"
animation="property: rotation; from: 360 360 360; to: 0 0 0; easing: linear; loop: true; dur: 10000"
position="0 -4 0">
</a-entity>
</a-scene>
</body>
</html>