Creating an interactive portfolio with R3F (React + Three.js / Typescript)

React and Three.js in one go! Learn everything from Vectors to GSAP, the basics of interactive web development. Plus, tips and tricks for integrating three examples into a single portfolio!

(5.0) 5 reviews

80 learners

Level Basic

Course period Unlimited

Interactive Web
Interactive Web
Three.js
Three.js
TypeScript
TypeScript
React
React
webgl
webgl
Interactive Web
Interactive Web
Three.js
Three.js
TypeScript
TypeScript
React
React
webgl
webgl

What you will gain after the course

  • Learn React and Three.js at once! Learn R3F (react-three/fiber)

  • Learn about the concept and operations of Vectors, which are the foundation of interactive web.

  • A class where you understand and apply various examples to create your own work.

  • From the basic concepts of vectors to their application, and even creating your own portfolio through advanced courses!

  • Learn about GSAP, a web interactive library.

  • A class where you can learn and improve your skills by coding together, stitch by stitch.

  • A lecture where you can experience and practice Creative Coding / Interactive Web to become a noticeable developer.

  • Learn the R3F stack that you can't find anywhere else and implement 3D interactive web more easily and fun.

  • Debugging and Refactoring Methods from a Current Development Team Lead!

  • Learn everything from project structure to practical tips from a current 10-year veteran developer!


๋‹น์‹ ์€ ์›น ์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“œ๋Š” ์ผ์ด ์ฆ๊ฑฐ์šฐ์‹ ๊ฐ€์š”?

์›น ์‚ฌ์ดํŠธ ๊ฒŒ์‹œํŒ์„ ๋งŒ๋“ค๊ณ  ํŒ์—…์ฐฝ์„ ๊ฐœ๋ฐœํ•˜๋Š” ์ผ ์ง€๊ฒน์ง€ ์•Š์œผ์‹ ๊ฐ€์š”?

๋‹น์‹ ์€ ๋‚จ๋“ค๊ณผ ์ฐจ๋ณ„ํ™” ๋œ ์›น ํ”„๋กœ์ ํŠธ๋ฅผ ๋งŒ๋“ค๊ณ  ์‹ถ์œผ์‹ ๊ฐ€์š”?

๋‹น์‹  ํšŒ์‚ฌ์—์„œ ํ™”๋ คํ•œ ๋ˆˆ์— ๋„๋Š”, ๋‚จ๋“ค๊ณผ ๋‹ค๋ฅธ ์›น ์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ค์–ด๋ณด์ž๊ณ  ํ•˜๋‚˜์š”?

์ด ์›น์‚ฌ์ดํŠธ๋Š” ์–ด๋–ป๊ฒŒ ๋งŒ๋“ค์—ˆ์ง€? WOWํ•œ ์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ค์–ด ๋ณด๊ณ  ์‹ถ๋‚˜์š”?


์ด๋ฒˆ ๊ฐ•์˜๋Š”

์ฝ”๋”ฉ์œผ๋กœ ๊ธฐ๋Šฅ์ ์ธ ๊ฒƒ์„ ๋งŒ๋“ค๊ธฐ ๋ณด๋‹ค๋Š” ํ‘œํ˜„์ ์ธ ๊ฒƒ์— ์ง‘์ค‘ํ•˜์—ฌ ๋‹ค์–‘ํ•œ ํ‘œํ˜„ ๋ฐฉ๋ฒ•๋“ค์„ ์—ฐ๊ตฌํ•˜๊ณ 

๊ทธ ๊ณผ์ •์—์„œ ์˜ˆ์ƒ์น˜ ๋ชปํ•œ ๊ฒฐ๊ณผ์˜ ๋ฐœ๊ฒฌ, ๋ณ€ํ˜•์„ ๋ชฉํ‘œ๋กœ ํ•˜๋Š” Creative Coding์„ ๋‹ค๋ฃจ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

๊ทธ ์ค‘์—์„œ๋„ Interactive Coding์˜ ๊ฐ€์žฅ ํ•ต์‹ฌ์ธ ๋ฒกํ„ฐ(Vector)์— ๋Œ€ํ•ด ๋ฐฐ์šธ ์ˆ˜ ์žˆ๊ณ 

๊ทธ๊ฒƒ์„ ํ™œ์šฉํ•˜์—ฌ ์ฐจ๋ณ„ํ™”๋œ ํฌํŠธํด๋ฆฌ์˜ค๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


๊ฐ•์˜ ์ฃผ์ œ ๐Ÿ“–

  • ์‚ฌ์šฉ๊ธฐ์ˆ  : frontend DOM ( React, gsap ) / webgl ( Three.js )


๋‹น์‹ ์€ ์ด ๊ฐ•์˜์—์„œ๋Š” frontend์—์„œ ๊ฐ€์žฅ ๋งŽ์ด ์“ฐ์ด๋Š” React ํ”„๋ ˆ์ž„์›Œํฌ์™€

Web Graphic(webgl)์—์„œ ๊ฐ€์žฅ ๋งŽ์ด ์“ฐ์ด๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ธ Three.js๋ฅผ

ํ•œ๊บผ๋ฒˆ์— ๋‹ค๋ฃฐ ์ˆ˜ ์žˆ๋Š” R3F(React Three Fiber)๋ฅผ ๋ฐฐ์šฐ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

๋‹น์‹ ์€ ํ™”๋ คํ•œ ์ธํ„ฐ๋ ‰ํ‹ฐ๋ธŒ ์›น + Creative Coding์˜ ๊ฐ€์žฅ ์ค‘์š”ํ•œ ๊ฐœ๋…์ธ ๋ฒกํ„ฐ(Vector)์— ๋Œ€ํ•ด

์ง‘์ค‘์ ์œผ๋กœ ๋ฐฐ์šฐ๊ฒŒ ๋  ๊ฒƒ์ด๊ณ , ๋ฒกํ„ฐ(Vector)๋ฅผ ์ดํ•ดํ•˜๊ณ  ์ž˜ ํ™œ์šฉํ•œ๋‹ค๋ฉด

๋‹น์‹ ์ด ์›ํ•˜๋Š” ์ธํ„ฐ๋ ‰ํ‹ฐ๋ธŒํ•œ ์›€์ง์ž„์„ ๋ชจ๋‘ ๋‹ค ๋งŒ๋“œ์‹ค ์ˆ˜ ์žˆ์„ ๊ฒƒ ์ž…๋‹ˆ๋‹ค.


์–ด๋””์—์„œ๋„ ์ฐพ์„ ์ˆ˜ ์—†๋Š” R3F ์Šคํƒ ํ•™์Šต์œผ๋กœ

๋” ์‰ฝ๊ณ  ์žฌ๋ฏธ์žˆ๊ฒŒ ์ธํ„ฐ๋ ‰ํ‹ฐ๋ธŒ ํฌํŠธํด๋ฆฌ์˜ค ์›น์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ค์–ด ๋ด…๋‹ˆ๋‹ค.

์›น 3D ์ธํ„ฐ๋ ‰ํ‹ฐ๋ธŒ ์ „๋ฌธ, ํ˜„์ง 10๋…„์ฐจ ์›น ๊ทธ๋ž˜ํ”ฝ ์—”์ง€๋‹ˆ์–ด(Web Graphic Engineer) / ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž(Frontend Developer)์˜ ๊ฒฝํ—˜๊ณผ ๋…ธํ•˜์šฐ๋ฅผ ๋ชจ๋‘ ๋‹ด์•˜์Šต๋‹ˆ๋‹ค.


๊ฐ•์˜ ํŠน์ง• โœจ

React์™€ Three.js ๋ฅผ ํ•œ๋ฒˆ์—! React Three Fiber(R3F)!

Interactive Coding์˜ ๊ธฐ์ดˆ์ธ ๋ฒกํ„ฐ(Vector)์˜ ๊ฐœ๋…๋ถ€ํ„ฐ

ํ˜„์—…์— ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋‹ค์–‘ํ•œ ์˜ˆ์ œ์™€ ์ข…ํ•ฉ ํ”„๋กœ์ ํŠธ ๊ทธ๋ฆฌ๊ณ  ์ตœ์ ํ™” ํŒ ๊นŒ์ง€ !

-Javascript ๊ธฐ์ดˆ์— ๋Œ€ํ•ด์„œ ์•Œ๊ณ  ๊ณ„์‹œ๋‹ค๋ฉด ์ˆ˜๊ฐ•์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

-React์— ๋Œ€ํ•œ ๊ธฐ์ดˆ ๊ฐœ๋…์ด ์žˆ์œผ์‹  ๋ถ„์ด๋ฉด ์ข‹์ง€๋งŒ ์—†์–ด๋„ ๊ดœ์ฐฎ์Šต๋‹ˆ๋‹ค.

-๋ฒกํ„ฐ(Vector)์˜ ๊ธฐ์ดˆ ๊ฐœ๋…๋ถ€ํ„ฐ ํ™œ์šฉ, ๊ทธ๋ฆฌ๊ณ  ์‹ฌํ™”๊ณผ์ •์„ ํ†ตํ•œ ํฌํŠธํด๋ฆฌ์˜ค ์ œ์ž‘๊นŒ์ง€!

-์›น 3D๋ฅผ ๋‹ค๋ฃจ์ง€๋งŒ ๊ฐ•์˜์—์„œ๋Š” 2D ์นด๋ฉ”๋ผ(orthographicCamera)๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ž‘์—…ํ•ฉ๋‹ˆ๋‹ค.

-์‹ค๋ฌด์—์„œ ๋ฐ”๋กœ ์‚ฌ์šฉ ํ•  ์ˆ˜ ์žˆ๋„๋ก Typescript๋กœ ๊ฐ•์˜๋ฅผ ์ง„ํ–‰ํ•˜๊ณ  ์˜ˆ์ œ ์ฝ”๋“œ๋ฅผ ๊ณต์œ ํ•ฉ๋‹ˆ๋‹ค.

-๊ฐ ์„น์…˜๋งˆ๋‹ค ์ด๋ก ์œ„์ฃผ์˜ ์ค‘์š”ํ•œ ๊ธฐ์ดˆ ๊ฐœ๋…์„ ์„ค๋ช… (10~25%)

-๊ฐ ์„น์…˜๋งˆ๋‹ค ํ•œ๋•€ ํ•œ๋•€ ๊ฐ™์ด ํ•˜๋Š” ์‹ค์Šต์œ„์ฃผ์˜ ๊ฐ•์˜ (75~90%)


๋‹น์‹ ์€ ์ด๋ฒˆ๊ฐ•์˜๋ฅผ ํ†ตํ•ด์„œ React์™€ Three.js(WebGL)์„ ํ•œ๋ฒˆ์— ๋‹ค๋ฃฐ ์ˆ˜ ์žˆ๋Š” R3F์— ๋Œ€ํ•ด ๋ฐฐ์šธ ์ˆ˜ ์žˆ์Šต

๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋‹น์‹ ์€ Creative Coding์˜ ๊ธฐ์ดˆ์ธ ๋ฒกํ„ฐ(Vector)๊ฐ€ ๋ฌด์—‡์ด๊ณ  ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š”์ง€์—

๋Œ€ํ•ด์„œ ๋ฐฐ์šฐ๊ณ , Vector๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์›€์ง์ด๋Š” 4๊ฐœ์˜ ์˜ˆ์ œ๋ฅผ ๋‹ค๋ฃจ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. Vector์˜ ๊ธฐ์ดˆ๋ฅผ ๋‹ค์ง€๋ฉด ์›ํ•˜๋Š”

๋ชจ๋“  ์›€์ง์ž„์— ๋Œ€ํ•ด ๋งŒ๋“ค ์–ด ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋˜ํ•œ ์ธํ„ฐ๋ ‰ํ‹ฐ๋ธŒ ์›น์˜ ํ•„์ˆ˜์ธ GSAP์— ๋Œ€ํ•ด์„œ ๋ฐฐ์šธ ์ˆ˜ ์žˆ๊ณ  ์Šคํฌ๋กค์„ ํ•˜๋ฉด ํ™”๋ คํ•˜๊ฒŒ ์›€์ง์ด๋Š” 3D ์›น์„

๋งŒ๋“ค ์–ด ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹จ์ˆœํžˆ ์˜ˆ์˜๊ธฐ๋งŒ ํ•œ ํ™”๋ฉด์ด ์•„๋‹ˆ๋ผ, ์‹ค์‹œ๊ฐ„์œผ๋กœ ๋ฐ˜์‘ํ•˜๊ณ  ์›€์ง์ด๋Š” 3D ์˜ค๋ธŒ์ ํŠธ์˜

์• ๋‹ˆ๋ฉ”์ด์…˜์— ๋Œ€ํ•ด ๋ฐฐ์›Œ๋ณด์„ธ์š”! ๊ฐ ๋‹จ๊ณ„๋ณ„ ์•Œ๋งž๋Š” ์‹ค์Šต๊นŒ์ง€ ์ง์ ‘ ๊ฐ™์ด ํ•œ๋•€ ํ•œ๋•€ ์ฝ”๋”ฉํ•˜๋ฉด์„œ ์ตํžˆ๊ณ  ์‹ค๋ ฅ์„

์Œ“์„ ์ˆ˜ ์žˆ๋Š” ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.


์ด ๊ฐ•์˜๋ฅผ ํ†ตํ•ด ๋‹จ์ˆœํ•œ ์ •์  ์›น์—์„œ ๋ฒ—์–ด๋‚˜, ์‹ค์‹œ๊ฐ„ ๋ Œ๋”๋ง์„ ํ™œ์šฉํ•œ ๋™์ ์ด๊ณ  ์ฐฝ์˜์ ์ธ ํ”„๋กœ์ ํŠธ๋ฅผ ๋งŒ๋“ค์–ด

๋ณด์„ธ์š”! ๋‹จ๊ณ„๋ณ„๋กœ ๋”ฐ๋ผ ํ•˜๋‹ค ๋ณด๋ฉด, ์–ด๋А์ƒˆ ์—ฌ๋Ÿฌ๋ถ„์˜ ํ”„๋กœ์ ํŠธ๊ฐ€ ๋งˆ์น˜ ๊ฒŒ์ž„์ฒ˜๋Ÿผ ์‚ด์•„ ์›€์ง์ด๋Š” ๊ฑธ ๋А๋‚„ ์ˆ˜

์žˆ์„ ๊ฑฐ์˜ˆ์š” ! 


์–ด๋””์—์„œ๋„ ์ฐพ์„ ์ˆ˜ ์—†๋Š” R3F ์Šคํƒ ํ•™์Šต์œผ๋กœ ๋” ์‰ฝ๊ณ  ์žฌ๋ฏธ์žˆ๊ฒŒ 3D ํฌํŠธํด๋ฆฌ์˜ค ์›น์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ค์–ด ๋ณด์•„์š”!



ํ•™์Šต ๋‚ด์šฉ ๐Ÿ“š


1. Creative Coding์˜ ๊ธฐ์ดˆ ์ค‘์— ๊ธฐ์ดˆ! 3D ์›น์‚ฌ์ดํŠธ์˜ ๊ธฐ์ดˆ ์ค‘์— ๊ธฐ์ดˆ!

๋ฒกํ„ฐ(Vector)!์— ๋Œ€ํ•ด์„œ ์ฐจ๊ทผ์ฐจ๊ทผ ๋ฐฐ์›Œ๋ด…๋‹ˆ๋‹ค.

๊ฐ€์žฅ ๊ธฐ์ดˆ์ ์ด์ง€๋งŒ ๊ฐ€์žฅ ์ค‘์š”ํ•œ ๊ฐœ๋…์ธ ๋ฒกํ„ฐ(Vector)์— ๋Œ€ํ•ด ๋ˆ„๊ตฌ๋‚˜ ์ดํ•ดํ•˜๊ธฐ ์‰ฝ๊ฒŒ ์„ค๋ช…ํ•ฉ๋‹ˆ๋‹ค!

๋ฒกํ„ฐ(Vector)๋ž€ ๋ฌด์—‡์ผ๊นŒ?

์ž์ฒด ์ œ์ž‘ํ•œ ์„ค๋ช…์ž๋ฃŒ

์–ด๋ ค์šด ๊ฐœ๋…์„ ๊ทธ๋ฆผ์œผ๋กœ ์‰ฝ๊ฒŒ ์„ค๋ช…ํ•ด์„œ ์ดํ•ด ์™์™!



2. ์ง์ ‘ ์ฝ”๋”ฉํ•˜๊ณ  ํ•จ๊ป˜ ์‹ค์Šตํ•˜๋ฉฐ ๋ฒกํ„ฐ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ๋ฐฐ์›๋‹ˆ๋‹ค.

์ด๋ก ์„ ๊ธฐ์ดˆ๋กœํ•˜์—ฌ ํ•œ๋•€ํ•œ๋•€ ๊ฐ™์ด ์ฝ”๋”ฉํ•˜๋ฉฐ ํ•™์Šตํ•˜๊ธฐ !

๊ท€์—ฌ์šด '๊ณฐ๋Œ์ด์™€ ๊ฟ€' ์˜ˆ์ œ์™€ ๋ฐ•์Šค์— ํŠ•๊ธฐ๋Š” ๋ณผ(Ball) ์˜ˆ์ œ๋ฅผ ํ†ตํ•ด ๋ฐฐ์›Œ๋ด…๋‹ˆ๋‹ค.

๋ฒกํ„ฐ์˜ ํ™œ์šฉ ์ด๋ก  ์„ค๋ช…

๋ฒกํ„ฐ์˜ ํ™œ์šฉ ์‹ค์Šต๊ณผ์ œ

๋ฒกํ„ฐ์˜ ํ™œ์šฉ ์‹ฌํ™”๊ณผ์ •



3. ๋ฒกํ„ฐ(Vector)๋ฅผ ๋ฐฐ์› ์œผ๋‹ˆ ์ด๋ฒˆ์—๋Š” ์ปค๋ธŒ(Curve)์— ๋Œ€ํ•ด์„œ ๋ฐฐ์›Œ๋ณผ๊นŒ์š”?

Creative Coding์—์„œ ๋งŽ์ด ์‚ฌ์šฉํ•˜๋Š” ๊ฐœ๋…์ธ Sin / Cos / Tan ๋“ฑ Curve์— ๋Œ€ํ•ด์„œ ๋ฐฐ์›Œ๋ณด๊ณ 

R3F(Three.js)์˜ Curve๋ฅผ ํ™œ์šฉํ•œ ์ธํ„ฐ๋ ‰ํ‹ฐ๋ธŒํ•œ ์ฝ”๋”ฉ ์‹ค์Šต๊นŒ์ง€ ์ง„ํ–‰ํ•ด๋ด…๋‹ˆ๋‹ค.

Sin / Cos Curve๋ฅผ ํ™œ์šฉํ•œ ์ธํ„ฐ๋ ‰ํ‹ฐ๋ธŒ ์˜ˆ์ œ์‹ค์Šต

Three.js Curve์˜ ํ™œ์šฉ๋ฒ•

4. ์ธํ„ฐ๋ ‰ํ‹ฐ๋ธŒ ์›น ์‚ฌ์ดํŠธ์˜ ํ•„์ˆ˜์ธ์ ์ธ GSAP ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์— ๋Œ€ํ•ด ๋ฐฐ์šฐ๊ณ 

๋งˆ์šฐ์Šค ์Šคํฌ๋กค ์ด๋ฒคํŠธ๋กœ ์ธํ„ฐ๋ ‰ํ‹ฐ๋ธŒ 3D ์„ธ์ƒ์„ ์ปจํŠธ๋กคํ•ฉ๋‹ˆ๋‹ค.

์—ฌํƒœ๊นŒ์ง€ ๋ฐฐ์šด ๋ฒกํ„ฐ(Vector)์˜ ๊ธฐ๋ณธ์„ ํ™œ์šฉํ•˜์—ฌ ์‹ฌํ™”๊ณผ์ •๊นŒ์ง€ ํ•™์Šตํ•˜๋Š” ์ข…ํ•ฉ ์˜ˆ์ œ!

๋ณผ(Balls) ๋ผ๋ฆฌ ๋ถ€๋”ชํžˆ๊ณ , ์ค‘๋ ฅ์— ์˜ํ•ด์„œ ๋–จ์–ด์ง€๊ณ  ๋งˆ์šฐ์Šค์— ๋ฐ˜์‘ํ•˜๋Š” ์ข…ํ•ฉ ํ”„๋กœ์ ํŠธ!

์–ด๋–ป๊ฒŒ ํ”„๋กœ์ ํŠธ ๊ตฌ์กฐ๋ฅผ ๊ตฌ์„ฑํ•˜๊ณ , ๋””๋ฒ„๊น… ํ•  ์ˆ˜ ์žˆ์„๊นŒ์š”? ์‹ค๋ฌด์—์„œ๋Š” ์–ด๋–ป๊ฒŒ ์ฝ”๋”ฉ์„ ํ• ๊นŒ์š”?

์ฐจ๊ทผ์ฐจ๊ทผ ํ•˜๋‚˜์”ฉ ํ•˜๋‚˜์”ฉ ํ•จ๊ป˜ ๋ฐฐ์šฐ๋ฉด์„œ ํ•จ๊ป˜ ์™„์„ฑํ•˜๋Š” ์ธํ„ฐ๋ ‰ํ‹ฐ๋ธŒ ์›น ํฌํŠธํด๋ฆฌ์˜ค ๋งŒ๋“ค๊ธฐ!!

DEMO: https://cclab.taejaehan.com/

GSAP๋ฅผ ํ™œ์šฉํ•œ ์ธํ„ฐ๋ ‰ํ‹ฐ๋ธŒ ์›น

๋ฒกํ„ฐ(Vecotr)๋ฅผ ํ™œ์šฉํ•œ ์ข…ํ•ฉ ์ธํ„ฐ๋ ‰ํ‹ฐ๋ธŒ ํฌํŠธํด๋ฆฌ์˜ค ํ”„๋กœ์ ํŠธ

์ˆ˜๊ฐ• ์ „ ์ฐธ๊ณ  ์‚ฌํ•ญ ๐Ÿ“ข

์‹ค์Šต ํ™˜๊ฒฝ

  • ๊ฐ•์˜์—์„œ๋Š” macOS - Apple ์นฉ์„ ์‚ฌ์šฉํ•˜์ง€๋งŒ mac intel์นฉ ํ˜น์€ windowํ™˜๊ฒฝ๋„ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

  • ์‚ฌ์šฉ ํ”„๋กœ๊ทธ๋žจ : ํฌ๋กฌ, vscode, npm(node), r3f ๋“ฑ

  • PC ์‚ฌ์–‘: CPU 2.0GHz ์ด์ƒ, RAM 8GB ์ด์ƒ, WebGL ์ง€์› ๊ทธ๋ž˜ํ”ฝ์„ ๊ถŒ์žฅํ•ฉ๋‹ˆ๋‹ค

ํ•™์Šต ์ž๋ฃŒ

  • ๊ฐ ์„น์…˜๋ณ„ ์†Œ์Šค์ฝ”๋“œ ์••์ถ• ํŒŒ์ผ ์ œ๊ณต ( zip ) 

    • ์„น์…˜ 1, 2, 3 ์ด๋ก  ๋ฐ ๊ฐœ๋ฐœํ™˜๊ฒฝ ์„ธํŒ…

    • ์„น์…˜ 4, 5, 6, 7 ์‹ค์Šต ํ”„๋กœ์ ํŠธ (์†Œ์ŠคํŒŒ์ผ ์ œ๊ณต)

    • ์„น์…˜ 8, 9, 10 ์ข…ํ•ฉ ์‹ค๋ฌด ํ”„๋กœ์ ํŠธ (์†Œ์ŠคํŒŒ์ผ ์ œ๊ณต)



์„ ์ˆ˜ ์ง€์‹ ๋ฐ ์œ ์˜์‚ฌํ•ญ

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ์ดˆ๋ฅผ ์•„์‹œ๋Š” ๋ถ„์ด๋ผ๋ฉด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

  • React์— ๋Œ€ํ•œ ๊ธฐ์ดˆ ๊ฐœ๋…์ด ์žˆ์œผ์‹  ๋ถ„์ด๋ฉด ์ข‹์ง€๋งŒ ์—†์–ด๋„ ๊ดœ์ฐฎ์Šต๋‹ˆ๋‹ค.

  • 3D์˜ ๊ธฐ์ดˆ์™€ Three.js์˜ ์ž…๋ฌธ์ •๋„์˜ ๊ฒฝํ—˜์ด ์žˆ์œผ์‹  ๋ถ„์ด ๋“ค์œผ์‹œ๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.


  • ์ด๋ฒˆ๊ฐ•์˜์—์„œ๋Š” Scene, Camera, Renderer, Mesh, Geometry, Material, LIght ๋“ฑ 3D ๊ธฐ์ดˆ์— ๋Œ€ํ•ด์„œ ์„ค๋ช…ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ํ˜น์‹œ

    3D์˜ ๊ธฐ์ดˆ์— ๋Œ€ํ•ด ๋ฐฐ์šฐ๊ณ  ์‹ถ์œผ์‹œ๋ฉด ์ธํ”„๋Ÿฐ์˜ ์ œ ๊ฐ•์˜์ธ 'React Three fiber(R3F)๋กœ ๋ฐฐ์šฐ๋Š” ์ธํ„ฐ๋ ‰ํ‹ฐ๋ธŒ 3D ์›น ๊ฐœ๋ฐœ' https://inf.run/XAE71์„ ๋จผ์ € ๋“ค์œผ์‹œ๊ณ  ์ด๋ฒˆ ๊ฐ•์˜๋ฅผ ๋“ค์œผ์‹œ๋Š” ๊ฒƒ์„ ์ถ”์ฒœ๋“œ๋ฆฝ๋‹ˆ๋‹ค :)


  • ์งˆ๋ฌธ ํ•ด ์ฃผ์‹œ๋Š” ๋‚ด์šฉ์€ ๋น ๋ฅด๋ฉด ๋‹น์ผ ๋Šฆ์–ด๋„ 3์ผ ์ด๋‚ด์— ๋‹ต๋ณ€ ๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค.

Recommended for
these people

Who is this course right for?

  • Developers/designers who want to learn the basics of creative coding

  • Developers/designers who want to create a remarkable and unique website

  • Developers who want to implement 3D on the web

  • A developer who wants to have a weapon that sets them apart from others

  • Developers/designers who want to start fun experiments on the web

Need to know before starting?

  • Anyone with a basic understanding of JavaScript can do it.

  • Basic knowledge of React is preferred, but not required.

  • Prior knowledge of Three.js basic concepts is preferred, but not required.

Hello
This is taejaehan

364

Learners

27

Reviews

13

Answers

5.0

Rating

2

Courses

Hello. I am Taejae Han, a web graphics engineer with 10 years of experience. I am primarily a full-stack developer, but I focus on front-end work :)

I have experience in frontend development using frameworks like Angular and React. However, my favorite work involves projects that handle 2D/3D Canvas graphics on the web (HTML5), such as Threejs, WebGL, D3js, and Pixi.js.

I am passionate about creating interactive web content that offers new and creative user experiences (UX). Let's build some fun projects together!

I'm Teudle. I am passionate about creating interactive web content that delivers new and creative user experiences (UX). Let's build some fun projects together!

10-year veteran interactive 3D frontend developer

-(Current) NEOWIZ - HTML5 Game Developer

-(Current) Modulabs - Generative Art Lab Lead

-Wemade - DeFi Frontend Development Team Lead

-Dabeeo - Three.js Development Team Lead

-Dmajor - Senior Frontend Developer

-Modulabs - Lab Director of Interactive Art of Web

-Addpac - Junior Frontend Developer

-NHN Naver Japan - UX/UI Designer

-Madman Post - CG Effect Artist

- Kookmin University - Industrial Design Major

More

Curriculum

All

77 lectures โˆ™ (11hr 32min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

5 reviews

5.0

5 reviews

  • kimkichangsy6908๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
    kimkichangsy6908

    Reviews 2

    โˆ™

    Average Rating 5.0

    5

    43% enrolled

    I got started with Three.js while listening to your last lecture. I came running right away when I heard that you released a new lecture. Vectors are still difficult, but... I think I can understand vectors little by little because you taught the lecture considering a beginner's perspective. If I listen to it repeatedly, I think I can apply it in a fun way. Thank you.

    • thffhahs03๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
      thffhahs03

      Reviews 2

      โˆ™

      Average Rating 5.0

      5

      61% enrolled

      https://r3flabs.vercel.app/ Even though I'm a poor college student, this was an excellent lecture that was totally worth every penny! I made a simple portfolio site.๐Ÿ˜Š๐Ÿ˜Š When I looked for other Three.js courses, they just ended with content where you follow along with code, making me wonder if I'd have to study by reading the frustrating official documentation alone. Thanks to this course, I was able to study so comfortably - it's such a hidden gem that I almost want to keep it to myself.. It's not just about following code, but it's well-structured so you can understand the principles from the ground up. That said, it doesn't go theoretically deep like a real college course, but is appropriately well-composed, which made it enjoyable to listen to.

      • hansoyoung37277879๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
        hansoyoung37277879

        Reviews 2

        โˆ™

        Average Rating 5.0

        5

        6% enrolled

        • parkyeonsoon582789๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
          parkyeonsoon582789

          Reviews 2

          โˆ™

          Average Rating 5.0

          5

          19% enrolled

          • salary999๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
            salary999

            Reviews 20

            โˆ™

            Average Rating 5.0

            5

            31% enrolled

            Similar courses

            Explore other courses in the same field!