WebGL mat Three.js

Kleng Erënnerung, wat ass WebGL?

WebGL ass eng HTML5 Grafik API déi et erlaabt fir 3D direkt am Browser iwwer de Canvas Tag ze weisen. Et kënnt aus den OpenGL ES 2.0, et ass sËnnerstëtzt vun all modernen Browser.
webgl-browser-support
 

Wéi maachen ech WebGL? Oder wéi gutt ufänken

Dräi.js, "Eng JavaScript 3D Bibliothéik déi WebGL méi einfach mécht"

  • Déi meescht benotzt an dokumentéiert Open Source Bibliothéik fir WebGL ze maachen
  • Erstellt vum Ricardo Cabello aka mr Doub
  • github: v74 (v1 > 2010); kucken 1 / Stär 572 / Gabel 23
  • Rendert am WebGL… + CSS3D eng & SVG fir "al" Browser / Handyen.
  • Features: Szenen, Kameraen, Geometrie, 3D Modelllader, Luuchten, Materialien, Partikel, Animatioun, Shaders ...

Shaders ? Kesako?

Shaders si wéi "Spezialeffekter" déi Material a Faarf erstellen oder änneren (wierklech genial). Et ass a glsl geschriwwen (OpenGL Shading Language, gesäit aus wéi C).
 

Three.js an der Produktioun

Mir kënne gesinn datt three.js haaptsächlech an der Produktioun benotzt gëtt fir Event Websäiten, experimentell Siten, Showcase Sites mat 360° Produkter a Spiller:
[youtube https://www.youtube.com/watch?v=toHboGrzjO4&w=560&h=315]  
[youtube https://www.youtube.com/watch?v=DgPv6IIVDFQ&w=560&h=315]  
 

Three.js an der Praxis

threejs-Node-map
Bedenkt datt d'Liicht wéi och d'Meshes (Objeten) an d'Kamera an der Szen abegraff sinn an déi lescht gëtt am "Rendering Engine" mat der Kamera abegraff. Am Code gëtt dëst zum Beispill en einfache Kubus deen sech selwer mécht:


//using jade ;)
doctype html // html5 doctype
html
    head
        title Basic Three.js App
        style
            html, body { margin: 0; padding: 0; overflow: hidden; }
    body
        script(src="js/three.min.js")
        script
            // Init scene & camera
            var scene = new THREE.Scene();
            var aspect = window.innerWidth / window.innerHeight;
            var camera = new THREE.PerspectiveCamera( 75, aspect, 0.1, 1000 );
            var renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );
            // Add cube
            var geometry = new THREE.BoxGeometry( 1, 1, 1 );
            var material = new THREE.MeshNormalMaterial();
            var cube = new THREE.Mesh( geometry, material );
            scene.add( cube );
            camera.position.z = 5;
            // Add animation
            var render = function () {
              requestAnimationFrame( render );
              cube.rotation.x += 0.1;
              cube.rotation.y += 0.1;
              renderer.render( scene, camera );
            };
            render();

 
 

E puer Linken fir three.js

 
PS: Wousst Dir datt mir Three.js benotzt hunn de Kalenner viraus 🙂
Hervé Chaissac, UX-Scientist @UXRepublic

 

(Biller vum David Scottlyons)