drie kubussen met transparante afbeeldingen. terug naar de inleiding
Met de muis en het muiswiel zijn de kubussen te manipuleren
De afbeeldingen op de kubussen zijn plaatjes van de animatie met 24 roterende driehoeken, en de Alien met meerdere vormen
De afbeeldingen zijn, mbv oa de toverstaf in "Gimp", transparant gemaakt.
Met alphaTest: 0.5 in MeshBasicMaterial (coderegels 57, 66 en 74) wordt de transparantie mogelijk gemaakt.
Kubussen tov elkaar positioneren
Bovenstaande positionering ingesteld met: camera.position.set(0,0,4); (regel 42), mesh1.position.set(0,0,4); (regel 60) en mesh3.position.set(0,0,-4); (regel 77)
De drie kubussen staan naast elkaar met: camera.position.set(0,0,10); (regel 41), mesh1.position.set(3,0,0); (regel 59) en mesh3.position.set(-3,0,0); (regel 76)
//Schets met 3 roterende kubussen
let container, camera, renderer;
let mesh1, texture1, kubus1, material1;
let mesh2, texture2, kubus2, material2;
let mesh3, texture3, kubus3, material3;
init();
play();
// in een init functie de objecten construeren en initieeren
function init() {
createScenecontainer();
createBackground();
createCamera();
createLoadTexture();
createBox1();
createBox2();
createBox3();
createExport();
createControl();
createRenderer();
}
function createScenecontainer(){
container = document.querySelector( '#scene-container' );
scene = new THREE.Scene();
}
function createBackground() {
// scene.background = new THREE.Color( 0xE6FBFF );
const loader = new THREE.TextureLoader();
const bgTexture = loader.load('../textures/cloud.jpg');
scene.background = bgTexture;
}
function createCamera() {
const fov = 35; // fov = Field Of View
const aspect = container.clientWidth / container.clientHeight;
const ncp = 0.5; // ncp = near clipping plane
const fcp = 200; // fcp = far clipping plaen
camera = new THREE.PerspectiveCamera( fov, aspect, ncp, fcp );
camera.position.set( 0, 0, 10);
// camera.position.set( 0, 0, 4);
}
function createLoadTexture() {
const textureLoader = new THREE.TextureLoader();
texture1 = textureLoader.load( '../textures/driehoeken2.png' );
texture1.encoding = THREE.sRGBEncoding;
texture2 = textureLoader.load( '../textures/alien.png' );
texture2.encoding = THREE.sRGBEncoding;
texture3 = textureLoader.load( '../textures/driehoeken3.png' );
texture3.encoding = THREE.sRGBEncoding;
}
function createBox1() { //Driehoeken
kubus1 = new THREE.BoxBufferGeometry( 2, 2, 2 );
material1 = new THREE.MeshBasicMaterial( {alphaTest: 0.5,map: texture1, side: THREE.DoubleSide} );
mesh1 = new THREE.Mesh( kubus1, material1 );
mesh1.position.set(3,0,0);
// mesh1.position.set(0,0,4);
scene.add( mesh1 );
}
function createBox2() { //Alien
kubus2 = new THREE.BoxBufferGeometry( 2, 2, 2 );
material2 = new THREE.MeshBasicMaterial( {alphaTest: 0.5,map: texture2, side: THREE.DoubleSide} );
mesh2 = new THREE.Mesh( kubus2, material2 );
mesh2.position.set(0,0,0);
scene.add( mesh2 );
}
function createBox3() { //Driehoeken
kubus3 = new THREE.BoxBufferGeometry( 2, 2, 2 );
material3 = new THREE.MeshBasicMaterial( {alphaTest: 0.5,map: texture3, side: THREE.DoubleSide} );
mesh3 = new THREE.Mesh( kubus3, material3 );
mesh3.position.set(-3,0,0);
// mesh3.position.set(0,0,-4);
scene.add( mesh3 );
}
function createControl() {
controls = new THREE.OrbitControls( camera, container );
//Je kan met de li muisknop de rotatie beinvloeden en met de re muisknop de vorm in x y en z richting verslepen
controls.keys = // De vorm met de pijltoetsen verplaatsen
{
LEFT: 37, // left arrow
UP: 38, // up arrow
RIGHT: 39, // right arrow
BOTTOM: 40 // down arrow
}
}
function createExport() {
exporteren = document.getElementById( 'exportLink' );
exporteren.addEventListener( 'click', () => {
dataURL = renderer.domElement.toDataURL( 'image/png' );
exporteren.href = dataURL;
exporteren.download = "drie_kubussen.png";
} );
}
function createRenderer(){
renderer = new THREE.WebGLRenderer( { antialas: true, preserveDrawingBuffer: true } );
renderer.setSize( container.clientWidth, container.clientHeight );
renderer.setPixelRatio( window.devicePixelRatio );
container.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize );
}
function onWindowResize() {
camera.aspect = container.clientWidth / container.clientHeight;
camera.updateProjectionMatrix(); //met updateProjectionMatrix wordt het camera frustrum aangepast
renderer.setSize( container.clientWidth, container.clientHeight );
}
function animate(){
renderer.render( scene, camera );
mesh1.rotation.z += 0.01; mesh1.rotation.x += 0.01; mesh1.rotation.y += 0.01;
mesh2.rotation.z -= 0.01; mesh2.rotation.x -= 0.01; mesh2.rotation.y -= 0.01;
mesh3.rotation.z += 0.01; mesh3.rotation.x += 0.01; mesh3.rotation.y += 0.01;
}
function play() {
renderer.setAnimationLoop( () => { animate();} );
}