Three.js

V tomto článku se ponoříme do fascinujícího světa Three.js, prozkoumáme jeho význam, jeho dopad na společnost a jeho relevanci dnes. Three.js je téma, které upoutalo pozornost lidí všech věkových kategorií a z různých oblastí, od politiky po popkulturu. V průběhu let se Three.js ukázalo být tématem velkého zájmu odborníků v oboru i laické veřejnosti, které vyvolává debaty a úvahy, které ovlivnily náš způsob myšlení a jednání. V tomto článku budeme analyzovat hodnotu Three.js a to, jak se vyvíjel v průběhu času, a budeme se zabývat jeho dopadem na společnost a jeho významem v moderním světě.

Three.js
Logo
Příklady použití Three.js
Příklady použití Three.js
Vývojářmrdoob
Aktuální verze175 (28. března 2025)
Operační systémcross-platform
Vyvíjeno vJavaScript
Typ softwaruAPI, javascriptová knihovna a knihovna
Licencelicence MIT
Webthreejs.org
Některá data mohou pocházet z datové položky.

Three.js je v informatice název JavaScriptové knihovny a aplikačního rozhraní s širokou podporou webových prohlížečů, které slouží k vytváření a zobrazování 3D animací ve webovém prohlížeči. Využívá aplikačního rozhraní WebGL. Zdrojový kód Three.js je k nalezení v repozitáři na GitHubu.

Přehled

Three.js umožňuje do webové stránky začlenit 3D animace akcelerované přes GPU. Tyto animace jsou pak navrženy pomocí jazyka JavaScript a to bez závislosti na proprietárních pluginech ve webových prohlížečích, což je možné díky široké podpoře rozhraní WebGL.[1]

Vysokoúrovňové knihovny jako Three.js, GLGE, SceneJS, PhiloGL a další byly vytvořeny za účelem usnadnění vytváření komplexních 3D animací určených pro webové prohlížeče.[2]

Historie

Knihovna Three.js byla poprvé zveřejněna Ricardem Cabellem na GitHubu v dubnu roku 2010.[3] Její původ je spojen s Cabellovým působením v demoscéně na počátku 21. století. Zdrojový kód knihovny byl nejdříve vytvořen v jazyce ActionScript. Roku 2009 byl přenesen do JavaScriptu. Dvěma hlavními Cabellovými požadavky při tomto přenosu byly nenutnost kompilace kódu před každým načtením a jeho nezávislost na platformě. S příchodem WebGL byl Paulem Bruntem do knihovny začleněn renderer využívající právě toto rozhraní. Knihovna Three.js byla navržena tak, aby byl renderovací kód začleněn do knihovny ve formě modulu. Tato varianta má oproti variantě začlenění rendereru do jádra knihovny tu výhodu, že umožňuje začlenění vícera renderů a to i v budoucnu.[4]

Příspěvky Ricarda Cabella zahrnují návrh API, vytvoření rendererů pro canvas a SVG a sloučení commitů různých přispěvatelů do projektu.

Další významný přispěvatel, Branislav Uličný, začal spolupracovat na vývoji Three.js roku 2010 poté, co zveřejnil řadu WebGL dem na svých stránkách. Jeho cílem bylo překonat možnostmi rendereru pro WebGL možnosti rendererů pro canvas a SVG.[4] Jeho příspěvky se týkaly především materiálů, shaderů a post-processingu.

Brzy pro uvedení podpory WebGL pro Firefox 4 se v březnu roku 2011 zapojuje do projektu Joshua Koo. Ten vytvořil v září téhož roku své první demo pro 3D text.[4] Jeho příspěvky se často týkají generování geometrie.

V současnosti je počet přispěvatelů do projektu větší než 390.[4]

Použití

Celá knihovna Three.js je uložena v jediném JavaScriptovém souboru. Tento soubor lze do webové stránky zahrnout následujícím způsobem: 

<script src="js/three.min.js"></script>

Následující kód vytváří scénu, přidává kameru a krychli do scény, vytváří WebGL renderer a přidává jeho průzor do HTML dokumentu. Jakmile dojde k načtení krychle, začne se otáčet okolo osy X a Y. 

<script>

    var camera, scene, renderer,
    geometry, material, mesh;

    init();
    animate();

    function init() {
        scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
        camera.position.z = 1000;

        geometry = new THREE.BoxGeometry(200, 200, 200);
        material = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true});

        mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);

        renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);

        document.body.appendChild(renderer.domElement);
    }

    function animate() {
        requestAnimationFrame(animate);
        render();
    }

    function render() {
        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.02;

        renderer.render(scene, camera);
    }

</script>

Knihovna Three.js funguje ve všech prohlížečích podporujících WebGL a je dostupná pod licencí MIT.[5]

Odkazy

Reference

V tomto článku byl použit překlad textu z článku Three.js na anglické Wikipedii.

  1. ↑ Khronos Releases Final WebGL 1.0 Specification . March 3, 2011 . Dostupné online. 
  2. ↑ CROSSLEY, Rob. Study: Average dev costs as high as $28m . Intent Media Ltd, 11 January 2010 . Dostupné v archivu pořízeném dne 2010-01-13. 
  3. ↑ First commit . github.com/mrdoob . Dostupné online. 
  4. ↑ a b c d Three.js White Paper . Github.com, 2012-05-21 . Dostupné online. 
  5. ↑ Three.js/license . github.com/mrdoob . Dostupné online. 

Literatura

  • DIRKSEN, Jos. Learning Three.js: The JavaScript 3D Library for WebGL. UK: Packt Publishing, 2013. Dostupné online. ISBN 9781782166283. 
  • PARISI, Tony. Webgl Up and Running. Sebastopol: Oreilly & Associates Inc, 2012. ISBN 9781449323578. 
  • SEIDELIN, Jacob. HTML5games: creating fun with HTML5, CSS3, and WebGL. Chichester, West Sussex, U.K.: John Wiley & Sons, 2012. ISBN 1119975085. S. 412–414.  – "Three.js can make game development easier by taking care of low-level details"
  • WILLIAMS, James. Learning HTML5 game programming: a hands-on guide to building online games using Canvas, SVG, and WebGL. Upper Saddle River, NJ: Addison-Wesley, 2012. ISBN 0321767365. S. 117–120, 123–131, 136, 140–142. 
  • RAASCH, Jon. Smashing WebKit. Chichester: Wiley, 2011. ISBN 1119999138. S. 181, 182, 216. 
  • WILLIAMS, James. Three.js By Example. Vancouver, Canada: Leanpub, 2013. Dostupné online. 

Externí odkazy