threejs

 

doorkijkje naar torusknoop

 

een doorkijken naar de torusknoop

 

 

 

 

doorkijkje kubus

 

 een doorkijkje naar de kubus

 

 

tussen het groene en blauwe vlak bevindt zich het camera frustum

 

tussen het groene en blauwe vlak bevindt zich
het camera frustum

 

 

 

door het near clipping plane afgeknepen torusknoop

 

door het near clipping plane afgeknepen torusknoop

 

far clipping plane in actie

door het far clipping plane afgeknepen torusknoop
De bol en kubus zijn al achter
het far clipping plane verdwenen
 

 

 torusM.position.set(-3,0,0); sphereM.position.set(0,0,0); boxM.position.set(3,0,0); planeM.position.set(0,-1,0);

 
torusM.position.set(-3,0,0);
sphereM.position.set(0,0,0);
boxM.position.set(3,0,0);
planeM.position.set(0,-1,0);

 

 

 

mesh
 
materials en geometry's worden samengevoegd
tot een mesh, de mesh wordt aan de scene toegevoegd

                                                                                                  naar de animatie in fullscreen

 

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

Een animatie met de 4 standaardvormen: BoxGeometry, SphereGeometry, TorusKnotGeometry en PlaneGeometry.
 

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)

De  box,  sphere, torus meshes, en directionalLight zenden schaduw uit door:     .castShadow = true;   (line 82, 92, 101 en 64)
De schaduw wordt afgebeeld op de plane met:                                     planeM.receiveShadow = true;   (line 73)
De schaduw wordt gerenderd door:                                             renderer.shadowMap.enabled = true;  (line 109)

 

 

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