Textúrák felfedezése 3D objektumokon kívülről és belülről
Írtunk a "három.js alapjairól", a "3D modellezésről", a "színes textúrákról" és a "reflexión és fénytörésen keresztüli környezeti textúrákról".
Ebben a cikkben textúrákat fogunk alkalmazni a 3D objektumokon kívül és belül, és példákat keresünk a 3D objektumok be- és kiutazására.
Újra felhasználtuk az előző cikkben szereplő Create React App munkakörnyezetet, a következő csomagokkal telepítve:
- three.js (
three
): Ez egy 3D JavaScript-könyvtár, amely 3D tartalmat jelenít meg egy weboldalon. Célja egy könnyen használható, könnyű, több böngészőn átívelő, általános célú 3D könyvtár létrehozása. - react-three-fiber (
@react-three/fiber
): Ez egy React renderer a three.js számára. Lehetővé teszi, hogy három.js fájlt írjunk JSX használatával, ami inkább deklaratív. A React wrapper a színfalak mögött is sok mindent kezel, például a vászon átméretezését és a fel nem szerelt tárgyak ártalmatlanítását. @react-three/drei
: Hasznos segítők gyűjteménye a react-three-fiber rendereléséhez. Sokféle objektum, például kamerák, vezérlők, képek, alakzatok, 3D modellek, környezetek stb. használatát megkönnyíti.
Lépésről lépésre utazunk be és ki a 3D objektumokból a következő példákkal:
- "Nézd a kockát kívülről"
- "Nézd meg a kockát belülről"
- "Utazás be és ki a kockából"
- "Nézd a gömböt kívülről"
- "Nézd meg a gömböt belülről"
- „Utazás a szférába és kifelé”
- "Egy gömb mindkét oldalán különböző textúrákkal"
Nézd meg a kockát kívülről
A three.js-ben a textúra úgy jön létre, hogy egy képet alkalmazunk egy felületre, vagy tükröződési vagy fénytörési térképként. Egy kockának hat képre van szüksége a hat lap textúrájának elkészítéséhez. Ezek a képek a következő sorrendben vannak megadva: pos-x
, neg-x
, pos-y
, neg-y
, pos-z
és neg-z
.
A mustármező képét használjuk.
Oszd fel négy fájlra, és nevezd el őket: mustard1.jpg
, mustard2.jpg
, mustard3.jpg
és mustard4.jpg
. Helyezze őket a public/textures
mappába.
Itt van public/sky.jpg
:
Itt van public/grass.jpg
:
Ezek a barkácsképek nem tökéletesek, de elég jók ahhoz, hogy bizonyítsák a koncepciót.
A „textúra-cikk” példáihoz hasonlóan kívülről nézzük a kockát a következő src/App.js
használatával:
„Részletesen elmagyaráztuk”, mi az a three.js, és hogyan működik a Reactben. A háló egy olyan típusú objektum, amely háromszög alakú sokszögháló alapú. Ez a csontváz alkotja a 3D objektumok alakját. A geometria (alak), az anyag (felület) és a jelenet (elhelyezés) határozza meg.
- A fenti kódban a textúraképek a 7–14. sorokban vannak betöltve. Minden textúra a
meshBasicMaterial
map
propjára van beállítva (31. sor). - a
Box
komponens (6–37. sorok) meghívja auseFrame
-t a forgatás végrehajtására (16–22. sorok). Meghatároz egymesh
-t (25-35. sorok), amely egy dobozt/kockát (26. sor) tartalmaz, ahol awidth
,height
ésdepth
[3, 3, 3]
-ként van definiálva. - Az anyagok (27–34. sorok) a
meshBasicMaterial
-vel vannak konfigurálva, amely olyan geometriák rajzolására szolgál, amelyeket nem befolyásol a fény. A 32. sorban aside
anyag értékeTHREE.FrontSide
. - A
Box
aCanvas
-en (41-48. sorok) jelenik meg, amely három összetevőt jelenít meg. ACanvas
acamera
kellékeit{ fov: 70, near: 0.01, far: 100, position: [0, 0, 6] }
-re állítja (42. sor), és a teljes nézetablakot elfoglalja égkék háttérrel (43. sor). - Hajtsa végre a
npm start
. A kameraállásban nézzük a[0, 0, 6]
-nál, a dobozon kívül.
Nézd meg a kockát belülről
A kocka belsejébe lépés egyszerű – egyszerűen mozgassa a kamera pozícióját a dobozon belül.
Itt van src/App.js
:
- A 32. sorban a
side
anyag értékeTHREE.BackSide
. - A 42-es vonalnál a kamera a
[0, 0, 1]
címen található. - Hajtsa végre a
npm start
parancsot. A kameraállásban nézzük a[0, 0, 1]
-nél, a doboz belsejében.
Utazzon be és ki a kockából
A kockát kívülről és belülről is megnézhetjük. Lehetővé teszi, hogy ki-be utazzunk a kockába. Ennek eléréséhez két dologra van szükség:
- Mozgassa a kamerát a kockán belül és kifelé.
- Az anyagot mindkét oldalon készítse el.
Itt van src/App.js
:
- A
useFrame
-ben (17–34. sor) a kamera minden meghívásban mozog. A kocka belsejéből kifelé mozog. Ha túl messze van (az
8-on túl van a 23-as sorban), akkor előre mozog és a kockában halad. Ha túl közel van (az
eléri az 1-et a 25. sorban), akkor hátrafelé mozog és kimegy a kockából. Ez a mozgás megismétlődik. - A 44. sorban a
side
anyag értékeTHREE.DoubleSide
. - Hajtsa végre a
npm start
parancsot. Ki-be utazunk a kockában.
Nézd meg a gömböt kívülről
Kivetítettünk egy tükröződő/törő térképet egy gömb felületére. Itt közvetlenül a gömbfelületre viszünk fel egy képet.
Mivel a gömb felülete nem sík, szükség van egy négyszögletes térképre. Az egyenszögletes térkép egy 2D-s kép, amely egy földgömb görbült felületét vetíti egy síkra.
A következő, négyszögletes képet letöltöttük a Wikipédiáról, és az public/textures
mappa alá map.jpeg
néven került.
Itt van src/App.js
:
- A 6. sorban az egyenszögletes leképezés betöltődik a textúrához, amely az
meshBasicMaterial
map
propjára van állítva (20. sor). - Az
Sphere
komponens (5–23. sorok) meghívja azuseFrame
-t a forgatás végrehajtására (9–15. sorok). Meghatároz egymesh
-et (18–21. sor), amely egy gömböt (19. sor) tartalmaz, ahol aradius
,widthSegments
ésheightSegments
[3, 64, 32]
-ként van definiálva. - Az anyag (20. sor)
meshBasicMaterial
értékkel van konfigurálva, ahol aside
értékeTHREE.FrontSide
. - A
Sphere
aCanvas
-on (27-34. sorok) jelenik meg, amely három összetevőt jelenít meg. ACanvas
acamera
kellékeit{ fov: 70, near: 0.01, far: 100, position: [0, 0, 6] }
-re állítja (28. sor), és a teljes nézetablakot elfoglalja világos égkék háttérrel (29. sor). - Hajtsa végre a
npm start
parancsot. Figyeljük a kamera állását a[0, 0, 6]
-nél, a gömbön kívül.
Nézze meg a gömböt belülről
A kamera pozíciójának mozgatásával utazzon a gömb belsejében.
Itt van src/App.js
:
- A 20. sorban a
side
anyag értékeTHREE.BackSide
. - A 28-as vonalnál a kamera a
[0, 0, 1]
címen található. - Hajtsa végre a
npm start
parancsot. Figyeljük a kamera helyzetét a[0, 0, 1]
-nél, a gömb belsejében.
Utazz be és ki a szférából
A kockához hasonlóan a gömbben is ki-be utazhatunk. Nem kell mást tennünk, mint mozgatni a kamerát, és az anyagot mindkét oldalra elkészíteni.
Itt van src/App.js
:
- A
useFrame
-ben (9–26. sor) a kamera minden meghívásban mozog. A gömb belsejéből kifelé mozog. Ha túl messze van (az
8-on túl van a 23-as sorban), akkor előre mozog és a gömbben halad. Ha túl közel van (az
eléri az 1-et a 25. sorban), akkor hátrafelé mozog és kimozdul a gömbből. Ez a mozgás megismétlődik. - A 44. sorban a
side
anyag értékeTHREE.DoubleSide
. - Hajtsa végre a
npm start
parancsot. Ki-be utazunk a szférában.
Egy gömb mindkét oldalán különböző textúrákkal
Színes térképet helyeztünk el az elülső, a hátsó és mindkét oldalon. Hogyan mutathatunk különböző textúrákat az elülső és a hátoldalon?
Ehhez két objektumot kell létrehoznunk – az egyik az elülső oldalt, a másik pedig a hátoldalt mutatja.
A gömböt használjuk annak bemutatására, hogyan érhető el. Először töltse le a másik oldal ekvirectangular képet, és helyezze a public/textures
mappa alá map2.png
néven.
Itt van src/App.js
:
- Az 5–34. soroknál a
Sphere
komponens két támasztékot vesz fel, amapName
és aside
. - A 43-as sorban az első
Sphere
aCanvas
-be kerül,textures/map2.png
pedig az elülső oldalon. - A 44. sorban a második
Sphere
aCanvas
-be kerül, atextures/map.jpeg
pedig a hátoldalra. - Hajtsa végre a
npm start
parancsot. A szférában ki-be utazunk, mindkét oldalon különböző textúrákkal.
Következtetés
Kódpéldákat mutattunk be a 3D objektumok külső és belső textúráinak megtekintésére. Lehetőség van különböző textúrák alkalmazására külső és belső 3D objektumokra is. A kamera mozgatásával ki-be utazhatunk a 3D objektumokba.
Köszönöm, hogy elolvasta. Remélem, ez hasznos volt. Ha felkeltettük érdeklődését, nézze meg a további médium cikkeimet.