Ahoj lidi, doufám, že se máte dobře! :)
Nedávno jsem na svém Twitteru narazil na upoutávku:byl to příspěvek @prismicio s rozhovorem se skvělým @brunosimonem. Během rozhovoru vysvětluje, jak používat ThreeJS k vylepšení webu o 3D prvky.
Zde je odkaz na tento tweet:
Tento rozhovor a vášeň, se kterou Bruno vysvětluje koncepty ThreeJS, mě HODNĚ inspirovaly, takže jsem se rozhodl začít pronikat do tohoto nového virtuálního světa.
Pokusím se to zrekapitulovat a vysvětlit co nejjednodušším a srozumitelnějším způsobem.
Slibuji vám, že za přibližně 30 řádků kódu vytvoříte svůj první funkční 3D prvek (rekapitulace na konci článku).
Nastavení projektu
Prvním krokem je vytvoření nového index.html soubor, který by měl vypadat takto:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1"/>
<link rel="stylesheet" href="css/styles.css"/>
<title>My first ThreeJS demo app</title>
</head>
<body>
<script src="js/script.js" type="module"></script>
</body>
</html>
Pak bychom měli přidat dva externí soubory „propojené“ do našeho index.html soubor:vytvoříme styles.css a script.js soubory a vložíme je do css a js složky.
Nyní je čas inicializovat našeho správce balíčků pro konfiguraci našeho projektu, takže spustíme
Můj výchozí správce balíčků je NPM, ale místo něj samozřejmě můžete použít Yarn.
Instalace a nastavení Three.js
Abychom mohli začít hrát s Three.js, měli bychom jej nainstalovat. Můžeme to udělat otevřením terminálu a spuštěním:
Poté v script.js můžeme importovat Three s následujícím řádkem:
import * as THREE from "three";
Nyní, když jsme jej naimportovali, můžeme jej začít používat.
První věc, kterou je třeba vědět, je, že jakmile je Three nainstalována, máme přístup k jedné velmi specifické proměnné, která je 'THREE'. Po přihlášení již vidíme, že máme přístup k mnoha věcem, které tato knihovna podporuje:
console.log(THREE);
Jak přidat scénu, kameru a poměr stran
Pro začátek potřebujeme tři věci:první je scéna , stejně jako filmová kulisa. Na scénu přidáte objekty (mohou to být postavy) a fotoaparát .
Nejprve vytvoříme prázdnou scénu :
const scene = new THREE.Scene();
Uvnitř scény jsme řekli, že musíme přidat kameru .
Zde je nutné vědět, že v Three.js existují různé typy fotoaparátů (další informace naleznete zde v dokumentaci).
Ten, který použijeme, je PerspectiveCamera , který napodobuje způsob, jakým vidí lidské oko, je jako skutečný fotoaparát:čím blíže jste, tím větší uvidíte.
K vytvoření kamery potřebujeme přidat:
const camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight);
Kamera potřebuje nějaké parametry jako parametry:
-
první možností je FOV (Field Of View) a je určen jako stupně. Můžeme zvolit otevřený úhel 180 stupňů nebo velmi úzký úhel 30 stupňů, jako jsou fotočočky.
Podle zkušeností Bruna doporučuje zůstat v rozsahu od 40 stupňů do maximálně 70 stupňů, takže použijeme úhel 55 stupňů. -
druhou požadovanou možností je poměr stran :protože chceme pokrýt celé pozadí naší stránky, vložíme šířku a výšku našeho výřezu a v JS můžeme tyto velikosti načíst pomocí window.innerWidth a window.innerHeight .
TL/DR:Poměr stran je pouze šířka dělená výškou.
Jedna z věcí, které je třeba s Three.js pochopit, je, že jakýkoli objekt, který chceme zahrnout, jej musíme přidat do scény a v této fázi již můžeme přidat náš fotoaparát zadáním:
scene.add(camera);
Přidejte do scény síť
S tímto prvním článkem (ano, bude to malá série 😉), přidáme na scénu kostku.
Kostka je objekt, který budeme moci vidět, a v Three.js se objekt, který budeme moci vidět, nazývá mesh .
Síť se skládá ze dvou věcí:její geometrie (body který tvoří geometrii, jako je počet vrcholů krychle) a materiál , tak bude geometrie vypadat, když bude vykreslena ve scéně.
Nejprve musíme vytvořit naši geometrii a protože chceme krychli, použijeme její související třídu, "BoxGeometry":
const geometry = new THREE.BoxGeometry(1, 1, 1);
Tato třída automaticky ví, že by měla vytvářet body kostek, jakmile obdrží požadované parametry, kterými jsou šířka , výška a hloubku (odkaz na dokumenty).
Nyní je čas přidat materiál, který naše kostka použije při vykreslování. Pro tento první experiment chceme, aby naše kostka byla úplně červená. Přidáváme tedy následující:
const material = new THREE.MeshBasicMaterial({color: 0xff0000});
Třída "MeshBasicMaterial" a všechny dostupné třídy sítě a geometrie jsou k dispozici v dokumentaci s mnoha příklady. Jako parametr předáváme barvu.
Parametr color lze zadat mnoha způsoby:
- jako řetězec ('červený');
- jako šestnáctkové číslo (#FF0000);
- jako hexadecimální v základu 16 (0xff0000).
V tomto okamžiku máme svou geometrii a náš materiál, takže je můžeme smíchat do sítě a přidat ji do scény:
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
Vykreslení scény
Konečně je čas vidět naši kostku!
Deklarujeme renderer používající nejběžnější WebGL renderer, "WebGLRenderer":
const renderer = new THREE.WebGLRenderer();
Náš renderer potřebuje znát velikost, a jak jsme si řekli dříve, chceme, aby naše scéna zabírala celou šířku výřezu. Takže to můžeme říct vykreslovači:
renderer.setSize(window.innerWidth, window.innerHeight);
Abychom viděli naši scénu, musíme nyní kreslit na plátno 🎨.
Při pohledu na naši proměnnou rendereru si můžeme všimnout, že naše plátno je obsaženo uvnitř domElement vlastnictví.
Pokud to zalogujeme, můžeme vidět naše plátno:
console.log(renderer.domElement);
V tomto okamžiku necháme ThreeJS vytvořit naše plátno a připojit ho do <body> stránky; můžeme to udělat přidáním následujícího řádku:
document.body.appendChild(renderer.domElement);
Při kontrole našeho DOM bychom nyní měli vidět náš <canvas> prvek přidán do <body> .
Jako poslední krok pro náš renderer mu nyní musíme říct, aby vykreslil plátno uvnitř stránky. Vyžaduje to scénu (ve kterém jsme měli přidat všechny potřebné prvky) a fotoaparát .
renderer.render(scene, camera)
Ale počkej chvíli.
Proč ještě nevidíme kostku?
Upevnění kamery a otočení kostky
Odpověď na předchozí otázku souvisí s polohou kamery .
Stále kostku nevidíme, protože jsme uvnitř kostky .
Možná se teď ptáte:neměl bych kolem sebe vidět všechno červené, když je kostka červená?
Odpověď zní ne:ve výchozím nastavení nevidíme „uvnitř“ geometrie. Můžeme vidět obličej, ale ne jeho zadní stranu.
Nyní, když víme výše uvedené, bychom měli přesunout pozici kamery ven z krychle. Posuneme-li se výše, kde jsme definovali proměnnou kamery, přidáme pod tento řádek následující:
camera.position.z = 3
Chcete-li posunout kameru zpět , musíme zapracovat na Z osa.
Po dokončení můžeme konečně vidět naši kostku:
Polohu kamery můžeme také posunout doleva/doprava nebo nahoru/dolů úpravou polohy na x a y osa (tj.:pro naše finální demo posuneme náš objekt trochu doprava, abychom si mohli vyhradit místo na levé straně pro nadpis, odstavec a možná CTA).
Protože s tímto nastavením je náš objekt plochý, nezdá se, že by šlo o skutečnou krychli. Můžeme otáčet kostkou, abychom viděli nějaké úhly.
Abychom mohli provést rotaci, musíme pracovat na našem síťovém objektu.
Jak říká Bruno, abychom to mohli posunout vodorovně, musíme myslet na to, abychom na osu y umístili něco hrotu, takže pod řádek deklarace sítě přidáme:
mesh.rotation.y = 0.5
Shrnutí
Nechám zde úplné script.js blok kódu, abyste se na něj mohli lépe podívat:
// script.js
import * as THREE from "three";
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight);
camera.position.z = 3;
scene.add(camera);
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const mesh = new THREE.Mesh(geometry, material);
mesh.rotation.y = 0.5;
scene.add(mesh);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.render( scene, camera );
document.body.appendChild(renderer.domElement);
Konečně můžeme vidět naši 3D kostku na stránce a můžeme si pohrát s její polohou, rotací a barvou.
V dalších článcích (připravujeme zanedlouho v následujících dnech) animujeme kostku, uvidíme, jak můžeme změnit její geometrii a materiál, a také uvidíme, jak udělat plátno responzivní .
Také přidáme několik plynulých animací a několik skvělých malých interakcí s naším objektem.
Konečný výsledek, kterého dosáhneme, je již vidět na tomto odkazu na ukázku:
👉🏼 https://th3wall-threejs.netlify.app
Doufám, že jste se již něco naučili a doufám, že vás tento článek zaujme.
Sledujte mě na Twitteru, GitHubu a Hashnode.
Dejte mi vědět, jestli se vám to líbilo!
Dík.
Th3Wall