WebGL mit Three.js

Kleine Erinnerung, was ist WebGL?

WebGL ist eine HTML5-Grafik-API, die es ermöglicht um 3D über das Canvas-Tag direkt im Browser anzuzeigen. Es kommt von das OpenGL ES 2.0, es ist sUnterstützt von allen modernen Browsern.
Webgl-Browser-Unterstützung
 

Wie macht man WebGL? Oder wie man gut anfängt

Three.js , „Eine JavaScript-3D-Bibliothek, die WebGL vereinfacht“

  • DIE am weitesten verbreitete und dokumentierte Open-Source-Bibliothek für WebGL
  • Erstellt von Ricardo Cabello aka mrDoob
  • github: v74 (v1 > 2010); Uhr 1 / Stern 572 / Gabel 23
  • In WebGL gerendert… + CSS3D & SVG für „alte“ Browser/Handys.
  • Funktionen: Szenen, Kameras, Geometrie, 3D-Modelllader, Lichter, Materialien, Partikel, Animation, Shader …

Shader ? Kesako?

Shader sind wie „Spezialeffekte“, die Material und Farbe erzeugen oder modifizieren (wirklich großartig). Es ist in glsl (OpenGL Shading Language, sieht aus wie C) geschrieben.
 

Three.js in Produktion

Wir können sehen, dass three.js hauptsächlich in der Produktion für verwendet wird Event-Websites, Versuchsstandorte, Schaufensterseiten mit 360°-Produkten und -Spielen:
[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 in der Praxis

Threejs-Knotenkarte
Beachten Sie, dass sowohl das Licht als auch die Meshes (Objekte) und die Kamera in die Szene aufgenommen werden und letztere mit der Kamera in die "Rendering-Engine" aufgenommen werden. Im Code ergibt dies zum Beispiel für einen einfachen Würfel, der sich selbst einschaltet:


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

 
 

Einige Links für three.js

 
PS: Wussten Sie, dass wir Three.js dazu verwendet haben? der Kalender voraus 🙂
Hervé Chaissac, UX-Wissenschaftler @UXRepublic

 

(Bilder von David Scottlyons)