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 |
| 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[editovat | editovat zdroj]
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[editovat | editovat zdroj]
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í[editovat | editovat zdroj]
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[editovat | editovat zdroj]
Reference[editovat | editovat zdroj]
V tomto článku byl použit překlad textu z článku Three.js na anglické Wikipedii.
- ↑ Khronos Releases Final WebGL 1.0 Specification [online]. March 3, 2011 [cit. 2012-06-02]. Dostupné online.
- ↑ CROSSLEY, Rob. Study: Average dev costs as high as $28m [online]. Intent Media Ltd, 11 January 2010 [cit. 2012-06-02]. Dostupné v archivu pořízeném dne 2010-01-13.
- ↑ First commit [online]. github.com/mrdoob [cit. 2012-05-20]. Dostupné online.
- ↑ a b c d Three.js White Paper [online]. Github.com, 2012-05-21 [cit. 2013-05-09]. Dostupné online.
- ↑ Three.js/license [online]. github.com/mrdoob [cit. 2012-05-20]. Dostupné online.
Literatura[editovat | editovat zdroj]
- 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.
- 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[editovat | editovat zdroj]
Obrázky, zvuky či videa k tématu Three.js na Wikimedia Commons - Oficiální stránky
