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 a useFrame-t a forgatás végrehajtására (16–22. sorok). Meghatároz egy mesh-t (25-35. sorok), amely egy dobozt/kockát (26. sor) tartalmaz, ahol a width, height és depth [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 a side anyag értéke THREE.FrontSide.
  • A Box a Canvas-en (41-48. sorok) jelenik meg, amely három összetevőt jelenít meg. A Canvas a camera 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éke THREE.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 (a z 8-on túl van a 23-as sorban), akkor előre mozog és a kockában halad. Ha túl közel van (a z 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éke THREE.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 az useFrame-t a forgatás végrehajtására (9–15. sorok). Meghatároz egy mesh-et (18–21. sor), amely egy gömböt (19. sor) tartalmaz, ahol a radius, widthSegments és heightSegments [3, 64, 32]-ként van definiálva.
  • Az anyag (20. sor) meshBasicMaterial értékkel van konfigurálva, ahol a side értéke THREE.FrontSide.
  • A Sphere a Canvas-on (27-34. sorok) jelenik meg, amely három összetevőt jelenít meg. A Canvas a camera 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éke THREE.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 (a z 8-on túl van a 23-as sorban), akkor előre mozog és a gömbben halad. Ha túl közel van (a z 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éke THREE.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, a mapName és a side.
  • A 43-as sorban az első Sphere a Canvas-be kerül, textures/map2.png pedig az elülső oldalon.
  • A 44. sorban a második Sphere a Canvas-be kerül, a textures/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.