wam
w__am ๊ฐœ๋ฐœ๋…ธํŠธ
wam
  • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ (165)
    • CS ์ง€์‹ (10)
      • ์ž๋ฃŒ๊ตฌ์กฐ (0)
      • ์•Œ๊ณ ๋ฆฌ์ฆ˜ (0)
      • ์ปดํ“จํ„ฐ ๊ตฌ์กฐ (0)
      • ์šด์˜์ฒด์ œ (0)
      • ๋„คํŠธ์›Œํฌ (7)
      • ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค (0)
      • ๋””์ž์ธ ํŒจํ„ด (3)
    • Frontend (131)
      • Three.js (64)
      • NPM (1)
      • Nest.js (19)
      • React (10)
      • Apollo (7)
      • TypeScript (2)
      • JavaScript (12)
      • HTML, CSS (1)
      • Jest (3)
      • E2E (5)
      • Cypress (7)
    • Database (12)
      • TypeORM (12)
    • IT ์ง€์‹ (8)
      • ํด๋ผ์šฐ๋“œ ์„œ๋น„์Šค (3)
      • ๋„คํŠธ์›Œํฌ (1)
      • ๋ฐ์ดํ„ฐ ํฌ๋งท (2)
      • ๊ธฐํƒ€ (2)
    • IT Book (2)
    • ์œ ์šฉํ•œ ์‚ฌ์ดํŠธ (1)

๋ธ”๋กœ๊ทธ ๋ฉ”๋‰ด

  • ํ™ˆ
  • ํƒœ๊ทธ
  • ๋ฐฉ๋ช…๋ก
  • ๐Ÿฑ Github

์ธ๊ธฐ ๊ธ€

ํƒœ๊ทธ

  • ๋ฐ์ดํ„ฐ ํฌ๋งท
  • ์‚ผ๊ฐํ•จ์ˆ˜
  • ๋””์ž์ธ ํŒจํ„ด
  • Interface
  • axeshelper
  • API
  • mapped types
  • ์Šค์ฝ”ํ”„
  • ํ•จ์ˆ˜ ๋ฆฌํ„ฐ๋Ÿด
  • ํ•จ์ˆ˜์˜ ๋ฒ”์œ„
  • ํ•จ์ˆ˜ ํ‘œํ˜„์‹
  • ์ดˆ๊ธฐ ํ™˜๊ฒฝ์„ค์ •
  • gridhelper
  • type-graphql
  • ์›ํ˜•์ ์ธ ์›€์ง์ž„
  • ๋ Œ๋”๋ง ์„ฑ๋Šฅ ์ตœ์ ํ™”
  • getdelta()
  • math.sin()
  • isabstract
  • e.preventdefault()
  • Decorators
  • getelapsedtime()
  • joi ์—๋Ÿฌ
  • threejs ๊ฐœ๋ฐœ ํ•  ๋•Œ ๋„์›€์„ ์ค„ ์ˆ˜ ์žˆ๋Š” ์œ ํ‹ธ๋ฆฌํ‹ฐ
  • three.js ๊ตฌ์„ฑ ์š”์†Œ
  • ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ
  • math.cos()
  • react ์„ฑ๋Šฅ ์ตœ์ ํ™”
  • reactive variables
  • ์˜คํ”„-ํ”„๋ ˆ๋ฏธ์Šค(off-premise) ๋ฐฉ์‹

์ตœ๊ทผ ๊ธ€

๊ด€๋ฆฌ์ž

๊ธ€์“ฐ๊ธฐ / ์Šคํ‚จํŽธ์ง‘ / ๊ด€๋ฆฌ์žํŽ˜์ด์ง€
hELLO ยท Designed By ์ •์ƒ์šฐ.
wam
Frontend/Three.js

three.js๋ž€?

three.js๋ž€?
Frontend/Three.js

three.js๋ž€?

2024. 4. 20. 21:36

 

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

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

 

 

ThreeJS

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

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

 

 

WebGL

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

 

 

์ €์ž‘์žํ‘œ์‹œ ๋ณ€๊ฒฝ๊ธˆ์ง€ (์ƒˆ์ฐฝ์—ด๋ฆผ)

'Frontend > Three.js' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

์ง๊ต ์นด๋ฉ”๋ผ(Orthographic Camera)  (0) 2024.04.20
๊ธฐ๋ณธ์žฅ๋ฉด ๋งŒ๋“ค๊ธฐ - Mesh  (0) 2024.04.20
๊ธฐ๋ณธ์žฅ๋ฉด ๋งŒ๋“ค๊ธฐ - Camera  (0) 2024.04.20
๊ธฐ๋ณธ ์žฅ๋ฉด ๋งŒ๋“ค๊ธฐ - Renderer  (0) 2024.04.20
three.js ๊ธฐ๋ณธ ์žฅ๋ฉด ๊ตฌ์„ฑ์š”์†Œ  (0) 2024.04.20
  • ThreeJS
  • WebGL
'Frontend/Three.js' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
  • ๊ธฐ๋ณธ์žฅ๋ฉด ๋งŒ๋“ค๊ธฐ - Mesh
  • ๊ธฐ๋ณธ์žฅ๋ฉด ๋งŒ๋“ค๊ธฐ - Camera
  • ๊ธฐ๋ณธ ์žฅ๋ฉด ๋งŒ๋“ค๊ธฐ - Renderer
  • three.js ๊ธฐ๋ณธ ์žฅ๋ฉด ๊ตฌ์„ฑ์š”์†Œ
wam
wam

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”

๊ฐœ์ธ์ •๋ณด

  • ํ‹ฐ์Šคํ† ๋ฆฌ ํ™ˆ
  • ํฌ๋Ÿผ
  • ๋กœ๊ทธ์ธ

๋‹จ์ถ•ํ‚ค

๋‚ด ๋ธ”๋กœ๊ทธ

๋‚ด ๋ธ”๋กœ๊ทธ - ๊ด€๋ฆฌ์ž ํ™ˆ ์ „ํ™˜
Q
Q
์ƒˆ ๊ธ€ ์“ฐ๊ธฐ
W
W

๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๊ธ€

๊ธ€ ์ˆ˜์ • (๊ถŒํ•œ ์žˆ๋Š” ๊ฒฝ์šฐ)
E
E
๋Œ“๊ธ€ ์˜์—ญ์œผ๋กœ ์ด๋™
C
C

๋ชจ๋“  ์˜์—ญ

์ด ํŽ˜์ด์ง€์˜ URL ๋ณต์‚ฌ
S
S
๋งจ ์œ„๋กœ ์ด๋™
T
T
ํ‹ฐ์Šคํ† ๋ฆฌ ํ™ˆ ์ด๋™
H
H
๋‹จ์ถ•ํ‚ค ์•ˆ๋‚ด
Shift + /
โ‡ง + /

* ๋‹จ์ถ•ํ‚ค๋Š” ํ•œ๊ธ€/์˜๋ฌธ ๋Œ€์†Œ๋ฌธ์ž๋กœ ์ด์šฉ ๊ฐ€๋Šฅํ•˜๋ฉฐ, ํ‹ฐ์Šคํ† ๋ฆฌ ๊ธฐ๋ณธ ๋„๋ฉ”์ธ์—์„œ๋งŒ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.