Flevopink

  drie kubussen met transparante afbeeldingen.              terug naar de inleiding                                                                                                         

                                                                                                  de animatie in fullscreen

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

Met alphaTest: 0.5 in MeshBasicMaterial (coderegels 57, 66 en 74) wordt de transparantie mogelijk gemaakt.

Kubussen tov elkaar positioneren

 //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();} );
}