Ahoj lidi, doufám, že se máte dobře! :)
Jsem zpět poté, co jsem zveřejnil první díl této série o tom, jak začít s Three.js bez bolesti.
Pokud jste to ještě neudělali, první díl si můžete přečíst zde 👇🏼
Malá rekapitulace
Minule jsme skončili s naším plátnem obsahujícím červenou 3D kostku otočenou o kousek, aby bylo možné vidět nějaké úhly.
Toto je úplný soubor script.js soubor, který byste měli mít, pokud jste postupovali podle kroků v první části:
// 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);
Dnes uvidíme, jak oživit naši kostku, jak změnit její geometrii a její materiál (speciální technikou).
Na konci série budete mít demo, které by mělo vypadat takto:https://th3wall-threejs.netlify.app
Animace krychle
Abychom mohli věci animovat, musíme vyfotit každý snímek . Ale jak to můžeme udělat? 🤔
Použijeme requestAnimationFrame (také nazývané RAF ), což vám umožní spustit funkci na každém snímku.
To má co do činění s prostým JS a není to specifické pro ThreeJS.
Za prvé, uvnitř stejného script.js musíme vytvořit funkci a jednou ji zavolat:
const animate = () => {
// empty function
};
animate();
Druhým krokem je přesunout render uvnitř této funkce:
const animate = () => {
renderer.render( scene, camera );
};
animate();
Nyní je čas vložit requestAnimationFrame uvnitř animace funkce, předá stejnou animaci fungovat jako parametr.
Metoda RAF bere jako parametr funkci zpětného volání, která bude volána na dalším snímku (jakmile bude obrazovka připravena přijmout další překreslení obrazovky) a na dalším a na dalším.....
const animate = () => {
window.requestAnimationFrame(animate);
renderer.render( scene, camera );
};
Jak se můžeme ujistit, že vše funguje? Otočme náš objekt!
Abychom to udělali, zvýšíme rotaci sítě o velmi malou hodnotu, zkusme s 0,01:
const animate = () => {
window.requestAnimationFrame(animate);
mesh.rotation.y += 0.01;
renderer.render( scene, camera );
};
A je to tady:naše kostka se nyní otáčí!
Změnit geometrii
Nyní, když je náš objekt animovaný, můžeme změnit jeho geometrii.
V dokumentaci ThreeJS můžete najít spoustu dostupných geometrií, se kterými si můžete hrát a experimentovat se spoustou různých věcí.
Jeden z mých oblíbených (stejně jako Bruno 😁) je TorusKnowGeometry , který se skládá z jakéhosi „nekonečného“ uzlu se spoustou zaoblených ploch.
Můžeme vytvořit torusový uzel nahrazením deklarační čáry geometrie z BoxGeometry na TorusKnotGeometry . Je zřejmé, že změnou tvaru našeho objektu musíme odpovídajícím způsobem upravit jeho parametry.
Pro Torus Knot si pro naše účely budeme muset zapamatovat tyto parametry:
- poloměr - Definuje poloměr torusu [výchozí je 1];
- trubice — Definuje poloměr trubky [výchozí je 0,4];
- tubularSegments — Definuje počet tubulárních vrcholů [výchozí je 64];
- radialSegments — Definuje počet radiálních vrcholů [výchozí je 8]
Zde jsou některé hodnoty, které vkládáme
// replace this line
const geometry = new THREE.BoxGeometry(1, 1, 1);
// with this one
const geometry = new THREE.TorusKnotGeometry(0.5, 0.2, 200, 30);
a výsledek bude tento:
Mnohem lepší než kostka, řekl bych, že? Osobně tuto geometrii miluji!
Změňte materiál
Geometrie vypadá mnohem lépe a vyvinutější než předtím, ale upřímně řečeno, s touto plochou červenou barvou je to trochu chaotické a křivky geometrie nejsou opravdu jasně vidět. Takže teď musíme změnit materiál.
V ThreeJS je tolik materiálů a můžete si také vytvořit svůj vlastní materiál pomocí něčeho, čemu se říká shaders .
Shadery jsou VELKÉ a docela těžké téma na naučení, takže je nebudeme používat pro naše účely, ale Bruno má také hodiny lekcí na toto téma se svým kurzem ThreeJS, který je nutností pro každého kreativního vývojáře.
Použijeme speciální techniku zvanou matcaps . Matcaps jsou druh materiálu, který se používá k simulaci vzhledu materiálu na povrchu.
Nejprve potřebujeme přístup k matcapu a Bruno nám ve videonávodu poskytl odkaz na jeden z vašich. budu používat tento:
Odkaz:https://bruno-simon.com/prismic/matcaps/3.png
Je to v podstatě obrázek koule (můžete si ji vytvořit sami pomocí programů jako Photoshop) a tento obrázek použijete jako texturu pro geometrii. Každý pixel tohoto obrázku bude aplikován na geometrii a bude přebírat barvy z každého pixelu obrázku.
Abychom mohli použít matcap, musíme načíst to, co jsem nazval textura a abychom toho dosáhli, v ThreeJS použijeme něco, co se nazývá TextureLoader .
const textureLoader = new THREE.TextureLoader();
Poté načteme náš matcap obrázek do loaderu a poskytneme mu adresu URL a přiřadíme jej k proměnné:
const matcapTexture = textureLoader.load("https://bruno-simon.com/prismic/matcaps/3.png");
Nyní, když je naše textura načtena, musíme ji aplikovat na materiál jako poslední krok.
Metoda MeshBasicMaterial nedokáže použít matcap jako texturu, takže musíme použít jinou metodu nazvanou MeshMatcapMaterial (ref:MeshMatcapMaterial Docs) a poté mu můžeme poskytnout naši texturu obsaženou v proměnné matcapTexture .
// Replace this line
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
// With this one
const material = new THREE.MeshMatcapMaterial({ matcap: matcapTexture });
A konečně, pokud si nyní prohlédnete scénu, uvidíte tuto krásu
Chcete přidat trochu pohybu?
Přidejme také vertikální rotaci k našemu torusovému uzlu. Uvnitř animace funkce spolu s horizontálním pohybem přidáme tento řádek:
mesh.rotation.x += 0.01;
Nyní si můžete vychutnat tuto krásnou 3D animaci spolu s tímto úžasným matcapem!
Závěrečná rekapitulace
V této části jsme viděli, jak animovat náš objekt, jak změnit jeho geometrii a jak změnit jeho materiál pomocí speciální techniky.
Ve třetí a poslední části na naši scénu aplikujeme několik malých plynulých animací, uděláme ji responzivní a nastylujeme stránku, aby vypadala takto:https://th3wall-threejs.netlify.app.
Stejně jako u prvního dílu zde nechávám úplné script.js blok kódu, abyste mohli mít aktualizovaný:
// script.js
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight);
camera.position.z = 3;
scene.add(camera);
const textureLoader = new THREE.TextureLoader();
const matcapTexture = textureLoader.load("https://bruno-simon.com/prismic/matcaps/3.png");
const geometry = new THREE.TorusKnotGeometry(0.5, 0.2, 200, 30);
const material = new THREE.MeshMatcapMaterial({ matcap: matcapTexture });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
const animate = function () {
window.requestAnimationFrame(animate);
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
document.body.appendChild(renderer.domElement);
Doufám, že se něco naučíte a také doufám, že vás tento článek zaujme.
Sledujte mě na Twitteru, GitHubu a Hashnode a dejte mi vědět, jestli se vám to líbilo!
Dík.
Th3Wall