plane en box met  grid 90 graden in x richting gedraaid                 geoMesh.position.set(0,0,-1) (line34), plane en box staan in een vlak                       planeMesh.position.set(1, 0, 0 ) (line 43)  
   plane en box met grid 90 graden in x richting gedraaid    geoMesh.position.set(0, 0, -1) (line34)   planeMesh.position.set(1, 0, 0 ) (line 43)  

 

camera.postion.set(3, 0, 10)  (line 25)  De camera blijft gericht op het origin !

 camera.postion.set(3, 0, 10)  (line 25)
 

 

het three.js assenstelsel

 het three.js assenstelsel

 

 

tussen het groene en blauwe vlak bevindt zich het camera frustum

tussen het groene en blauwe vlak bevindt zich
het camera frustum

 

 

mesh is de box met material (hier alleen de kleur)

 mesh is de box met material (hier alleen de kleur)

 

 

renderer

start schets.                               tergug naar de inleiding

De schets  maakt alleen gebruik van het three.js script

Alles draait natuurlijk om de laatste class "WebGLRenderer" want  "The WebGL renderer displays your beautifully crafted scenes using  WebGL"

Hier een lijstje van de, in de schets gebruikte, classes die in het three. js script staan.

classes                 enkele methodes                                                                                                                                                 
Scene   .background  
GridHelper      
Color      
PerspectiveCamera      
BoxBufferGeometry      
MeshBasicMaterial      
Mesh      
PlaneGeometry      
WebGLRenderer   .setSize .setAnimationLoop       wordt hier niet gebruikt

 

// het HTML container element waarin de scene wordt geplaatst 
const container = document.querySelector( '#scene-container' ); 
//nu een scene object aanmaken 
const scene = new THREE.Scene(); 
//het ruitjespapier aanmaken 
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 ); 
// de scene een achtergrondskleur geven 
scene.background = new THREE.Color( 0xe6fbff ); 
// een camera aanmaken 
const fov = 35; //  Field of View is de hoek in graden tussen de 1 en 179 graden 
//aspect ratio als functie van de container zodat de camera zich kan aanpassen aan verschillende schermverhoudingen 
const aspect = container.clientWidth / container.clientHeight; 
const near = 1; //near clipping plane, het dichtbij vanaf waar de scene te zien is 
const far = 100; //far clipping plane, het verafpunt tot waar de scene te zien is 
//De camera constructor 
const camera = new THREE.PerspectiveCamera( fov, aspect, near, far ); 
// bij default staat de camera in het  ( 0, 0, 0 ) (origin) punt 
//Met (0,0,10) staat de camera in het midden en 10 in +Z richting 
camera.position.set( 0, 0, 10 ); 
// met camera.position.set( 3, 0, 10 ); de camera verplaatst in 3+X richting 
// een box vorm construeren met de parameters (x,y,z) Default waarden zijn (1,1,1) 
const geom = new THREE.BoxBufferGeometry( 2, 2, 2 ); 
// Het MeshBasicMaterial ,maken default is dit de kleur wit 
const geomMat = new THREE.MeshBasicMaterial({color: 0xff3333, opacity: 0.5,transparent: true}); 
// het mesh object aanmaken waarin de geometry en material worden samengevoegd 
const geomMesh = new THREE.Mesh( geom, geomMat ); 
geomMesh.position.set( 0, 0, 0 ); 
//Met geomMesh.position.set( 0, 0, -1 ); staat de kubus wel netjes op de lijntjes 
//want dan staat het bovenvlak in het origin 
//De mesh in de scene plaatsen 
scene.add( geomMesh ); 
//een vlak toevoegen 
const planeMat = new THREE.MeshBasicMaterial({color: 0xffd700, opacity: 0.5,transparent: true}); 
const planeGeom = new THREE.PlaneGeometry(6,2); 
const planeMesh = new THREE.Mesh( planeGeom, planeMat ); 
planeMesh.position.set( 0, 0, 0 ); 
//Met planeMesh.position.set( 1, 0, 0 ); verschuift het vlak zich een vakje naar rechts 
scene.add( planeMesh ); 
// de renderen aanmaken 
const renderer = new THREE.WebGLRenderer(); 
//de renderer maakt een camera beeld van de scene wat in het canvas komt 
renderer.setSize( container.clientWidth, container.clientHeight ); 
renderer.setPixelRatio( window.devicePixelRatio ); 
container.appendChild( renderer.domElement ); 
//De renderer 
renderer.render( scene, camera );