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