Představte si, že jste nejlepším hollywoodským režisérem a jste připraveni natočit tu největší scénu. Stojíte před prázdnou soupravou. Co si myslíte, že budete potřebovat?
Filmová scéna je velmi podobná scéně Three.js. Vytvoříme Hello Cube a zjistíme základy Three.js.
I když můžeme mít rozsáhlý seznam věcí, které můžeme přidat do našeho filmového setu, bez tří věcí se neobejdeme. První je naše filmová hvězda. Za druhé, budeme potřebovat kameru, abychom zachytili naši scénu. Nakonec budeme potřebovat obrazovku, abychom viděli, co jsme právě zachytili.
Stručně řečeno, Three.js je JavaScriptová knihovna a aplikační programovací rozhraní (API), které poprvé vydal Ricardo Cabello v dubnu 2010. Od vydání se Three.js rozrostla na robustní knihovnu s tisíci přispěvatelů. Three.js používá WebGL pro snadné vytváření 3D obsahu. WebGL je nízkoúrovňové rozhraní API pro různé platformy, které vytváří jednoduché tvary, jako jsou body, čáry a trojúhelníky. Protože WebGL je nízkoúrovňové, potřebovali bychom spoustu kódu, abychom i nakreslili jeden trojúhelník. Three.js tento úkol značně usnadňuje.
V Three.js bude náš objekt reprezentován něčím, co se nazývá Mesh. "Síť" je 3D forma vytvořená pomocí vrcholů. Každý vrchol je reprezentován rovinami souřadnic rozměrů X, Y a Z. X je vodorovná rovina nebo rovina zleva doprava. Y je svislá rovina nebo rovina shora dolů. Z je rovina hloubky nebo rovina zepředu dozadu.
Pokud máme tři vrcholy, můžeme nakreslit přímku spojující jeden vrchol s druhým a vytvořit trojúhelník. Toto je nejjednodušší tvar, který můžeme ve WebGL vytvořit. Pokud bychom chtěli vytvořit plochý obdélník, potřebovali bychom alespoň dva trojúhelníky (alespoň 4 vrcholy). Přidáním více vrcholů můžeme vytvořit velmi složité tvary, dokonce i ty nejhladší koule.
To je dost řečí. Pojďme napsat nějaký kód. Soubory můžeme oddělit, ale aby to bylo ještě jednodušší, použijeme jeden soubor HTML. Naším cílem je vytvořit 3D kostku.
<html>
<head>
<title>Your First Three.js Scene</title>
<style>
*{
margin: 0;
}
.display{
position: absolute;
top: 0;
left: 0;
outline: none;
}
html, body{
overflow: hidden;
}
</style>
<script type="module">
import * as THREE from "https://cdn.skypack.dev/pin/[email protected]/mode=imports/optimized/three.js"
</script>
</head>
<body>
<canvas class="display"></canvas>
</body>
</html>
Vytvořili jsme <canvas> živel. Vraťme se k naší analogii, <canvas> prvek lze považovat za naši obrazovku, která zobrazuje naši zachycenou scénu. Vše z naší scény bude zobrazeno nebo vykresleno v tomto <canvas> živel. Poté jsme nastavili naše základní CSS tak, aby skrylo přetečení, odstranilo jakýkoli okraj a poskytlo našemu plátnu absolutní pozici. Poté jsme importovali modul Three.js do našeho <script> .
Zbývající kód zapíšeme do <script> prvek.
Nyní jsme připraveni vytvořit instanci našeho <canvas> uvnitř našeho skriptu. Můžeme to udělat pomocí document.querySelector() .
//instantiate canvas
const canvas = document.querySelector('.display')
Použili jsme <canvas> třídy prvků, abychom ji propojili s naší scénou. Právě tak jsme připraveni vytvořit naši scénu. V naší scéně přidáme síť krychle. Pokračujeme v naší analogii, kostka je hvězdou naší scény. Stejně jako všechny skvělé filmové scény musíme být konkrétní ohledně našeho obsazení. Abychom vytvořili naši kostkovou síť, musíme poskytnout dva požadavky. První je geometrie a druhá je druh materiálu.
Three.js nám to velmi usnadňuje. Protože v knihovně jsou již k dispozici tvary jako:kvádr, koule, kužel, kružnice, rovina a mnoho dalších geometrií. Různé geometrie vyžadují různé vstupy. Geometrie krabice vyžaduje plovoucí hodnoty šířky, výšky a hloubky.
Můžeme si také vybrat z několika materiálů, ale prozatím použijeme základní materiál Mesh. Máme možnost přidat barvu do našeho materiálu, takže jej uděláme azurový. Poté, co vybereme naše parametry, přidáme kostku do naší scény.
//create a scene
const scene = new THREE.Scene()
//create a cube
const cube = new THREE.Mesh(
//box geometry with a width, height and depth
new THREE.BoxGeometry(1, 1, 1),
//apply a mesh basic material to our mesh
new THREE.MeshBasicMaterial ({
color: 0x00ffff
})
)
//add our mesh to the scene
scene.add(cube)
Splnili jsme jeden ze tří nezbytných požadavků pro vytvoření naší scény. Ještě musíme vyrobit naši kameru a náš renderer. Naše kamera zachytí naši scénu a renderer zobrazí naši scénu na našem plátně.
Three.js nám dává několik možností pro kameru, ale nyní použijeme perspektivní kameru. Perspektivní kamera zobrazuje objekty blíže ke kameře jako větší a objekty vzdálenější jako menší. To by mohlo být jednoduše reprezentováno tvarem zvaným frustum. Frustum je objekt ve tvaru kužele nebo pyramidy se špičatým koncem. Perspektivní kamera zobrazuje objekty způsobem, který by krychle vypadal jako komolý. Perspektivní kamera potřebuje čtyři vstupy. Jsou to:zorné pole (FOV), poměr stran displeje, blízkost a vzdálená hodnota. FOV je úhlová míra zdola nahoru daná jako plovoucí hodnota. Poměr stran je šířka plátna dělená výškou plátna. Hodnoty na blízko a na dálku představují hloubku pole, kterou chceme, aby fotoaparát zachytil.
//create camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 100)
scene.add(camera)
camera.position.z = 3
Všimněte si, že poloha kamery je jako u jakéhokoli objektu reprezentována hodnotami x, yaz ve scéně. Ve výchozím nastavení jsou objekt i kamera umístěny na 0, 0, 0. K zachycení objektu potřebujeme, aby byla kamera před objektem. Pokud měl náš monitor krabicový tvar, kladná hodnota z ukazuje směrem k vám a záporná hodnota z směřuje k zadní části monitoru.
Poslední věc, kterou musíme udělat, je přidat renderer. Three.js nám poskytuje několik možností vykreslování, ale nyní použijeme WebGLRenderer. Naši zachycenou scénu zobrazíme pomocí rendereru na našem plátně. Vykreslovací modul má .render metoda, která vyžaduje scénu, kterou chceme vykreslit, a kameru, kterou jsme tuto scénu zachytili.
//create renderer
const renderer = new THREE.WebGLRenderer({canvas})
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.render(scene, camera)
Podívejte se na to! Vytvořili jste svou první Hello Cube!
Z tohoto pohledu se naše krychle jeví jako pouhý čtverec. Ale uděláme nějaké kouzlo s kamerou a necháme ji rotovat. Uděláme to pomocí Orbit Controls. Ovládání oběžné dráhy otáčí kamerou kolem daného cíle. V tomto případě střed scény, kde je umístěna naše kostka. Nejprve načteme ovládací prvky orbity.
import { OrbitControls } from "https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls.js"
A pak to vytvořte. Ovládání oběžné dráhy vyžaduje kameru a plátno, na kterém se bude animovat. Povolíme tlumení pohybu kamery, které zabrání trhavému pohybu kamery. také provedeme automatické otáčení.
//instantiate OrbitControls after camera and canvas
const controls = new OrbitControls(camera, canvas);
//smooth rotation of camera
controls.enableDamping = true;
//auto rotation of camera
controls.autoRotate = true;
Abychom scénu neustále aktualizovali, musíme vytvořit funkci, která bude volat window.requestAnimationFrame() která nepřetržitě volá samotnou funkci. Počet zpětných volání je obvykle 60krát za sekundu.
//create a call back function
const updater = () => {
//call the same function again
window.requestAnimationFrame(updater)
//update the orbit controls with every function call
controls.update()
//render the scene again with every function call
renderer.render(scene, camera)
}
//call the function
updater()
Nyní můžeme pohybovat kamerou na našem plátně pomocí myši.
Odtud jsou možnosti nekonečné. Three.js dává vývojářům možnost využívat WebGL k vytváření responzivního, interaktivního a poutavého webového obsahu. Existuje mnoho zdrojů, které si můžete přečíst a dozvědět se více o Three.js.
https://threejs.org/
https://threejs-journey.xyz/
https://threejsfundamentals.org/
Děkuji vám za Váš čas. Doufám, že vám byl tento příspěvek užitečný.
Najdete mě na https://twitter.com/nate_dev_