Frontend/Three.js

three.js๋ž€?

wam 2024. 4. 20. 21:36

 

๐Ÿ’ก 3D ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜

- ๋ฌผ๋ฆฌ์—”์ง„์œผ๋กœ ์‚ฌ์‹ค์ ์ธ ์›€์ง์ž„ ๋งŒ๋“ค๊ธฐ
- ์  (point)์˜ ์ขŒํ‘œ๋ฅผ ํ™œ์šฉํ•ด ํŒŒํ‹ฐํด ํšจ๊ณผ ๋งŒ๋“ค๊ธฐ
- ์Šคํฌ๋กค์— ๋”ฐ๋ผ ๋ฐ˜์‘ํ•˜๋Š” 3D ๋น„์ฃผ์–ผ์ด ์ ์šฉ๋œ ํŽ˜์ด์ง€ ๋งŒ๋“ค๊ธฐ 

 

 

ThreeJS

๊ณต์‹ ์‚ฌ์ดํŠธ, 1๋ถ„ ์ฝ”๋”ฉ ์‚ฌ์ดํŠธ

  • ์›น์—์„œ 3D๋ฅผ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ
  • ์›น ๋ธŒ๋ผ์šฐ์ €์—์„œ 3์ฐจ์› ์ปดํ“จํ„ฐ ๊ทธ๋ž˜ํ”ฝ์Šค ์• ๋‹ˆ๋ฉ”์ด์…˜ ์‘์šฉ์„ ๋งŒ๋“ค๊ณ  ํ‘œํ˜„ํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ๋˜๋Š” JS ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ
  • WebGL์„ ์‰ฝ๊ณ  ๊ฐ„ํŽธํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ
  • ๋ชจ๋“ˆ ๋ฐฉ์‹์œผ๋กœ ๊ฐœ๋ฐœํ•˜๋Š” ๊ฒƒ์€ ๊ถŒ์žฅ.

 

 

WebGL

  • ์›น ๊ธฐ๋ฐ˜์˜ ๊ทธ๋ž˜ํ”ฝ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ
  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๋ฅผ ํ†ตํ•ด ์‚ฌ์šฉ ๊ฐ€๋Šฅ
  • ํ˜ธํ™˜์„ฑ์ด ์žˆ๋Š” ์›น ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ ํ•œ 3D ๊ทธ๋ž˜ํ”ฝ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ์ œ๊ณต
  • 2D, 3D ๊ทธ๋ž˜ํ”ฝ์„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Œ. (ํŠนํžˆ 3D ๊ทธ๋ž˜ํ”ฝ์— ๋งŽ์ด ์ด์šฉ)
  • GPU๋ฅผ ํ†ตํ•ด ๊ทธ๋ฆผ์„ ๊ทธ๋ฆฌ๊ธฐ ๋•Œ๋ฌธ์— ์„ฑ๋Šฅ์ด ์ข‹์Œ.