Three.js

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

Příklady použití Three.js
Vývojář	mrdoob
Aktuální verze	175 (28. března 2025)
Operační systém	cross-platform
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.

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]