Three.js: Three.js ๋กœ๊ณ  ์‚ฌ์šฉ, ์ง€์นจ

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

์›น ์‚ฌ์ดํŠธ, ๋ฌธ์„œ, ๋ฐ๋ชจ ๋“ฑ์— Three.js ๋กœ๊ณ ๋ฅผ ์‚ฝ์ž…ํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. ํ—ˆ์šฉ๋ฉ๋‹ˆ๊นŒ?
๊ทธ๋ ‡๋‹ค๋ฉด ๋‹ค์Œ ํ•ญ๋ชฉ์„ ์ฐพ์•˜์ง€๋งŒ ์–ด๋Š ๊ฒƒ์ด ๊ณต์‹์ธ์ง€ ํ™•์‹คํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

http://en.wikipedia.org/wiki/File : Three.js_logo.png

threejs_logo

Question

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

์ด๋ฏธ ๊ณต์‹ ๋กœ๊ณ ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค!

์ ์–ด๋„ ์œ„ํ‚ค โ€‹โ€‹๋ฏธ๋””์–ด์— ๋”ฐ๋ฅด๋ฉด ๐Ÿคฃ

https://commons.wikimedia.org/wiki/File : Three.js_logo.png

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

๊ณต์‹ ๋กœ๊ณ ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค : /

๊ทธ๊ฒŒ ์ข‹์€ ๊ธฐํšŒ๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. mrdoob์— ๋Œ€ํ•ด ํŠธ์œ„ ํŒ…ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค. ๋งŽ์€ ์‚ฌ๋žŒ๋“ค์ด ๋ฌด์–ธ๊ฐ€์— ๊ด€์‹ฌ์„ ๊ฐ€์งˆ ๊ฒƒ์ด๋ฏ€๋กœ Three.js์— ๋Œ€ํ•œ ๋ฉ‹์ง„ ๋กœ๊ณ ๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๊ฒŒ ์ข‹์€ ๊ธฐํšŒ๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. mrdoob์— ๋Œ€ํ•ด ํŠธ์œ„ ํŒ…ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค. ๋งŽ์€ ์‚ฌ๋žŒ๋“ค์ด ๋ฌด์–ธ๊ฐ€์— ๊ด€์‹ฌ์„ ๊ฐ€์งˆ ๊ฒƒ์ด๋ฏ€๋กœ Three.js์— ๋Œ€ํ•œ ๋ฉ‹์ง„ ๋กœ๊ณ ๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๊ฒƒ์€ ์ด๋ฏธ ์ผ์–ด๋‚ฌ์Šต๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” ํ•˜๋‚˜์— ๋™์˜ ํ•  ์ˆ˜ ์—†์—ˆ์Šต๋‹ˆ๋‹ค.

๋‚˜๋Š” ์ด๋ฏธ ๊ทธ๊ฒƒ์„ ์‹œ๋„ํ–ˆ๋‹ค. ์ž‘๋™ํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ๊ทธ๋•Œ ์˜คํ”ˆ ์†Œ์Šค ๋ฐฉ์‹์ด ๋””์ž์ธ์— ์ ์šฉ๋˜์ง€ ์•Š๋Š”๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ฒŒ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋ˆ„๊ตฌ๋‚˜ ์ž์‹ ์˜ ์˜๊ฒฌ์„ ๊ฐ€์ง€๊ณ  ์žˆ์œผ๋ฉฐ ๊ฒฝํ—˜๊ณผ ๋ง›์ด ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค.

์˜คํ”ˆ ์†Œ์Šค๋Š” ์ž‘๋™ํ•˜๋Š” ๊ฒƒ๊ณผ ๊ทธ๋ ‡์ง€ ์•Š์€ ๊ฒƒ์„ ์‰ฝ๊ฒŒ ๋ณผ ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์ฝ”๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ๋” ์‰ฝ์Šต๋‹ˆ๋‹ค. ๋””์ž์ธ์—์„œ ๋ฌด์—‡์ด ์ž‘๋™ํ•˜๊ณ  ๋ฌด์—‡์ด ์ž‘๋™ํ•˜์ง€ ์•Š๋Š”์ง€๋ณด๊ธฐ๋Š” ์–ด๋ ต์Šต๋‹ˆ๋‹ค. ์ž‘๋™ ์ด์œ ์™€ ์ž‘๋™ํ•˜์ง€ ์•Š๋Š” ์ด์œ ๋ฅผ ์„ค๋ช…ํ•˜๊ธฐ๊ฐ€ ๋” ์–ด๋ ต์Šต๋‹ˆ๋‹ค.

๊ฒฐ๊ตญ ๊ฒฐ์ •์ ์œผ๋กœ ๋กœ๊ณ ๋ฅผ ๋„์ž…ํ•ด์•ผ ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์–ด๋–ค ์‚ฌ๋žŒ๋“ค์€ ๊ทธ๊ฒƒ์„ ์ข‹์•„ํ•˜๊ณ  ์–ด๋–ค ์‚ฌ๋žŒ๋“ค์€ ๊ทธ๊ฒƒ์„ ์‹ซ์–ดํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์˜ˆ, ๋ชจ๋‘๊ฐ€ ์˜๊ฒฌ์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋กœ๊ณ ๋ฅผ ๊ฒฐ์ •ํ•˜๊ณ  ๋ฌด์Šจ ์ผ์ด ์ผ์–ด๋‚˜๋Š”์ง€ ํ™•์ธํ•ด์•ผํ•œ๋‹ค๋Š” ๋ฐ ๋™์˜ํ•ฉ๋‹ˆ๋‹ค.

@mrdoob ๋˜ํ•œ Cinema 4D ๋‚ด๋ณด๋‚ด๊ธฐ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ๊ณต์‹ ๋กœ๊ณ ๋ฅผ ๊ฐ–๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. (์•„์ด์ฝ˜์ด ์žˆ์–ด์•ผํ•ฉ๋‹ˆ๋‹ค)

์ €๋Š” ์ง์—… ๋ณ„ ๊ทธ๋ž˜ํ”ฝ ๋””์ž์ด๋„ˆ์ด๊ธฐ ๋•Œ๋ฌธ์— ๋‹น์‹ ์„ ์œ„ํ•ด ์•„์ด๋””์–ด๋ฅผ ์Šค์ผ€์น˜ ํ•ด๋ณด๊ณ  ๋‹น์‹ ์ด ๋ญ”๊ฐ€๋ฅผ ์ข‹์•„ํ•˜๋Š”์ง€ ํ™•์ธํ•ด ๋ณผ ์ˆ˜์žˆ์„ ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค. ๋””์ž์ธ์—๋Š” ๋ฏธ์  ์ธก๋ฉด๊ณผ ๊ธฐ๋Šฅ์  ์ธก๋ฉด์ด ๋ชจ๋‘ ์žˆ์œผ๋ฏ€๋กœ ์ „๋‹ฌํ•  ๋‚ด์šฉ์„ ๊ฒฐ์ •ํ•˜๊ธฐ ๋งŒํ•˜๋ฉด๋ฉ๋‹ˆ๋‹ค. ๊ฒฐ๊ตญ ๋‚˜๋Š” ๋‹น์‹ ์ด ์˜ณ์€ ๊ฒƒ์„ ์ธ์‹ ํ•  ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

๊ท€ํ•˜์˜ ๊ธฐ๋Œ€์— ๋งž๊ฒŒ ์กฐ์ •ํ•  ์ˆ˜ ์žˆ๋„๋ก ๊ท€ํ•˜์˜ ์ƒ๊ฐ์„ ๋“ฃ๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. ๊ทธ๊ฒƒ์— ๋Œ€ํ•ด ๋Œ€ํ™”๋ฅผ ๋‚˜๋ˆ„๊ณ  ์‹ถ๋‹ค๋ฉด gmail์˜ spohr.david๋กœ ์•Œ๋ ค์ฃผ์„ธ์š”. ๋˜ํ•œ ์Šค์ผ€์น˜๋ฅผ ๋น„๊ณต๊ฐœ๋กœ ์œ ์ง€ํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

ํŠธ์œ— ๋‹ด์•„ ๊ฐ€๊ธฐ
์•ˆ๋…•ํ•˜์„ธ์š”, "๊ธฐ์ˆ  ๋ฐ ๋„๊ตฌ"๋ชฉ๋ก์— ThreeJS๋ฅผ ์ถ”๊ฐ€ํ•˜๊ณ  ์‹ถ๊ธฐ ๋•Œ๋ฌธ์— ๋กœ๊ณ ๋ฅผ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค (์ผ๊ด€์„ฑ์„ ์œ„ํ•ด "๋กœ๊ณ ๋กœ ํ…์ŠคํŠธ"๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค). MIT ๋ผ์ด์„ผ์Šค.

https://github.com/Polymole/threejs-logo

์ด๊ฒƒ์€ three.js ๋กœ๊ณ ์ž…๋‹ˆ๋‹ค.

https://docs.google.com/drawings/d/1kVcyy3Ibe_Q98zH0auXK-L8vahBWLBuo1aN7fk5M_FM/edit?usp=sharing

2 ๋…„ ์ „์— ๋””์ž์ธํ–ˆ๋Š”๋ฐ ์•„์ง ๊ณต์‹ ์‚ฌ์ดํŠธ์— ์˜ฌ๋ฆด ์ˆ˜ ์—†์—ˆ์–ด์š” ๐Ÿ˜…

@mrdoob ์ข‹์•„์š”, ์ข‹์•„์š”. ์—ฌ๊ธฐ ๋‚ด ์•„์ด๋””์–ด ์ค‘ ์ผ๋ถ€๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์‚ผ๊ฐํ˜•์ด ๊ฐ€์žฅ ์ ํ•ฉํ•˜๋‹ค๋Š” ๋ฐ ๋™์˜ํ•ฉ๋‹ˆ๋‹ค. :)

Three.js logo ideas

์ด๊ฒƒ๋“ค ๊ฐ๊ฐ์—๋Š” ๋ณด์ด๋Š” ๊ฒƒ๋ณด๋‹ค ์กฐ๊ธˆ ๋” ๊นŠ์ด๊ฐ€ ์žˆ์ง€๋งŒ ๋‚˜๋Š” ๊ทธ๊ฒƒ์— ๋งก๊ธธ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

@mrdoob ๋กœ๊ณ ์— ๋ฌธ์ œ๊ฐ€ ๋  ์ˆ˜์žˆ๋Š” ํ•œ ๊ฐ€์ง€๋Š” ์ž‘์€ ๋ฒ„์ „์ž…๋‹ˆ๋‹ค. ์ถ•์†Œํ•˜๋ฉด ์‚ผ๊ฐํ˜•์ด ์ •๋ง ์–‡์•„์ง‘๋‹ˆ๋‹ค. ๋‚˜๋Š” ๋” ๋‘๊บผ์šด ๋ฒ„์ „์„ ์‹œ๋„ ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.
์˜ˆ๋ฅผ ๋“ค์–ด ํ…์ŠคํŠธ ์œ„์— ๊ธฐํ˜ธ๋ฅผ ๋ฐฐ์น˜ํ•ด์•ผ ํ•  ๋•Œ ๊ฐ๋„๊ฐ€ ๋‹ค๋ฅธ ๊ตฌ์„ฑ์—์„œ ์ž˜ ์ž‘๋™ํ•˜์ง€ ์•Š์„ ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค. (์˜ˆ๋ฅผ ๋“ค์–ด ๋” ์ปดํŒฉํŠธํ•˜๊ฒŒ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด)

@mrdoob ๋””์ž์ด๋„ˆ๋กœ์„œ ์ €๋Š” three.js๋ฅผ ์ข‹์•„ํ•ฉ๋‹ˆ๋‹ค! ๋กœ๊ณ ๋‚˜ ๊ธฐํƒ€ ๋””์ž์ธ์— ๊ณต์งœ๋กœ ๊ณตํ—Œํ•˜๊ณ  ์‹ถ์€ ๋ถ„๋“ค์ด ๋งŽ๊ธฐ ๋•Œ๋ฌธ์— ์†Œ๊ทœ๋ชจ ํŒ€์„ ๊ตฌ์„ฑํ•ด์•ผํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋“ค์€ three.js์—์„œ ๋‚˜์™€ ๊ฐ™์€ ์—ด์ •์„ ๊ฐ€์งˆ ์ˆ˜ ์žˆ์œผ๋ฉฐ ๊ณต์‹ ๋กœ๊ณ ๋ฅผ ๊ฐ–๋Š” ๊ฒƒ์ด ์ ์  ๋” ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

screen shot 2017-03-05 at 12 23 20 pm

์œ„์— ๋””์ž์ธ ํ•œ ๋กœ๊ณ ๋Š” ๊ต‰์žฅํ•˜๋ฉฐ ์ €๋Š” @EskelCz ์™€ ๊ฐ™์€ ๊ฒฌํ•ด๋ฅผ

1, ์‚ผ๊ฐํ˜•์ด ์ข‹์Šต๋‹ˆ๋‹ค.
2, ์ถ•์†Œ ํ•  ๋•Œ ์ •๋ง ์–‡์Šต๋‹ˆ๋‹ค.

๊ทธ๋ž˜์„œ ๋‚˜๋Š” ๋‹น์‹ ์˜ ์•„์ด๋””์–ด์— ๋”ฐ๋ผ ๊ทธ๊ฒƒ์„ ๋‹ค๋“ฌ๊ณ  ๋” ์•ˆ์ •์ ์ด๊ณ  ํ™”๋ คํ•˜๋ฉฐ ๋Œ€์ค‘์ ์œผ๋กœ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
๋‚ด๊ฐ€ ๋„์›€์ด ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‚˜๋Š” ๊ฐœ์ธ์ ์œผ๋กœ ์ž‘์€ ํฌ๊ธฐ์˜ ๋ฌธ์ œ๋ฅผ ๋ณด์ง€ ๋ชปํ•ฉ๋‹ˆ๋‹ค. ์•„์ด์ฝ˜์œผ๋กœ ์ž‘๋™ํ•˜์ง€ ์•Š์ง€๋งŒ ์•„์ฃผ ์ž‘์€ ํฌ๊ธฐ๋กœ ์ž˜ ๋ณด์ž…๋‹ˆ๋‹ค.

์—ฌ๊ธฐ์—์„œ๋Š” ๋„ˆ๋น„๊ฐ€ 80px๋กœ ์กฐ์ •๋˜์–ด ์žˆ์ง€๋งŒ ์•ฝ๊ฐ„ ํ๋ฆฟํ•˜์ง€๋งŒ ๋ฒกํ„ฐ ํŒŒ์ผ์—์„œ ํฌ๊ธฐ๋ฅผ ์กฐ์ •ํ•˜์—ฌ ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

three-logo-80

์ด๋ณด๋‹ค ์ž‘๊ฒŒ ๋ณด์ด๋Š” ๋กœ๊ณ ๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๊นŒ?

@looeee ์•„์ด์ฝ˜์œผ๋กœ ์ธํ„ฐ๋„ท์—์„œ 16px * 16px๊นŒ์ง€ ๋‚ด๋ ค๊ฐˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ :
screen shot 2017-03-05 at 6 00 19 pm
๊ทธ๋ฆฌ๊ณ ์ด ํŒŒ๋น„์ฝ˜์€ SVG ํ˜•์‹์„ ์ง€์›ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
์šฐ๋ฆฌ๋Š” ๋‹ค์–‘ํ•œ ํฌ๊ธฐ๋กœ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ๋งŽ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

์ €๋ฅผ ํ˜ผ๋ž€์Šค๋Ÿฝ๊ฒŒํ•˜๋Š” ๋ช‡ ๊ฐ€์ง€ ๋ฌธ์ œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

1, ํšŒ์ „.
angle
๋กœ๊ณ ๊ฐ€ ์•ฝ 43.643๋„ ํšŒ์ „ํ•˜๋Š” ๊ฐ๋„๋ฅผ ํ…Œ์ŠคํŠธํ•ฉ๋‹ˆ๋‹ค. ์„ค๋“๋ ฅ์žˆ๋Š” ์ด์œ ๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ?

2, ๋ถ€๋ฌธ.
screen shot 2017-03-05 at 6 31 42 pm
4๋กœ ๋‚˜๋ˆˆ ์ด์œ ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ? ๋‹จ์ˆœํ•˜์ง€ ์•Š๊ฑฐ๋‚˜ ๋” ๋ณต์žกํ•˜์ง€ ์•Š์Šต๋‹ˆ๊นŒ?

3, ์ŠคํŠธ๋กœํฌ ํญ.
screen shot 2017-03-05 at 6 35 04 pm
๋” ์ ๊ฒŒ ๋‚˜๋ˆ„๊ณ  ๋” ๊ฐ•ํ•˜๊ฒŒ ์“ธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

์•„์ด์ฝ˜์œผ๋กœ ์ธํ„ฐ๋„ท์—์„œ 16px * 16px๊นŒ์ง€ ์ค„์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์˜ˆ, ์ €๋Š” ์•Œ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ œ๊ฐ€ ์˜๋ฏธํ•˜๋Š” ๋ฐ”๋Š” 'three.js'๊ธ€์ž๊ฐ€์žˆ๋Š” ๋กœ๊ณ ๊ฐ€ ์•„์ด์ฝ˜์ด ์•„๋‹ˆ๋ผ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์•„์ด์ฝ˜์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜์žˆ๋Š” ๋กœ๊ณ ๊ฐ€ ์žˆ์œผ๋ฉด ์œ ์šฉ ํ•  ๊ฒƒ์ด๋ผ๋Š” ๋ฐ ๋™์˜ํ•ฉ๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์—์„œ ์•ฝ๊ฐ„์˜ ํ…Œ์ŠคํŠธ๋ฅผ ์ˆ˜ํ–‰ํ–ˆ์Šต๋‹ˆ๋‹ค.

64x64px :
three js-iconartboard 1 2x

32x32px :
three js-iconartboard 1

16x16px :
three js-iconartboard 1 0 5x

๋ถˆํ–‰ํžˆ๋„ ์ด๊ฒƒ๋“ค์€ ์—ฌ๊ธฐ์— ์–ด๋–ค ์ข…๋ฅ˜์˜ ์Šค์ผ€์ผ๋ง์ด ์ ์šฉ๋œ ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์ด๋ฏ€๋กœ ์—ฌ๊ธฐ์—์„œ ๋ช…ํ™•ํ•˜๊ฒŒ ๋ณผ ์ˆ˜๋Š” ์—†์ง€๋งŒ 32x32๋กœ ๋‚ฎ์ถ”๋Š” ๊ฒƒ์ด ์ข‹์ง€๋งŒ 16x16์€ ๋” ๋งŽ์€ ์ž‘์—…์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

์›๋ณธ ํŒŒ์ผ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค. https://drive.google.com/open?id=0B6LojVT90-hsd3hlWHNSUFJUVmc

1, ํšŒ์ „.
๋กœ๊ณ ๊ฐ€ ํšŒ์ „ํ•˜๋Š” ๊ฐ๋„๊ฐ€ ์•ฝ 43.643 ๋„์ธ ์ง€ ํ…Œ์ŠคํŠธํ•ฉ๋‹ˆ๋‹ค. ์„ค๋“๋ ฅ์žˆ๋Š” ์ด์œ ๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ?

์–ด๋–ป๊ฒŒ ๋“  ์˜ณ๊ณ  ๋…ํŠนํ•˜๋‹ค๊ณ  ๋Š๊ผˆ์Šต๋‹ˆ๋‹ค.

2, ๋ถ€๋ฌธ.
screen shot 2017-03-05 at 6 31 42 pm
4๋กœ ๋‚˜๋ˆˆ ์ด์œ ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ? ๋‹จ์ˆœํ•˜์ง€ ์•Š๊ฑฐ๋‚˜ ๋” ๋ณต์žกํ•˜์ง€ ์•Š์Šต๋‹ˆ๊นŒ?
์ผ์ข…์˜ ๋…ํŠนํ•œ ๋Š๋‚Œ.

์ฒซ ๋ฒˆ์งธ๋Š” ์ ค๋‹ค์ด๊ณ  ๋‘ ๋ฒˆ์งธ๋Š” ํ•ต์ž…๋‹ˆ๋‹ค ๐Ÿ˜

์•„์ด์ฝ˜๋ณ„๋กœ ... ์‹ค์ œ๋กœ "3"์ด ์ƒ๋žต ๋œ ๋ฒ„์ „์„ ๊ณ„ํš ์ค‘์ด์—ˆ์Šต๋‹ˆ๋‹ค.

threejs-website03_

threejs-website03

๋‚˜๋Š” ํšŒ์ „์„ ์ข‹์•„ํ•˜๋ฉฐ ๋งŽ์€ ๊ฐœ์„ฑ๊ณผ ๋…์ฐฝ์„ฑ์„ ๋ถ€์—ฌํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๋‚˜๋Š” 2 ๊ฐœ์˜ ๋ถ„ํ•  (๊ฐ๋ฉด์— 3 ๊ฐœ์˜ tris)์„ ์‚ฌ์šฉํ•˜๊ณ  ๋” ์ผ๊ด€๋˜๊ณ  ๋‹จ์ˆœํ•˜๊ฒŒ ๋Š๊ปด์ง‘๋‹ˆ๋‹ค.

์ผ๋‹จ ํšŒ์ „๋˜๋ฉด ํ•ต ์•„์ด๋””์–ด์— ๋ฌธ์ œ๊ฐ€ ์—†๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์‚ฌ์‹ค, 3D ์›น์˜ ํ†ตํ•ฉ๋˜๊ณ  ๋ณดํŽธ์  ์ธ ํ•ต์‹ฌ / ํ•ต์œผ๋กœ์„œ threejs์˜ ์•„์ด๋””์–ด๋Š” ๋ฉ‹์ง‘๋‹ˆ๋‹ค.

๋‚˜๋Š” @feiss์— ๋™์˜ํ•œ๋‹ค. ๋‚˜๋Š” ๊ทธ๊ฒƒ์„ ๋ณผ ๋•Œ ๋‚ด ๋งˆ์Œ์ด ์ธก๋ฉด์—์žˆ๋Š” 3 ๊ฐœ์˜ ์‚ผ๊ฐํ˜•์„๋ณด๊ณ  3 ๊ฐœ์˜ ๊ทธ๋ฃน์œผ๋กœ ๊ทธ๋ฃนํ™”ํ•˜๋Š” ๊ฒฝํ–ฅ์ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๋‘ ๋ฒˆ์งธ ๊ฒƒ์„ ์„ ํ˜ธํ•œ๋‹ค.

image :)

2D ๋กœ๊ณ ๋Š” three.js์— ์ ํ•ฉํ•˜์ง€ ์•Š๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๊ฒƒ์„ ์‚ฌ๋ฉด์ฒด๋กœ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

@WestLangley ๋Š” ์ด๊ฒƒ์ด ์ €์ž์˜ ์˜๋„์ธ์ง€ ํ™•์‹คํ•˜์ง€ ์•Š์ง€๋งŒ mrdoob์˜ ๋ฒ„์ „๊ณผ ๋‹ค๋ฅธ ๋กœ๊ณ  ๋ณ€ํ˜•์„ 3D ๋ฉ”์‰ฌ ๋ฐ ํ๋ธŒ๋กœ ํ•ด์„ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฐ€์žฅ์ž๋ฆฌ๊ฐ€ ์ œ๊ฑฐ ๋œ fernardojsg ๋ฒ„์ „์ด ๋” ์ž˜ ๋ณด์ž…๋‹ˆ๋‹ค.
threejs3

@WestLangley 2D ์‚ผ๊ฐํ˜• ๋กœ๊ณ ์— ๋Œ€ํ•œ ์•„์ด๋””์–ด๋Š” ๋ถ€๋ถ„์ ์œผ๋กœ๋Š” ๋†๋‹ด์ด์—ˆ์Šต๋‹ˆ๋‹ค.

์›๋ž˜ ๋กœ๊ณ ๋Š” ํ›Œ๋ฅญํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•˜์ง€๋งŒ ์œ„์น˜, ํฌ๊ธฐ ์กฐ์ •, ํ…์ŠคํŠธ ๋ฐฐ์น˜ ๋ฐ ๋„ˆ๋น„์— ๋Œ€ํ•œ ์•ฝ๊ฐ„์˜ ์กฐ์ •์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค!

๊ทธ๋ž˜๋„ ํ…์ŠคํŠธ ์•„ํŠธ๊ฐ€ ํ•„์š”ํ•œ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๊นŒ?

http://patorjk.com/software/taag/#p = display & f = Dr % 20Pepper & t = Three.js

https://threejs.org/docs/ ์—์„œ ์ฝ˜์†”์„ ๋ณธ ์ ์ด

screen shot 2017-03-14 at 15 31 00

๋„ค, ๊ทธ๊ฒƒ์ด ์ œ๊ฐ€ ์ œ์•ˆํ•œ ์ด์œ ์ž…๋‹ˆ๋‹ค! ๋‚˜๋Š” ๊ทธ๊ฒƒ์„ ๋กœ๊ณ ์— ์–ด๋–ป๊ฒŒ ๋“  ํ†ตํ•ฉ ํ•  ์ˆ˜ ์žˆ๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค.

์ถ”์‹  : ๊ทธ๊ฑด ๊ทธ๋ ‡๊ณ , ๋‚˜๋Š” ๋‹น์‹ ์ด ์–ด๋–ป๊ฒŒ ๊ธ€๋กœ๋ฒŒ ํŒฉํ† ๋ฆฌ๋ฅผ ๋งŒ๋“ค๊ณ , ์–ด๋–ป๊ฒŒ Object.assignProperty.์™€ ๊ฒƒ๋“ค์„ ๊ตฌํ˜„ํ–ˆ๋Š”์ง€ ์กฐ์‚ฌํ–ˆ์Šต๋‹ˆ๋‹ค. ํŠœํ† ๋ฆฌ์–ผ์„ ๋งŒ๋“ค๊ฑฐ๋‚˜ ๋งํฌ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ๋‹น์‹ ์ดํ–ˆ๋˜ ๋ฐฉ์‹์œผ๋กœ ๊ฒŒ์ž„ ์—”์ง„์„ ๋งŒ๋“œ๋Š” ๋ฒ•์„ ๋ฐฐ์šฐ๊ณ  ์‹ถ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค!

์ด๋ฏธ ๊ณต์‹ ๋กœ๊ณ ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค!

์ ์–ด๋„ ์œ„ํ‚ค โ€‹โ€‹๋ฏธ๋””์–ด์— ๋”ฐ๋ฅด๋ฉด ๐Ÿคฃ

https://commons.wikimedia.org/wiki/File : Three.js_logo.png

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