threejs

Three.js

Three.js is een javascript framework om 3D animaties te maken en middels WebGL (Web Graphic Library) te renderen
Three.js is in 2010 ontwikkeld door Ricardo Cabello

Enkele animaties op de server     spiegelbal   WebVR animaties    tempel            blokken

Ga naar de website van Three.js voor de documentatie en de voorbeelden

Hier de code. Een animatie met 4 standaardvormen. Ga naar de animatie    Met de muis en pijltjestoetsen kan je de animatie roteren en in x, y en z richting verplaatsen.
 
 

 <!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <title>Een animatie met 4 standaardvormen</title> 
        <meta charset="utf-8"7gt 
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> 
        <style> 
            body { 
                margin: 0px; 
                background-color: #000000; 
                overflow: hidden; 
            } 
        </style> 
    </head>   
        <body> 
 
        <script src="build/three.js"></script> 
        <script src="js/controls/OrbitControls.js"js></script> 
 
        <script> 
     //  objecten declareren, zonder dit werkt het script ook. 
            var camera,     scene,            renderer; 
            var kubus,      kubusMaterial,    kubusMesh; 
            var bol,        bolMaterial,      bolMesh; 
            var vloer,      vloerMaterial,    vloerMesh; 
            var torus,      torusMaterial,    torusMesh; 
            var puntLight,  gloabalLight,     controls; 
 
            init(); 
            animate(); 
            control(); 
 
            function init() { 
 
           //scene creeren, met background de achtergrondkleur instellen 
                scene = new THREE.Scene(); 
                scene.background = new THREE.Color( 0x3BBAEA ) 
                // camera creeren en initialiseren fof (vertical field of view) = 70 in graden 
                // window.innerWidth / window.innerHeight is de aspect ratio van het canvas (breedte/hoogte) 
                // near clipping plane = 1 en far clipping plane = 10. dit zijn de gebieden waar binnen de camera werkt 
                camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10); 
                camera.position.set(0,0,3);   //constructor = x, y, z. De camera staat in het centrum en 3 plaatsen vooruit. (= in z richting) 
               //De vormen staan op een lijn 
 
               //kubus initialiseren. Hier zonder argumenten, dan worden de default waarden gebruikt 
                kubus = new THREE.BoxGeometry(); 
                //MeshPhongMaterial wordt gebruikt voor weerkaatsende oppervlakten 
                kubusMaterial = new THREE.MeshPhongMaterial( { wireframe: false, shininess: 300, color: 0x00ff00} ); 
                kubusMesh = new THREE.Mesh( kubus, kubusMaterial ); 
                kubusMesh.position.set(3, 0,0);        // de kubus staat 3 plaatsen naar rechts 
                kubusMesh.castShadow = true;           // De vormen zenden schaduw die door de vloer wordt ontvangen 
                scene.add( kubusMesh );                //Als laatste de kubus met de kleur aan de scene toevoegen 
 
              //bol initialiseren 
                bol = new THREE.SphereGeometry( 1, 32, 32 ); 
                bolMaterial = new THREE.MeshPhongMaterial( { color: 0xff0000, wireframe: false,} ); 
                bolMesh = new THREE.Mesh( bol, bolMaterial ); 
                bolMesh.position.set(0,0,0);             // De bol staat in het midden van het canvas 
                bolMesh.castShadow = true; 
                scene.add( bolMesh ); 
 
               //torusknoop 
                torus = new THREE.TorusKnotGeometry(0.5,0.1,64,10,2,3); 
                torusMaterial = new THREE.MeshPhongMaterial( { color: 0x00ff00, wireframe: false , shininess: 400, specular: 0x222222} ); 
                torusMesh = new THREE.Mesh( torus, torusMaterial ); 
                torusMesh.position.set(-3,0,0);        // De torusknoop staat 3 plaatsen naar links 
                torusMesh.castShadow = true; 
                scene.add( torusMesh ); 
 
               //vloer initaliseren 
                vloer = new THREE.PlaneGeometry(10,2.5,1,1); 
                vloerMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, wireframe: false, side: THREE.DoubleSide} ); 
                vloerMesh = new THREE.Mesh(vloer, vloerMaterial); 
                vloerMesh.position.set(0, -1, 0)       // De vloer staat een plaats naar beneden. 
                vloerMesh.rotation.x = Math.PI / 2;    // Met deze code draait de vloer 90 graden en staat dan horizontaal 
                vloerMesh.receiveShadow = true;        // De vloer ontvangt de schaduw 
                scene.add( vloerMesh); 
 
               //Lichtbronnen. Zonder AmbientLight zijn de niet belichte delen erg donker 
               //en is de schaduw zwart 
                globalLight = new THREE.AmbientLight(0xffffff, 0.4); 
                scene.add(globalLight); 
 
                puntLight = new THREE.DirectionalLight(0xffffff, 1); 
                puntLight.position.set(-3, 10, 0); 
                puntLight.castShadow = true;  //De lichtbron moet ook schaduw uitzenden 
                scene.add(puntLight); 
 
                renderer = new THREE.WebGLRenderer( { antialias: true } ); 
                renderer.setPixelRatio( window.devicePixelRatio ); 
                renderer.setSize( window.innerWidth, window.innerHeight); 
               //coderegel toevoegen om de schaduw te renderen 
                renderer.shadowMap.enabled = true; 
 
                document.body.appendChild( renderer.domElement ); 
 
               window.addEventListener( 'resize', onWindowResize, false ); 
            } 
 
            function onWindowResize() { 
                camera.aspect = window.innerWidth / window.innerHeight; 
                camera.updateProjectionMatrix(); 
                renderer.setSize( window.innerWidth, window.innerHeight ); 
            } 
 
            function control() 
          { 
              controls = new THREE.OrbitControls( camera, renderer.domElement ); 
             //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 animate() { 
                requestAnimationFrame( animate ); 
                kubusMesh.rotation.x += 0.01; 
                kubusMesh.rotation.y += 0.01; 
                torusMesh.rotation.x -= 0.01; 
                torusMesh.rotation.y -= 0.01; 
                renderer.render( scene, camera ); 
            } 
        </script> 
    </body> 
</html>