Flevopink

                                                                                                  naar de animatie in fullscreen

torusknoop, bol en kubus animatie met schaduw.                terug naar de inleiding      

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

De schets maakt gebruik van de scripts:   "three.js"    en   "OrbitControls.js"

voor het overzicht  is alle code in functies gezet die worden aangeroepen in de init() functie. (line 12)

 

let container,scene, camera, renderer, controls; 
let directionallight, ambientLight; 
//G = geometry, M = mesh, en Mat = material. 
let planeG, planeM, planeMat ; 
let boxG, boxM, boxMat; 
let sphereG, sphereM, sphereMat; 
let torusG, torusM, torusMat; 
 
init(); 
play(); 
function init() { 
  createScenecontainer(); 
  createBackground(); 
//  createGrid(); 
  createCamera(); 
  createAmbientLight(); 
  createDirectionalLight(); 
  createPlane(); 
  createBox(); 
  createSphere(); 
  createTorus(); 
  createRenderer(); 
  createControl(); 
  onWindowResize(); 
  window.addEventListener( 'resize', onWindowResize ); 
} 
 
function createScenecontainer(){ 
  container = document.querySelector( '#scene-container' ); 
  scene = new THREE.Scene(); 
} 
 
function createBackground() { 
   scene.background = new THREE.Color( 0xE6FBFF ); 
  // loader = new THREE.TextureLoader(); 
  // bgTexture = loader.load('./textures/cloud.jpg'); 
  // scene.background = bgTexture; 
 } 
 
function createGrid() { 
  const size = 10; 
  const divisions = 10; 
  const gridHelper = new THREE.GridHelper( size, divisions ); 
  gridHelper.rotation.x = Math.PI / 2;// het ruitjespapier 90 graden draaien 
  scene.add( gridHelper ); 
} 
 
function createCamera(){ 
  camera = new THREE.PerspectiveCamera( 70, container.clientWidth / container.clientHeight, 1, 1000 ); 
  camera.position.set( 0, 0, 4 ); 
} 
 
//Zonder AmbientLight zijn de niet belichte delen erg donker en is de schaduw zwart 
function createAmbientLight() { 
  ambientLight = new THREE.AmbientLight(0xffffff, 0.4); 
  scene.add(ambientLight); 
} 
 
function createDirectionalLight(){ 
  directionalLight = new THREE.DirectionalLight(0xffffff, 1); 
  directionalLight.position.set(-3,10,0); 
  directionalLight.castShadow = true;  //De lichtbron moet ook schaduw uitzenden 
  scene.add(directionalLight); 
} 
 
function createPlane(){ 
  planeG= new THREE.PlaneGeometry(10,2.5,1,1); 
  planeMat = new THREE.MeshPhongMaterial( { color: 0xffffff, wireframe: false, side: THREE.DoubleSide} ); 
  planeM = new THREE.Mesh(planeG, planeMat); 
  planeM.position.set(0, -1, 0)       // De plane staat een plaats naar beneden. 
  planeM.rotation.x = Math.PI / 2;    // Met deze code draait de vloer 90 graden en staat dan horizontaal 
  planeM.receiveShadow = true;        // De vloer ontvangt de schaduw 
  scene.add(planeM); 
} 
 
function createBox() { 
  boxG = new THREE.BoxBufferGeometry(); 
  boxMat = new THREE.MeshPhongMaterial ({ wireframe: false, color: 0x00ff00 }); 
  boxM = new THREE.Mesh(boxG, boxMat); 
  boxM.position.set(3,0,0); 
  boxM.castShadow = true;           // De vormen zenden schaduw die door de vloer wordt ontvangen 
  scene.add(boxM); 
} 
 
function createSphere() { 
   sphereG = new THREE.SphereBufferGeometry(1,32,32); 
   sphereMat = new THREE.MeshPhongMaterial( { color: 0xff0000, wireframe: false,} ); 
   sphereM = new THREE.Mesh(sphereG, sphereMat); 
   sphereM.position.set(0,0,0); 
   sphereM.castShadow = true; 
   scene.add(sphereM); 
} 
 
 function createTorus(){ 
   torusG = new THREE.TorusKnotGeometry(0.5,0.1,64,10,2,3); 
   torusMat = new THREE.MeshPhongMaterial( { color: 0x00ff00, wireframe: false , shininess: 400, specular: 0x222222} ); 
   torusM = new THREE.Mesh( torusG, torusMat ); 
   torusM.position.set(-3,0,0);        // De torusknoop staat 3 plaatsen naar links 
   torusM.castShadow = true; 
   scene.add( torusM ); 
 } 
 
function createRenderer(){ 
   renderer = new THREE.WebGLRenderer( { antialias: true } ); 
   renderer.setPixelRatio( window.devicePixelRatio ); 
   renderer.setSize( container.clientWidth, container.clientHeight ); 
   document.body.appendChild( renderer.domElement ); 
   renderer.shadowMap.enabled = true; 
 } 
 
 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 onWindowResize() { 
    camera.aspect = container.clientWidth / container.clientHeight; 
    camera.updateProjectionMatrix(); 
    renderer.setSize( container.clientWidth, container.clientHeight ); 
  } 
 
  function render() { 
    renderer.render( scene, camera ); 
} 
 
  function animate() { 
    boxM.rotation.x += 0.01; 
    boxM.rotation.y += 0.01; 
    torusM.rotation.x -= 0.01; 
    torusM.rotation.y -= 0.01; 
 } 
 
 function play() { 
   renderer.setAnimationLoop( () => {animate();render();} ); 
 }