naar de roterende dingbatboxen in fullscreen
vier dingbat boxen. terug naar de inleiding klik, voor de VR mode in fullscreen, op het VR logo
Met de muis kan je de camera draaien en met de pijltjestoetsen deze in X en Z richting verplaatsen
Met de joystick kan de camera, in y richting roteren en in x en z richting verplaatsen
Met de schuifknop naast de joystick roteert de x as
Met functieknop 1 reset de camera naar het midden van de dingbatboxen.
Een animatie met 4 boxen met dingbat fonts van Manfred Klein
Voor de fontafbeeldingen is gebruik gemaakt van de random dingbat afbeeldingen in de p5.js rubriek "fontfun"
De fontafbeeldingen zijn gedownload als png afbeeldingen met transparantie, dit werkt niet goed met het aframe-v1.2.0.js script
Om alles goed te laten werken heb ik gebruik gemaakt van het aframe-master.js script
De gebruikte fonts
1) SpiralusKrux
2) KaleidoBats
3) ShapeA
4) MathRosetts
<!DOCTYPE html>
<html>
<head>
<title>dingbatbox</title>
<meta name="description" content="dingbatboxen">
<script src="../lib/aframe-master.js"></script>
<script src="../lib/aframe-gamepad-controls.js"></script>
</head>
<body>
<script>
AFRAME.registerComponent('button_down', {
init: function () {
var data = this.data;
var el = this.el;
el.addEventListener('gamepadbuttondown:0', function () {
console.log('knop 1 is ingedrukt');
el.setAttribute('position', data.position);
});
}
});
</script>
<script>
AFRAME.registerComponent('cubemapbox0', {
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.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( '../assets/right0.png'), side: THREE.DoubleSide,alphaTest:0.5}),
new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( '../assets/left0.png' ), side:THREE.DoubleSide,alphaTest:0.5}),
new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( '../assets/top0.png'),side:THREE.DoubleSide,alphaTest:0.5}),
new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( '../assets/bottom0.png'),side:THREE.DoubleSide,alphaTest:0.5}),
new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( '../assets/back0.png' ), side:THREE.DoubleSide,alphaTest:0.5}),
new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( '../assets/front0.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('cubemapbox1', {
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.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( '../assets/right1.png'), side: THREE.DoubleSide,alphaTest:0.5}),
new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( '../assets/left1.png' ), side:THREE.DoubleSide,alphaTest:0.5}),
new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( '../assets/top1.png'),side:THREE.DoubleSide,alphaTest:0.5}),
new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( '../assets/bottom1.png'),side:THREE.DoubleSide,alphaTest:0.5}),
new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( '../assets/back1.png' ), side:THREE.DoubleSide,alphaTest:0.5}),
new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( '../assets/front1.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('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.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( '../assets/right2.png'), side: THREE.DoubleSide,alphaTest:0.5}),
new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( '../assets/left2.png' ), side:THREE.DoubleSide,alphaTest:0.5}),
new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( '../assets/top2.png'),side:THREE.DoubleSide,alphaTest:0.5}),
new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( '../assets/bottom2.png'),side:THREE.DoubleSide,alphaTest:0.5}),
new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( '../assets/back2.png' ), side:THREE.DoubleSide,alphaTest:0.5}),
new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( '../assets/front2.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.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( '../assets/right3.png'), side: THREE.DoubleSide,alphaTest:0.5}),
new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( '../assets/left3.png' ), side:THREE.DoubleSide,alphaTest:0.5}),
new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( '../assets/top3.png'),side:THREE.DoubleSide,alphaTest:0.5}),
new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( '../assets/bottom3.png'),side:THREE.DoubleSide,alphaTest:0.5}),
new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( '../assets/back3.png' ), side:THREE.DoubleSide,alphaTest:0.5}),
new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( '../assets/front3.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">
</a-assets>
<a-sky src="#wolken"> </a-sky>
<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"
gamepad-controls ="acceleration:50"
button_down="position: 0 1.6 0.2">
</a-entity>
</a-entity>
<a-entity light="type: ambient; intensity: 1.5; color: #FFFFFF"></a-entity>
<a-entity cubemapbox0="width: 2.5; height: 2.5; depth: 2.5;"
animation="property: rotation; from: 0 0 0; to: 360 360 260; easing: linear; loop: true; dur: 10000;"
position="2.5 0 0">
</a-entity>
<a-entity cubemapbox1="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="-2.5 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="0 0 -2.5">
</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="0 0 2.5">
</a-entity>
</a-scene>
</body>
</html>