Three.js

Příklady použití Three.js
Vývojář	mrdoob
Aktuální verze	161 (31. ledna 2024)
Operační systém	multiplatformní software
Vyvíjeno v	JavaScript
Typ softwaru	API, javascriptová knihovna a knihovna
Licence	licence MIT
Web	threejs.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.

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]

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]

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]

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

• Steven Levy, Crypto: How the Code Rebels Beat the Government — Saving Privacy in the Digital Age, ISBN 0-14-024432-8, 2001.
• Lars R. Knudsen, Vincent Rijmen, Ronald L. Rivest, Matthew J. B. Robshaw: On the Design and Security of RC2. Fast Software Encryption 1998: 206–221
• John Kelsey, Bruce Schneier, David Wagner: Related-key cryptanalysis of 3-WAY, Biham-DES, CAST, DES-X, NewDES, RC2, and TEA. ICICS 1997: 233–246

• DIRKSEN, Jos. Learning Three.js: The JavaScript 3D Library for WebGL. UK: Packt Publishing, 2013. Dostupné online. ISBN 9781782166283. Je zde použita šablona {{Cite book}} označená jako k „pouze dočasnému použití“.
• PARISI, Tony. Webgl Up and Running. Sebastopol: Oreilly & Associates Inc, 2012. ISBN 9781449323578. Je zde použita šablona {{Cite book}} označená jako k „pouze dočasnému použití“.
• SEIDELIN, Jacob. HTML5games: creating fun with HTML5, CSS3, and WebGL. Chichester, West Sussex, U.K.: John Wiley & Sons, 2012. ISBN 1119975085. S. 412–414. Je zde použita šablona {{Cite book}} označená jako k „pouze dočasnému použití“. – "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. Je zde použita šablona {{Cite book}} označená jako k „pouze dočasnému použití“.
• RAASCH, Jon. Smashing WebKit. Chichester: Wiley, 2011. ISBN 1119999138. S. 181, 182, 216. Je zde použita šablona {{Cite book}} označená jako k „pouze dočasnému použití“.
• WILLIAMS, James. Three.js By Example. Vancouver, Canada: Leanpub, 2013. Dostupné online. Je zde použita šablona {{Cite book}} označená jako k „pouze dočasnému použití“.

• Obrázky, zvuky či videa k tématu Three.js na Wikimedia Commons
• Oficiální stránky