Three.js๋ ๋ธ๋ผ์ฐ์ ์์ 3D ๊ทธ๋ํฝ์ ๋ง๋๋ ๋ฐ ์ฌ์ฉ๋๋ ๊ฐ๋ ฅํ๊ณ ๊ฐ๋ฒผ์ด JavaScript ๋ผ์ด๋ธ๋ฌ๋ฆฌ์
๋๋ค. WebGL์ ์ง์ ์ฌ์ฉํ๋ ๋ณต์ก์ฑ์ ์ถ์ํํ์ฌ ์น์์ ๋ํํ 3D ์ฅ๋ฉด๊ณผ ์ ๋๋ฉ์ด์
์ ๋ ์ฝ๊ฒ ๊ตฌ์ถํ ์ ์์ต๋๋ค. Three.js๋ 3D ๊ฐ์ฒด ๋ ๋๋ง, ํ
์ค์ฒ ์ ์ฉ, ์กฐ๋ช
๋ฐ ์นด๋ฉ๋ผ ๊ด๋ฆฌ๋ฅผ ์ํ ์ง๊ด์ ์ธ API๋ฅผ ์ ๊ณตํ์ฌ 3D ์ฝํ
์ธ ์ ์ ํ๋ก์ธ์ค๋ฅผ ๊ฐ์ํํฉ๋๋ค. ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ๋ด๋ถ์ ์ผ๋ก WebGL์ ์ฌ์ฉํ์ฌ ๊ฐ๋ฐ์๊ฐ ์ธ๋ถ ํ๋ฌ๊ทธ์ธ ์์ด ์น ๋ธ๋ผ์ฐ์ ์์ ์ง์ ์๋ํ๋ ์๊ฐ์ ์ผ๋ก ํ๋ถํ 3D ๊ฒฝํ์ ๋ง๋ค ์ ์๋๋ก ํฉ๋๋ค.
Three.js๋ ๊ณ ๊ธ ์กฐ๋ช
๋ฐ ๊ทธ๋ฆผ์ ๊ธฐ๋ฅ์ ์ง์ํ๋ฏ๋ก ๊ฐ๋ฐ์๋ ์ฌ์ค์ ์ด๊ณ ์๊ฐ์ ์ผ๋ก ๋๋ผ์ด ํจ๊ณผ๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค. ๋ํ ๊ธฐ๋ณธ ์์์์ ๊ณ ๊ธ ์
ฐ์ด๋์ ์ด๋ฅด๊ธฐ๊น์ง ๋ค์ํ ์ฌ์ง๊ณผ ํ
์ค์ฒ๋ฅผ ์ง์ํ์ฌ ์ค์ ์ ๊ฐ์ 3D ๋ชจ๋ธ ๋ฐ ํ๊ฒฝ์ ๋ง๋ค ์ ์์ต๋๋ค. ๋ผ์ด๋ธ๋ฌ๋ฆฌ์๋ ์์ธํ ์ค๋ช
์์ ์๋ง์ ์์ ๊ฐ ํจ๊ป ์ ๊ณต๋๋ฏ๋ก ๋ ์ฝ๊ฒ ์์ํ๊ณ ๊ธฐ๋ฅ์ ํ์ํ ์ ์์ต๋๋ค.
Three.js ์ฌ์ฉํ๋ ๊ธฐ๋ณธ ์๋ ์ฅ๋ฉด, ์นด๋ฉ๋ผ ๋ฐ ๋ ๋๋ฌ๋ฅผ ์ค์ ํ ๋ค์ ํ๋ธ์ ํ์๊ณผ ์ฌ์ง์ ์ ์ํ๋ ๊ฒ๊ณผ ๊ด๋ จ๋ ํ์ ํ๋ธ๋ฅผ ๋ง๋๋ ๊ฒ์
๋๋ค. ๊ทธ๋ฐ ๋ค์ ํ๋ธ๋ฅผ ์ฅ๋ฉด์ ์ถ๊ฐํ๊ณ requestAnimationFrame ๋ฃจํ๋ฅผ ์ฌ์ฉํ์ฌ ์ ๋๋ฉ์ด์
ํ ์ ์์ต๋๋ค. Three.js๋ ๋๋ผ์ด ๋น์ฃผ์ผ, ์ค์๊ฐ ์ํธ ์์ฉ, ํ๋ถํ ๋๊ตฌ ๋ฐ ํตํฉ ์์ฝ์์คํ
์ ๋ง๋ค ์ ์๋ ๊ธฐ๋ฅ์ผ๋ก ์ธํด ์น์์ 3D ์ ํ๋ฆฌ์ผ์ด์
์ ๋ง๋๋ ๋ฐ ๋๋ฆฌ ์ฌ์ฉ๋ฉ๋๋ค.
Three.js๋ ๊ฒ์, ๋ฐ์ดํฐ ์๊ฐํ ๋ฐ ์์ ์ ๋์์ธ์ ํฌํจํ ๊ด๋ฒ์ํ ์์ฉ ํ๋ก๊ทธ๋จ์ ์ฌ์ฉํ ์ ์์ต๋๋ค. ์ค์๊ฐ ์ํธ ์์ฉ ๊ธฐ๋ฅ์ ํตํด ์ฌ์ฉ์๋ 3D ๊ฐ์ฒด์ ์ค์๊ฐ์ผ๋ก ์ํธ ์์ฉํ ์ ์์ด ์ญ๋์ ์ธ ์น ๊ฒฝํ์ ์ํ ๋ฌดํํ ๊ฐ๋ฅ์ฑ์ ์ ๊ณตํฉ๋๋ค. ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์์ฝ์์คํ
์๋ ๋ฌผ๋ฆฌ ์์ง, ์
์ ์์คํ
๋ฐ ๋ชจ๋ธ ๋ก๋์ ๊ฐ์ ๋ค์ํ ๋๊ตฌ์ ํตํฉ์ด ํฌํจ๋์ด ์์ด ํ์ฅ์ฑ์ด ๋ฐ์ด๋ฉ๋๋ค. ์ ๋ฐ์ ์ผ๋ก Three.js๋ ์น์์ ๋ชฐ์
ํ 3D ํ๊ฒฝ์ ๋ง๋ค๊ธฐ ์ํ ๊ฐ๋ ฅํ ๋๊ตฌ์
๋๋ค.
dev.to
๐ Three.js: A JavaScript 3D Library ๐ฎ
Create attached notes ...
