WebGL dengan Three.js

Sedikit peringatan, apakah itu WebGL?

WebGL ialah API grafik HTML5 yang membenarkan untuk memaparkan 3D terus dalam penyemak imbas melalui tag kanvas. Ia datang dari OpenGL ES 2.0, ia adalah sDisokong oleh semua pelayar moden.
webgl-browser-support
 

Bagaimana untuk melakukan WebGL? Atau bagaimana untuk bermula dengan baik

Tiga.js, "Perpustakaan 3D JavaScript yang menjadikan WebGL lebih mudah"

  • Pustaka Sumber Terbuka yang paling banyak digunakan dan didokumenkan untuk melakukan WebGL
  • Dicipta oleh Ricardo Cabello aka mrDoob
  • github: v74 (v1 > 2010); tonton 1 / bintang 572 / garpu 23
  • Diberikan dalam WebGL… + CSS3D & SVG untuk penyemak imbas/mudah alih "lama".
  • Ciri: Pemandangan, Kamera, Geometri, Pemuat Model 3D, Lampu, Bahan, Zarah, Animasi, Shader…

Shaders ? Kesako?

Shaders adalah seperti "kesan khas" yang mencipta atau mengubah suai bahan dan warna (sangat hebat). Ia ditulis dalam glsl (OpenGL Shading Language, kelihatan seperti C).
 

Three.js dalam pengeluaran

Kita dapat melihat bahawa three.js digunakan terutamanya dalam pengeluaran untuk laman web acara, tapak eksperimen, tapak pameran dengan produk dan permainan 360°:
[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 dalam amalan

threejs-nod-map
Ambil perhatian bahawa cahaya serta jerat (objek) dan kamera akan disertakan dalam pemandangan dan yang kedua akan dimasukkan ke dalam "enjin rendering" dengan kamera. Dalam kod, ini akan memberikan contohnya untuk kiub mudah yang menghidupkan dirinya sendiri:


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

 
 

Beberapa pautan untuk three.js

 
PS: Tahukah anda bahawa kami menggunakan three.js untuk kalendar di hadapan (I.e.
Hervé Chaissac, UX-Scientist @UXRepublic

 

(gambar daripada David Scottlyons)