controls

 controls: beginwaarden ingesteld in guiControls
de rotatie is gestopt
 
 
 
kubuspositie =  -0.16 alfa = 0.62
kubuspositie =  -0.16 alfa = 0.62
 
 
 
 
de kubussen met grid en alfa = 1

de kubussen met grid en alpha = 1

 

 tussen het groene en blauwe vlak bevindt zich het camera frustum

 
tussen het groene en blauwe vlak bevindt zich
het camera frustum

 

 

three.js assenstelsel

 het three.js assenstelsel

 

 

 

 

 

 

 

 De animatie is  in x, y en z richting verplaatst
 
image gemaakt door:
1)  grootte het venster aanpassen
2) via het control venster de rotatie stoppen
3) alpha instellen op 0.7
4) met muis animatie in x, y en z richting verplaatsen
5) opslaan met: "animatie opslaan en downloaden"

 

 

 

 

 

 

materials en boxen worden samengevoegd tot meshes

materials en boxen worden samengevoegd tot meshes
In de groep functie (line 155) worden de meshes
als groep aan de scene toegevoegd
 
 
 
 
renderer

 

 

groep van 8 kubussen en 3 cylinders.                    terug naar de inleiding                  ga naar de animatie in fullscreen

acht kubussen en 3 cylinders vormen een groep die aan de scene zijn toegevoegd (line 157 t/m 159)

Door de instellingen: x rotatie = 0.085, y rotatie = 0.01 en z rotatie = 0.085 maken de kubussen

een roterend- schommelende beweging die tot stilstand komt en weer start.

Met kubuspositie verplaats je de kubussen tussen de -2 en + 2 (line 183) en de kubuspositie verandert in de animatieloep (line 220 t/m 227)

De schets maakt gebruik van de scripts:  three.js,  OrbitControls.js  en  dat.gui.min.js

De GUI (grafische users interface) maakt gebruik van dat.gui.min.js . zie de functie:  createGui()  (line 176)

Zie voor het exporteren en downloaden van een animatie image de functie: createExport()  (line 192)

Voor het overzicht is veel code in functies gezet die in de init(); (line 28) functie worden aangeroepen

 

 

let container, camera, renderer, scene, controls,s; 
let globalLight, puntLight, groep, exporteren, dataURL; 
//M = mesh, G = geometry, en Mat = material. 
let box1M,  box2M,  box3M,  box4M,  box5M,  box6M,  box7M,  box8M; 
let box1G,  box2G,  box3G,  box4G,  box5G,  box6G,  box7G,  box8G; 
let boxMat1,boxMat2,boxMat3,boxMat4,boxMat5,boxMat6,boxMat7,boxMat8; 
let cylinderMatx, cylinderMaty, cylinderMatz; 
let cylinderGx, cylinderGy, cylinderGz; 
let cylinderMx, cylinderMy, cylinderMz; 
 
//guiControls is een javascript dictionary net als in python 
//guiControls zijn de start instellingen van de controls 
//Deze dict moet global staan 
let guiControls = { 
  X_rotatie: 0.085, 
  Y_rotatie: 0.01, 
  Z_rotatie: 0.085, 
  alpha: 0.5, 
  kubuspositie: 0.8, 
  start_stop_rotatie: true  //true is aangevinkt 
}; 
 
init(); 
play(); //waarin de setAnimationLoop tbv render en animate worden aangeroepen 
//Dus render en animate zijn de functies die in de animatieloop zitten 
 
function init() { 
  container = document.querySelector( '#scene-container' ); 
  scene = new THREE.Scene(); 
  scene.background = new THREE.Color( 0xe6fbff ); //is de achtergrondskleur van de website 
//scene.background = new THREE.Color( 0x00000 ); //zwart als achtergrondskleur 
//createCamera, createRenderer, en onWindowResize zijn de basisfuncties 
  createCamera(); 
  createRenderer(); 
  onWindowResize(); 
  //als de gebruiker de grootte van het window aangepast 
  //zal addEventListener onWindowResize aaanroepen 
  window.addEventListener( 'resize', onWindowResize ); 
  //createGrid(); //is het ruitjespapier 
  createLights(); // voor 4 puntlichtjes 
  createGui(); //voor het controlvenster rechts boven 
  createGeomMatMesh(); //voor de boxen, cylinders en hun materials, samengevoegd in de groep 
  createControls();  //voor de muiscontrols 
  createExport(); //exporteert een image van de animate 
} 
 
function createCamera() { 
  camera = new THREE.PerspectiveCamera( 
    35, // FOV 
    container.clientWidth / container.clientHeight, // aspect 
    0.1, // near clipping plane 
    100, // far clipping plane 
  ); 
//  camera.position.set( 5, 0, 10 ); //met createControls uitgeschakeld camera niet gericht op origin 
  //Omdat createControls is ingeschakeld blijft de camera naar het (0,0,0) punt (origin) gericht 
  //want WebGL "luistert" naar toetsen en muis 
  camera.position.set( -5, 5, 7 ); 
} 
 
function createRenderer() { 
  renderer = new THREE.WebGLRenderer( { antialias: true, preserveDrawingBuffer : true } ); 
  renderer.setSize( container.clientWidth, container.clientHeight ); 
  renderer.setPixelRatio( window.devicePixelRatio ); 
  container.appendChild( renderer.domElement ); 
} 
 
function onWindowResize() { 
  camera.aspect = container.clientWidth / container.clientHeight; 
  camera.updateProjectionMatrix(); //met updateProjectionMatrix wordt her camera frustrum aangepast 
  renderer.setSize( container.clientWidth, container.clientHeight ); 
//renderer.setPixelRatio( window.devicePixelRatio ); 
} 
 
function createGrid() { 
  const size = 10; 
  const divisions = 10; 
  const gridHelper = new THREE.GridHelper( size, divisions ); 
  gridHelper.rotation.x = Math.PI / 2; 
  scene.add( gridHelper ); 
} 
 
 
function createLights(x,y,z) { 
  puntLight = new THREE.DirectionalLight(0xffffff, 1); 
  puntLight.position.set(x,y,z); 
  scene.add(puntLight); 
} 
 
createLights(-2, 0, -5); 
createLights(2,  2, 5); 
createLights(-2,-2, -5); 
createLights(2,  2, 5); 
 
function createGeomMatMesh() { 
  boxMat1 = new THREE.MeshPhongMaterial( {color: 0xff3333, opacity: 0.5, transparent: true, shininess: 400,flatShading: true} ); 
  boxMat2 = new THREE.MeshPhongMaterial( {color: 0xffd700, opacity: 0.5, transparent: true, shininess: 400,flatShading: true} ); 
  boxMat3 = new THREE.MeshPhongMaterial( {color: 0x00ff00, opacity: 0.5, transparent: true, shininess: 400,flatShading: true} ); 
  boxMat4 = new THREE.MeshPhongMaterial( {color: 0xff00ff, opacity: 0.5, transparent: true, shininess: 400,flatShading: true} ); 
  boxMat5 = new THREE.MeshPhongMaterial( {color: 0xcd853f, opacity: 0.5, transparent: true, shininess: 400,flatShading: true} ); 
  boxMat6 = new THREE.MeshPhongMaterial( {color: 0x00ffff, opacity: 0.5, transparent: true, shininess: 400,flatShading: true} ); 
  boxMat7 = new THREE.MeshPhongMaterial( {color: 0xff1493, opacity: 0.5, transparent: true, shininess: 400,flatShading: true} ); 
  boxMat8 = new THREE.MeshPhongMaterial( {color: 0x0000ff, opacity: 0.5, transparent: true, shininess: 400,flatShading: true} ); 
  cylinderMatx = new THREE.MeshPhongMaterial( {color: 0xcd853f, opacity: 0.5, transparent: true, shininess: 400,flatShading: true} ); 
  cylinderMaty = new THREE.MeshPhongMaterial( {color: 0x0000ff, opacity: 0.5, transparent: true, shininess: 400,flatShading: true} ); 
  cylinderMatz = new THREE.MeshPhongMaterial( {color: 0x00fa9a, opacity: 0.5, transparent: true, shininess: 400,flatShading: true} ); 
 
  //parameters van de BoxBufferGeometry constructor 
  //1) breedte, 2) hoogte 3) diepte 
  box1G = new THREE.BoxBufferGeometry( 1, 1, 1); 
  box1M = new THREE.Mesh( box1G, boxMat1 ); 
 
  s = guiControls.positie; 
  box1M.position.set( -s, -s, -s ); 
 
  box2G = new THREE.BoxBufferGeometry( 1, 1, 1); 
  box2M = new THREE.Mesh( box2G, boxMat2 ); 
  box2M.position.set( -s, -s, s ); 
 
  box3G = new THREE.BoxBufferGeometry( 1, 1, 1); 
  box3M = new THREE.Mesh( box3G, boxMat3 ); 
  box3M.position.set( -s, s, -s ); 
 
  box4G = new THREE.BoxBufferGeometry( 1, 1, 1); 
  box4M = new THREE.Mesh( box4G, boxMat4 ); 
  box4M.position.set( -s, s, s ); 
 
  box5G = new THREE.BoxBufferGeometry( 1, 1, 1); 
  box5M = new THREE.Mesh( box5G, boxMat5 ); 
  box5M.position.set( s, -s, -s ); 
 
  box6G = new THREE.BoxBufferGeometry( 1, 1, 1); 
  box6M = new THREE.Mesh( box6G, boxMat6 ); 
  box6M.position.set( s, -s, s ); 
 
  box7G = new THREE.BoxBufferGeometry( 1, 1, 1, 1 ); 
  box7M = new THREE.Mesh( box7G, boxMat7 ); 
  box7M.position.set( s,  s, -s ); 
 
  box8G = new THREE.BoxBufferGeometry( 1, 1, 1, 1 ); 
  box8M = new THREE.Mesh( box8G, boxMat8 ); 
  box8M.position.set( s,  s,  s ); 
 
  //parameters van de CylinderBufferGeometry constructor 
  //1) radiusTop, 2) radiusBottom, 3) hoogte 4) radiale segmenten 
  cylinderGx = new THREE.CylinderBufferGeometry( 0.2, 0.2, 2.6, 10 ); 
  cylinderMx = new THREE.Mesh( cylinderGx, cylinderMatx ); 
  cylinderMx.rotation.z = Math.PI / 2; 
 
  cylinderGy = new THREE.CylinderBufferGeometry( 0.2, 0.2, 2.6, 10 ); 
  cylinderMy = new THREE.Mesh( cylinderGy, cylinderMaty ); 
 
  cylinderGz = new THREE.CylinderBufferGeometry( 0.2, 0.2, 2.6, 10 ); 
  cylinderMz = new THREE.Mesh( cylinderGz, cylinderMatz ); 
  cylinderMz.rotation.x = Math.PI / 2; 
  //de meshes in een groep plaatsen 
  groep = new THREE.Group(); 
  groep.add(box1M,box2M,box3M,box4M,box5M,box6M,box7M,box8M,cylinderMx,cylinderMy,cylinderMz); 
  scene.add(groep); //de groep komt in de scene die in animate gaat draaien 
} 
//de functie voor de muis en pijltjestoetsen controls 
function createControls() { 
  controls = new THREE.OrbitControls( camera , container); 
 
  controls.keys =   // De vorm met de pijltoetsen verplaatsen 
       { 
          LEFT: 37,      // pijl naar links 
          UP: 38,        // pijl naar boven 
          RIGHT: 39,     // pijl naar rechts 
          BOTTOM: 40     // pijl naar beneden 
       } 
  controls.addEventListener('change', render); 
} 
 
 
function createGui() { 
  let gui = new dat.GUI({width:280}); 
  gui.add(guiControls, 'X_rotatie', -0.2, 0.2); 
  gui.add(guiControls, 'Y_rotatie', -0.2, 0.2); 
  gui.add(guiControls, 'Z_rotatie', -0.2, 0.2); 
  gui.add(guiControls, 'alpha', 0.5,1); 
 
  gui.add(guiControls, 'kubuspositie', -2,2); 
  gui.add(guiControls, 'start_stop_rotatie'); 
  gui.open(); 
} 
 
// De export functie werkt alleen als er als parameter in WebGLRenderer een buffer wordt ingeschakeld 
// met : preserveDrawingBuffer : true 
// in het html bestand moet een link knop in de body worden toegevoegd 
//   
function createExport() { 
  exporteren = document.getElementById( 'exportLink' ); 
  exporteren.addEventListener( 'click', () => { 
    dataURL = renderer.domElement.toDataURL( 'image/png' ); 
    exporteren.href = dataURL; 
    exporteren.download = "kubussen.png"; 
  } ); 
} 
 
function render() { 
  renderer.render( scene, camera ); 
} 
 
function animate() { 
  if (guiControls.start_stop_rotatie) { 
    scene.rotation.z += guiControls.Z_rotatie; 
    scene.rotation.x += guiControls.X_rotatie; 
    scene.rotation.y += guiControls.Y_rotatie; 
  } 
   boxMat1.opacity = guiControls.alpha; 
   boxMat2.opacity = guiControls.alpha; 
   boxMat3.opacity = guiControls.alpha; 
   boxMat4.opacity = guiControls.alpha; 
   boxMat5.opacity = guiControls.alpha; 
   boxMat6.opacity = guiControls.alpha; 
   boxMat7.opacity = guiControls.alpha; 
   boxMat8.opacity = guiControls.alpha; 
 
   box1M.position.set(-guiControls.kubuspositie, -guiControls.kubuspositie, -guiControls.kubuspositie); 
   box2M.position.set(-guiControls.kubuspositie, -guiControls.kubuspositie,  guiControls.kubuspositie); 
   box3M.position.set(-guiControls.kubuspositie,  guiControls.kubuspositie, -guiControls.kubuspositie); 
   box4M.position.set(-guiControls.kubuspositie,  guiControls.kubuspositie,  guiControls.kubuspositie); 
   box5M.position.set( guiControls.kubuspositie, -guiControls.kubuspositie, -guiControls.kubuspositie); 
   box6M.position.set( guiControls.kubuspositie, -guiControls.kubuspositie,  guiControls.kubuspositie); 
   box7M.position.set( guiControls.kubuspositie,  guiControls.kubuspositie, -guiControls.kubuspositie); 
   box8M.position.set( guiControls.kubuspositie,  guiControls.kubuspositie,  guiControls.kubuspositie); 
 
} 
 
function play() { 
  renderer.setAnimationLoop( () => { 
    animate(); 
    render(); 
  } ); 
}