Three.js: ์ง€์—ญ ๋”ฐ๊ธฐ

์— ๋งŒ๋“  2012๋…„ 04์›” 27์ผ  ยท  5์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: mrdoob/three.js

์•ˆ๋…•ํ•˜์„ธ์š”, ์ฒซ๋ฒˆ์งธ๋กœ ์ œ๊ฐ€ ์ผ๋ฐ˜์ ์ธ ์งˆ๋ฌธ์„ ํ•  ๊ณณ์ด ์•„๋‹ˆ๋ผ๋ฉด ์ •๋ง ์ฃ„์†กํ•ฉ๋‹ˆ๋‹ค.

์—ฌ๋Ÿฌ 3D ๊ฐœ์ฒด๋ฅผ "์˜์—ญ ์„ ํƒ"ํ•˜๋Š” ์˜ˆ๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ? ๋งˆ์šฐ์Šค๋กœ ํ”„๋ ˆ์ž„์„ ๋“œ๋ž˜๊ทธํ•˜๊ณ  ๊ทธ ์•ˆ์˜ ๋ชจ๋“  ๊ฐœ์ฒด๋ฅผ ์„ ํƒํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๊นŒ?

๋‚˜๋Š” THREE.Ray ๊ฐ์ฒด๋ฅผ ๊ฐ€์ง€๊ณ  ๋†€์•˜๊ณ  intersect (s) ๋ฉ”์„œ๋“œ์ด์ง€๋งŒ ๋ชจ๋“  ๊ต์ฐจ์ ์„ ์ฐพ๊ธฐ ์œ„ํ•ด ๋ชจ๋“  XY ์ขŒํ‘œ๋ฅผ ๋ฐ˜๋ณตํ•˜๊ณ  ์ถ”์ ํ•˜๋Š” ๊ฒƒ์ด ๋ถ€์กฑํ•ฉ๋‹ˆ๋‹ค.

๋‚˜๋Š” ์›น๊ณผ github ๋ฐ ์Šคํƒ ์˜ค๋ฒ„ํ”Œ๋กœ๋ฅผ ํ†ตํ•ด ๋ชจ๋“  ๊ฒƒ์„ ์‚ดํŽด ๋ณด์•˜์ง€๋งŒ ๋„์›€์ด๋˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค.
์–ด๋–ค ๋„์›€์ด๋ผ๋„ ๋Œ€๋‹จํžˆ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

๋ฏธ๋ฆฌ ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค
์ค„์ธ 

Question

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

ํ™”๋ฉด์˜ ์ง์‚ฌ๊ฐํ˜•์„ ๊ธฐ๋ฐ˜์œผ๋กœ ๊ตฌ์„ฑ๋œ subfrustum์„ ์‚ฌ์šฉํ•˜์—ฌ ์˜์—ญ ์„ ํƒ์— three.js ์„ ํƒ ์˜ˆ์ œ๋ฅผ ์ ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค . ํด๋ฆญํ•˜๊ณ  ๋“œ๋ž˜๊ทธํ•˜์—ฌ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค. ๋ชจ๋“  3D ๊ฐœ์ฒด๋ฅผ 2D ํ™”๋ฉด ๊ณต๊ฐ„์— ํˆฌ์‚ฌ ํ•œ ๋‹ค์Œ ํ™”๋ฉด ์‚ฌ๊ฐํ˜•๊ณผ ๊ต์ฐจํ•˜๋Š” ๊ฒƒ๋งŒ ํผ โ€‹โ€‹์ •ํ™•ํ•˜์ง€๋Š” ์•Š์ง€๋งŒ ์ œ๋Œ€๋กœ ์ž‘๋™ํ•˜๊ณ  ๋” ๋น ๋ฅด๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

์Šคํƒ ์˜ค๋ฒ„ํ”Œ๋กœ ๊ด€๋ จ ์งˆ๋ฌธ :
THREE.js 2d ์ •์‚ฌ๊ฐํ˜•๊ณผ 3d obj์˜ ๊ต์ฐจ์ ์„ ๊ฐ์ง€ํ•˜๋Š” ๋ฐฉ๋ฒ•
THREE.js ์˜์—ญ์˜ ๋ชจ๋“  ๊ฐœ์ฒด๋ฅผ ์„ ํƒํ•˜๋Š” ๋ฐฉ๋ฒ•

๋ชจ๋“  5 ๋Œ“๊ธ€

์žฅ๋ฉด์—์„œ ๊ฐœ์ฒด๋ฅผ ์ถ”์  ํ•œ ๋‹ค์Œ ๋ชจ๋“  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 ์˜์—ญ์˜ ๋ชจ๋“  ๊ฐœ์ฒด๋ฅผ ์„ ํƒํ•˜๋Š” ๋ฐฉ๋ฒ•

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰