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,
Deze transparantie is te zien door aan MeshStandardMaterial transparant: true toe te voegen.
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,transparent: true}),
new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( '../assets/left0.png' ), side:THREE.DoubleSide,transparent: true}),
new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( '../assets/top0.png'), side:THREE.DoubleSide,transparent: true}),
new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( '../assets/bottom0.png'),side:THREE.DoubleSide,transparent: true}),
new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( '../assets/back0.png' ), side:THREE.DoubleSide,transparent: true}),
new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( '../assets/front0.png'), side:THREE.DoubleSide,transparent: true}),
];
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,transparent: true}),
new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( '../assets/left1.png' ), side:THREE.DoubleSide,transparent: true}),
new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( '../assets/top1.png'), side:THREE.DoubleSide,transparent: true}),
new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( '../assets/bottom1.png'),side:THREE.DoubleSide,transparent: true}),
new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( '../assets/back1.png' ), side:THREE.DoubleSide,transparent: true}),
new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( '../assets/front1.png'), side:THREE.DoubleSide,transparent: true}),
];
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,transparent: true}),
new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( '../assets/left2.png' ), side:THREE.DoubleSide,transparent: true}),
new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( '../assets/top2.png'), side:THREE.DoubleSide,transparent: true}),
new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( '../assets/bottom2.png'),side:THREE.DoubleSide,transparent: true}),
new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( '../assets/back2.png' ), side:THREE.DoubleSide,transparent: true}),
new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( '../assets/front2.png'), side:THREE.DoubleSide,transparent: true}),
];
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,transparent: true}),
new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( '../assets/left3.png' ), side:THREE.DoubleSide,transparent: true}),
new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( '../assets/top3.png'), side:THREE.DoubleSide,transparent: true}),
new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( '../assets/bottom3.png'),side:THREE.DoubleSide,transparent: true}),
new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( '../assets/back3.png' ), side:THREE.DoubleSide,transparent: true}),
new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( '../assets/front3.png'), side:THREE.DoubleSide,transparent: true}),
];
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: 3.0; 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>