drie kubussen met transparante afbeeldingen

drie kubussen met transparante afbeeldingen. terug naar de inleiding

De afbeeldingen op de kubussen zijn plaatjes van de animatie met 24 roterende driehoeken, en de Alien met meerdere vormen

Een animatie met de standaardvorm: BoxGeometry, Het bijbehorende material is: MeshStandardMateral

De lichtbron is AmbientLight zie de functie createAmbientLight (regel 84)

Alle libs zijn javaScript ES6 modules. Dit zijn scripts opgebouwd uit modules wat een forse verbetering van de codeer stijl betekend.

addon lib

De muis en pijltjestoets bewegingen worden gerealiseerd met de addon lib OrbitControls, zie de functie createControl (regel 121)

De GUI (grafische user interface) wordt gerealiseerd met de addon lib lil-gui-module.min.js zie de functie createGUI (regel 113)

Met muisbewegingen en li of re muisknop ingedrukt roteer je de animatie met het muiswiel verplaatst de animatie in z richting.

Met de pijltjes toetsen verplaatst de animatie in x of y richting

Voor het overzicht is alle code in functies gezet die worden aangeroepen in function init() (regel 35)

 

 <html>
   <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta charset="UTF-8" />
     <style> body { margin: 0;} </style>
   </head>
   <body>
       <script type="importmap">
           {
             "imports": {
               "three": "../build/three.module.js",
               "three/addons/": "../jsm/"
           }
     }
       </script>
 
   <script type="module">
      import * as THREE from 'three';
      import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
      import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; 

      let camera, renderer, scene;
      let mesh1, mesh2, mesh3 , wolken_achtergrond , start_stop_rotatie;
      let texture1, texture2, texture3;
      //data tbv de GUI control
     const data = {wolken_achtergrond: true, start_stop_rotatie: true}
 

    init();
    play();
// in een init functie de objecten construeren en initieeren
function init()  {
  scene = new THREE.Scene();
  THREE.ColorManagement.enabled = true;
  window.addEventListener( 'resize', onWindowResize );
  createBackground();
  createCamera();
  createLoadTexture()
  createRenderer();
  onWindowResize();
  createAmbientLight();
  createBox1();
  createBox2();
  createBox3();
  createGui(); //voor het controlvenster rechts boven
  createControl();
}
 
function createBackground() {
        if (wolken_achtergrond==false)
     {const bgColor = new THREE.Color( 0xE6FBFF );
      scene.background = bgColor;
      wolken_achtergrond = true;}
        else
      {const loader = new THREE.TextureLoader();
      const bgTexture = loader.load('../textures/cloud.jpg');
      scene.background = bgTexture;
      wolken_achtergrond = false;}
  }
 

function createCamera() {
   const fov = 35; // fov = Field Of View
   const aspect = window.innerWidth / window.innerHeight;
   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, 8);
}
 
function createLoadTexture() {
   const textureLoader = new THREE.TextureLoader();
   texture1 = textureLoader.load( '../textures/driehoeken2.png' );
   texture1.colorSpace = THREE.SRGBColorSpace;
   texture2 = textureLoader.load( '../textures/alien.png' );
   texture2.colorSpace = THREE.SRGBColorSpace;
   texture3 = textureLoader.load( '../textures/driehoeken3.png' );
   texture3.colorSpace = THREE.SRGBColorSpace;
 }
 
function createAmbientLight() {
   const ambientLight = new THREE.AmbientLight(0xffffff, 2.0);
   scene.add(ambientLight);
}
 
function createBox1() { //Driehoeken
   const kubus1 = new THREE.BoxGeometry( 2, 2, 2 );
   const material1 = new THREE.MeshStandardMaterial( {map: texture1, side: THREE.DoubleSide,transparent: true} );
   mesh1 = new THREE.Mesh( kubus1, material1 );
   mesh1.position.set(3,0,0);
   scene.add( mesh1 );
}
 
function createBox2() {  //Alien
   const kubus2 = new THREE.BoxGeometry( 2, 2, 2 );
   const material2 = new THREE.MeshStandardMaterial( {map: texture2, side: THREE.DoubleSide,transparent: true} );
   mesh2 = new THREE.Mesh( kubus2, material2 );
   mesh2.position.set(0,0,0);
   scene.add( mesh2 );
}
 
function createBox3() {   //Driehoeken
   const kubus3 = new THREE.BoxGeometry( 2, 2, 2 );
   const material3 = new THREE.MeshStandardMaterial( {map: texture3, side: THREE.DoubleSide,transparent: true} );
   mesh3 = new THREE.Mesh( kubus3, material3 );
   mesh3.position.set(-3,0,0);
   scene.add( mesh3 );
}
 
function createGui() {
    let gui = new GUI({width: 250});
    gui.add(data, 'start_stop_rotatie');
    gui.add(data, 'wolken_achtergrond').onChange(createBackground);
    gui.open();
  }

 
function createControl()  {
   const controls = new OrbitControls( camera, renderer.domElement);
   controls.listenToKeyEvents( window );
}
 
function createRenderer(){
    renderer = new THREE.WebGLRenderer( { antialas: true, preserveDrawingBuffer: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
  }
 
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix(); //met updateProjectionMatrix wordt het camera frustrum aangepast
    renderer.setSize( window.innerWidth, window.innerHeight );
}
 
function render() {
    renderer.render( scene, camera );
  }
 
function animate(){
    if (data.start_stop_rotatie) {
    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(); render();});
}
    </script>
  </body>
</html>

Flevopink