Jak funguje three js - průvodce pro začátečníky

Three.js je knihovna JavaScriptu, která je navržena tak, aby vytvářela a zobrazovala interaktivní 3D grafy webových stránek. Umožňuje vytvářet složité 3D scény, animace a vizualizace pomocí relativně jednoduchého API.

Instalace a připojení

Pro začátek tři.js je třeba stáhnout knihovnu nebo ji připojit přes CDN. Chcete-li se připojit přes CDN, přidejte do souboru HTML následující kód:

Tvorba scény

Před vytvořením objektů a prvků na vaší 3D scéně musíte vytvořit instanci třídy Scene. To lze provést následovně:

const scene = new THREE.Scene();

Vytvoření fotoaparátu

Kamera slouží k určení, co přesně uživatel vaší 3D scény uvidí. Obvykle se používá perspektivní fotoaparát PerspectiveCamera. K vytvoření fotoaparátu použijte následující kód:

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

Vytvoření rendereru

Renderer se používá k zobrazení vaší 3D scény na webové stránce. Three.js podporuje několik druhů renderů, ale nejběžnější je WebGLRenderer. K vytvoření renderu použijte následující kód:

const renderer = new THREE.WebGLRenderer();

Po vytvoření renderu je nutné určit jeho rozměry pomocí metody setSize a přidat jej na stránku pomocí metody appendChild. Například:

renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);

Zobrazení scény

K zobrazení scény je nutné v hlavním obnovovacím cyklu (obvykle nazývaném "render loop") vyvolat metodu render vašeho renderera. Například:

function animate() animate();

Tvorba geometrie a materiálu

Chcete-li přidat objekty na scénu, musíte nejprve vytvořit geometrii (tvar) objektu a materiál (jak bude vypadat). Chcete-li například vytvořit červenou kostku o velikosti 1x1x1, můžete použít následující kód:

const geometry = new THREE.BoxGeometry(1, 1, 1);const material = new THREE.MeshBasicMaterial(< color: 0xff0000 >);const cube = new THREE.Mesh(geometry, material);scene.add(cube);

Přidání osvětlení

Aby vaše scéna vypadala realističtěji, můžete přidat osvětlení. Three.js nabízí několik typů osvětlení, včetně AmbientLight (jednoduchá sytost barev) a DirectionalLight (směrové světlo). Chcete-li například přidat směrované světlo do vaší scény, použijte následující kód:

const light = new THREE.DirectionalLight(0xffffff, 1);light.position.set(1, 1, 1);scene.add(light);

To jsou základy práce s three.js. Můžete vytvářet složitější scény, animovat objekty a přidávat další prvky, jako jsou textury a shadery. Doporučuje se prostudovat dokumentaci a příklady tři.js, abychom hlouběji pochopili možnosti této knihovny.

Základní principy práce

Základní principy práce se třemi.js jsou:

1. Scéna (Scéna): Je to objekt, ve kterém probíhá veškerá vizualizace. Obsahuje všechny objekty, světlo a kameru. Chcete-li vytvořit scénu, musíte vytvořit instanci třídy THREE.Scene.
2. Fotoaparát (Camera): Kamera určuje, které objekty scény budou uživateli viditelné. Three.js poskytuje několik typů kamer, jako je perspektivní, ortografická a další. Chcete-li vytvořit fotoaparát, musíte vytvořit instanci příslušné třídy, například, THREE.PerspectiveCamera.
3. Rendererer (Rendererer): Jedná se o objekt, který je zodpovědný za vykreslení scény na plátně (canvas). Three.js poskytuje několik typů renderů, například, THREE.WebGLRenderer. Chcete-li vytvořit Renderer, musíte vytvořit instanci příslušné třídy a přidat plátno na webovou stránku.
4. Materiály a textury: Materiály určují vzhled objektu a textury přidávají detaily a obrázky na povrch objektu. Three.js poskytuje mnoho vestavěných materiálů a textur a také možnost vytvářet vlastní.
5. Geometrie (Geometry) a modely (Mesh): Geometrie určuje tvar objektu a model (Mesh) - kombinuje geometrii a materiál k vytvoření konkrétního objektu. Three.js poskytuje mnoho vestavěných geometrií a modelů a také možnost vytvářet vlastní.
6. Osvětlení (Lighting): Osvětlení určuje, jak objekty reagují na světlo. Three.js poskytuje různé typy světla, jako je ambientní, směrový, bodový a další.
7. Animace: Three.js poskytuje možnost vytváření animací, které vám umožní vizuálně změnit polohu, otáčení, měřítko objektů nebo jiné jejich vlastnosti. Pro vytváření animací je nutné použít objekty třídy THREE.AnimationMixer a THREE.AnimationClip.

Základní principy práce s Three.js vám umožňují vytvářet složité a zajímavé 3D scény, vizualizace a hry na webových stránkách pomocí otevřeného a flexibilního nástroje. Tato knihovna má velkou komunitu vývojářů, kteří ji aktivně rozvíjejí a podporují, což ji činí velmi populární mezi začínajícími a profesionálními vývojáři.