์๋ ํ์ธ์, ์ฒซ๋ฒ์งธ๋ก ์ ๊ฐ ์ผ๋ฐ์ ์ธ ์ง๋ฌธ์ ํ ๊ณณ์ด ์๋๋ผ๋ฉด ์ ๋ง ์ฃ์กํฉ๋๋ค.
์ฌ๋ฌ 3D ๊ฐ์ฒด๋ฅผ "์์ญ ์ ํ"ํ๋ ์๊ฐ ์์ต๋๊น? ๋ง์ฐ์ค๋ก ํ๋ ์์ ๋๋๊ทธํ๊ณ ๊ทธ ์์ ๋ชจ๋ ๊ฐ์ฒด๋ฅผ ์ ํํ๋ ๊ฒ์ ๋๊น?
๋๋ THREE.Ray ๊ฐ์ฒด๋ฅผ ๊ฐ์ง๊ณ ๋์๊ณ intersect (s) ๋ฉ์๋์ด์ง๋ง ๋ชจ๋ ๊ต์ฐจ์ ์ ์ฐพ๊ธฐ ์ํด ๋ชจ๋ XY ์ขํ๋ฅผ ๋ฐ๋ณตํ๊ณ ์ถ์ ํ๋ ๊ฒ์ด ๋ถ์กฑํฉ๋๋ค.
๋๋ ์น๊ณผ github ๋ฐ ์คํ ์ค๋ฒํ๋ก๋ฅผ ํตํด ๋ชจ๋ ๊ฒ์ ์ดํด ๋ณด์์ง๋ง ๋์์ด๋์ง ์์์ต๋๋ค.
์ด๋ค ๋์์ด๋ผ๋ ๋๋จํ ๊ฐ์ฌํฉ๋๋ค.
๋ฏธ๋ฆฌ ๊ฐ์ฌ๋๋ฆฝ๋๋ค
์ค์ธ
์ฅ๋ฉด์์ ๊ฐ์ฒด๋ฅผ ์ถ์ ํ ๋ค์ ๋ชจ๋ XY ์ขํ๋ฅผ ๋ฐ๋ณตํ๋ ๊ฒ์ด ์ข์ต๋๋ค. ์ด ๊ฒฝ์ฐ THREE.Ray๋ฅผ ์ฌ์ฉํ ์ ์์ผ๋ฉฐ ๊ฐ์ฒด๊ฐ ํ๋ ์ ๋ด๋ถ์ ์๋์ง ํ์ธํ๊ธฐ ์ํด ์ฌ์ฉ์ ์ง์ ๋ ผ๋ฆฌ๋ฅผ ๊ตฌํํด์ผํฉ๋๋ค. ์ด ์ ๊ทผ ๋ฐฉ์์ด ์ฝ๋ ์๋๋ฅผ ํฌ๊ฒ ๋์ผ ๊ฒ์ด๋ผ๊ณ ๋ฏฟ์ต๋๋ค.
ํ , ์ด๊ฒ์ ํฅ๋ฏธ๋ก์ด ๋ฌธ์ ์ ๋๋ค.
ํ๋ฉด์ ์ง์ฌ๊ฐํ์ด ์นด๋ฉ๋ผ์ ์ผ๋ถ ์ ๋์ฒด์ ์ผ์นํด์ผํ๋ค๊ณ ์๊ฐํฉ๋๋ค. ์ด ์ ๋์ฒด์ ๋ํ ํ๋ ฌ์ ๊ตฌ์ฑ ํ ์ ์๋ค๋ฉด ์ ๋์ฒด ์ปฌ๋ง์ ๋ํด ์ํํ๋ ๊ฒ๊ณผ ๋์ผํ ๊ฒ์ฌ๋ฅผ ์๋ ํ ์ ์์ต๋๋ค.
์, ๋ง์ด๋ฉ๋๋ค.
๋๋ 3D ์ขํ ๋ ๋ณต์กํ ํ๋ ฌ์ ์ข์ํ์ง ์์ต๋๋ค.
์ฌ๊ฐํ ์ ์ (๋ง์ฐ์ค ๋๋๊ทธ)๊ณผ ๊ฐ๊น์ด ์๊ฑฐ๋ฆฌ ์ง์ ์ Matrix4.makeFrustum ๋ฉ์๋์ ์ ๋ฌํ์ฌ THREE.Matrix4๋ฅผ ์ ์ํ๋ฉด.
๊ทธ๋ฐ ๋ค์ Matrix4๋ฅผ Frustum.setFromMatrix ๋ฉ์๋์ ์ ๋ฌํ์ฌ THREE.Frustum์ ๋ง๋ค ์ ์์ต๋๊น?
๊ทธ๋ฐ ๋ค์ Frustum.contains ๋ฉ์๋๋ฅผ ์ฌ์ฉํ์ฌ ๊ฐ์ฒด๊ฐ ๋ด๋ถ์ ์๋์ง ๊ฐ์งํฉ๋๊น?
์ผํ๋ ์ง์ฅ์ ํฌ๋ง์ด์๋ ๊ฒ์ฒ๋ผ ๋ค๋ฆฌ๋์?
๋ง์ฐ์ค ์ขํ๊ฐ 3D ์ธ๊ณ ์ขํ์ ๊ด๋ จ์ด ์์ต๋๊น? ์์ ๋ง์ฐ์ค ์์น๋ ๋นํ๊ธฐ ๊ทผ์ฒ์ ์นด๋ฉ๋ผ์ ์๋์ ์ธ ๊ฒ์ ๋๊น?
๋ด๊ฐ n00b ์ธ ๊ฒฝ์ฐ ๋ฏธ์ํ์ง๋ง ์ด๊ฒ์ ๋ํ ๋ต๋ณ์ด ํ์ํฉ๋๋ค.
๋ง์ฐ์ค ์ขํ๋ฅผ 3D ์ธ๊ณ์ ํฌ์ํด์ผํฉ๋๋ค. ์ด ์๋ฅผ ์ดํด๋ณด์ญ์์ค.
http://mrdoob.github.com/three.js/examples/webgl_interactive_cubes.html
ํ๋ฉด์ ์ง์ฌ๊ฐํ์ ๊ธฐ๋ฐ์ผ๋ก ๊ตฌ์ฑ๋ subfrustum์ ์ฌ์ฉํ์ฌ ์์ญ ์ ํ์ three.js ์ ํ ์์ ๋ฅผ ์ ์ฉํ์ต๋๋ค . ํด๋ฆญํ๊ณ ๋๋๊ทธํ์ฌ ์ ํํฉ๋๋ค. ๋ชจ๋ 3D ๊ฐ์ฒด๋ฅผ 2D ํ๋ฉด ๊ณต๊ฐ์ ํฌ์ฌ ํ ๋ค์ ํ๋ฉด ์ฌ๊ฐํ๊ณผ ๊ต์ฐจํ๋ ๊ฒ๋ง ํผ โโ์ ํํ์ง๋ ์์ง๋ง ์ ๋๋ก ์๋ํ๊ณ ๋ ๋น ๋ฅด๋ค๊ณ ์๊ฐํฉ๋๋ค.
์คํ ์ค๋ฒํ๋ก ๊ด๋ จ ์ง๋ฌธ :
THREE.js 2d ์ ์ฌ๊ฐํ๊ณผ 3d obj์ ๊ต์ฐจ์ ์ ๊ฐ์งํ๋ ๋ฐฉ๋ฒ
THREE.js ์์ญ์ ๋ชจ๋ ๊ฐ์ฒด๋ฅผ ์ ํํ๋ ๋ฐฉ๋ฒ
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
ํ๋ฉด์ ์ง์ฌ๊ฐํ์ ๊ธฐ๋ฐ์ผ๋ก ๊ตฌ์ฑ๋ subfrustum์ ์ฌ์ฉํ์ฌ ์์ญ ์ ํ์ three.js ์ ํ ์์ ๋ฅผ ์ ์ฉํ์ต๋๋ค . ํด๋ฆญํ๊ณ ๋๋๊ทธํ์ฌ ์ ํํฉ๋๋ค. ๋ชจ๋ 3D ๊ฐ์ฒด๋ฅผ 2D ํ๋ฉด ๊ณต๊ฐ์ ํฌ์ฌ ํ ๋ค์ ํ๋ฉด ์ฌ๊ฐํ๊ณผ ๊ต์ฐจํ๋ ๊ฒ๋ง ํผ โโ์ ํํ์ง๋ ์์ง๋ง ์ ๋๋ก ์๋ํ๊ณ ๋ ๋น ๋ฅด๋ค๊ณ ์๊ฐํฉ๋๋ค.
์คํ ์ค๋ฒํ๋ก ๊ด๋ จ ์ง๋ฌธ :
THREE.js 2d ์ ์ฌ๊ฐํ๊ณผ 3d obj์ ๊ต์ฐจ์ ์ ๊ฐ์งํ๋ ๋ฐฉ๋ฒ
THREE.js ์์ญ์ ๋ชจ๋ ๊ฐ์ฒด๋ฅผ ์ ํํ๋ ๋ฐฉ๋ฒ