์น ์ฌ์ดํธ, ๋ฌธ์, ๋ฐ๋ชจ ๋ฑ์ Three.js ๋ก๊ณ ๋ฅผ ์ฝ์
ํ๊ณ ์ถ์ต๋๋ค. ํ์ฉ๋ฉ๋๊น?
๊ทธ๋ ๋ค๋ฉด ๋ค์ ํญ๋ชฉ์ ์ฐพ์์ง๋ง ์ด๋ ๊ฒ์ด ๊ณต์์ธ์ง ํ์คํ์ง ์์ต๋๋ค.
http://en.wikipedia.org/wiki/File : Three.js_logo.png
๊ณต์ ๋ก๊ณ ๊ฐ ์์ต๋๋ค : /
๊ทธ๊ฒ ์ข์ ๊ธฐํ๋ผ๊ณ ์๊ฐํฉ๋๋ค. mrdoob์ ๋ํด ํธ์ ํ ํด์ผํฉ๋๋ค. ๋ง์ ์ฌ๋๋ค์ด ๋ฌด์ธ๊ฐ์ ๊ด์ฌ์ ๊ฐ์ง ๊ฒ์ด๋ฏ๋ก Three.js์ ๋ํ ๋ฉ์ง ๋ก๊ณ ๋ฅผ ์ป์ ์ ์์ต๋๋ค.
๊ทธ๊ฒ ์ข์ ๊ธฐํ๋ผ๊ณ ์๊ฐํฉ๋๋ค. mrdoob์ ๋ํด ํธ์ ํ ํด์ผํฉ๋๋ค. ๋ง์ ์ฌ๋๋ค์ด ๋ฌด์ธ๊ฐ์ ๊ด์ฌ์ ๊ฐ์ง ๊ฒ์ด๋ฏ๋ก Three.js์ ๋ํ ๋ฉ์ง ๋ก๊ณ ๋ฅผ ์ป์ ์ ์์ต๋๋ค.
๊ทธ๊ฒ์ ์ด๋ฏธ ์ผ์ด๋ฌ์ต๋๋ค. ์ฐ๋ฆฌ๋ ํ๋์ ๋์ ํ ์ ์์์ต๋๋ค.
๋๋ ์ด๋ฏธ ๊ทธ๊ฒ์ ์๋ํ๋ค. ์๋ํ์ง ์์์ต๋๋ค. ๊ทธ๋ ์คํ ์์ค ๋ฐฉ์์ด ๋์์ธ์ ์ ์ฉ๋์ง ์๋๋ค๋ ๊ฒ์ ์๊ฒ๋์์ต๋๋ค. ๋๊ตฌ๋ ์์ ์ ์๊ฒฌ์ ๊ฐ์ง๊ณ ์์ผ๋ฉฐ ๊ฒฝํ๊ณผ ๋ง์ด ์ค์ํฉ๋๋ค.
์คํ ์์ค๋ ์๋ํ๋ ๊ฒ๊ณผ ๊ทธ๋ ์ง ์์ ๊ฒ์ ์ฝ๊ฒ ๋ณผ ์ ์๊ธฐ ๋๋ฌธ์ ์ฝ๋๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ๋ ์ฝ์ต๋๋ค. ๋์์ธ์์ ๋ฌด์์ด ์๋ํ๊ณ ๋ฌด์์ด ์๋ํ์ง ์๋์ง๋ณด๊ธฐ๋ ์ด๋ ต์ต๋๋ค. ์๋ ์ด์ ์ ์๋ํ์ง ์๋ ์ด์ ๋ฅผ ์ค๋ช ํ๊ธฐ๊ฐ ๋ ์ด๋ ต์ต๋๋ค.
๊ฒฐ๊ตญ ๊ฒฐ์ ์ ์ผ๋ก ๋ก๊ณ ๋ฅผ ๋์ ํด์ผ ํ ๊ฒ์ ๋๋ค. ์ด๋ค ์ฌ๋๋ค์ ๊ทธ๊ฒ์ ์ข์ํ๊ณ ์ด๋ค ์ฌ๋๋ค์ ๊ทธ๊ฒ์ ์ซ์ดํ ๊ฒ์ ๋๋ค.
์, ๋ชจ๋๊ฐ ์๊ฒฌ์ ๊ฐ์ง๊ณ ์์ต๋๋ค. ๋ก๊ณ ๋ฅผ ๊ฒฐ์ ํ๊ณ ๋ฌด์จ ์ผ์ด ์ผ์ด๋๋์ง ํ์ธํด์ผํ๋ค๋ ๋ฐ ๋์ํฉ๋๋ค.
@mrdoob ๋ํ Cinema 4D ๋ด๋ณด๋ด๊ธฐ์์ ์ฌ์ฉํ ์ ์๋๋ก ๊ณต์ ๋ก๊ณ ๋ฅผ ๊ฐ๊ณ ์ถ์ต๋๋ค. (์์ด์ฝ์ด ์์ด์ผํฉ๋๋ค)
์ ๋ ์ง์ ๋ณ ๊ทธ๋ํฝ ๋์์ด๋์ด๊ธฐ ๋๋ฌธ์ ๋น์ ์ ์ํด ์์ด๋์ด๋ฅผ ์ค์ผ์น ํด๋ณด๊ณ ๋น์ ์ด ๋ญ๊ฐ๋ฅผ ์ข์ํ๋์ง ํ์ธํด ๋ณผ ์์์ ๊ฒ์ด๋ผ๊ณ ์๊ฐํ์ต๋๋ค. ๋์์ธ์๋ ๋ฏธ์ ์ธก๋ฉด๊ณผ ๊ธฐ๋ฅ์ ์ธก๋ฉด์ด ๋ชจ๋ ์์ผ๋ฏ๋ก ์ ๋ฌํ ๋ด์ฉ์ ๊ฒฐ์ ํ๊ธฐ ๋งํ๋ฉด๋ฉ๋๋ค. ๊ฒฐ๊ตญ ๋๋ ๋น์ ์ด ์ณ์ ๊ฒ์ ์ธ์ ํ ๊ฒ์ด๋ผ๊ณ ์๊ฐํฉ๋๋ค.
๊ทํ์ ๊ธฐ๋์ ๋ง๊ฒ ์กฐ์ ํ ์ ์๋๋ก ๊ทํ์ ์๊ฐ์ ๋ฃ๊ณ ์ถ์ต๋๋ค. ๊ทธ๊ฒ์ ๋ํด ๋ํ๋ฅผ ๋๋๊ณ ์ถ๋ค๋ฉด gmail์ spohr.david๋ก ์๋ ค์ฃผ์ธ์. ๋ํ ์ค์ผ์น๋ฅผ ๋น๊ณต๊ฐ๋ก ์ ์งํ๊ณ ์ถ์ต๋๋ค.
ํธ์ ๋ด์ ๊ฐ๊ธฐ
์๋
ํ์ธ์, "๊ธฐ์ ๋ฐ ๋๊ตฌ"๋ชฉ๋ก์ ThreeJS๋ฅผ ์ถ๊ฐํ๊ณ ์ถ๊ธฐ ๋๋ฌธ์ ๋ก๊ณ ๋ฅผ ๋ง๋ค์์ต๋๋ค (์ผ๊ด์ฑ์ ์ํด "๋ก๊ณ ๋ก ํ
์คํธ"๋ฅผ ์ฌ์ฉํ์ง ์์์ต๋๋ค). MIT ๋ผ์ด์ผ์ค.
์ด๊ฒ์ three.js ๋ก๊ณ ์ ๋๋ค.
https://docs.google.com/drawings/d/1kVcyy3Ibe_Q98zH0auXK-L8vahBWLBuo1aN7fk5M_FM/edit?usp=sharing
2 ๋ ์ ์ ๋์์ธํ๋๋ฐ ์์ง ๊ณต์ ์ฌ์ดํธ์ ์ฌ๋ฆด ์ ์์์ด์ ๐
@mrdoob ์ข์์, ์ข์์. ์ฌ๊ธฐ ๋ด ์์ด๋์ด ์ค ์ผ๋ถ๊ฐ ์์ต๋๋ค. ์ผ๊ฐํ์ด ๊ฐ์ฅ ์ ํฉํ๋ค๋ ๋ฐ ๋์ํฉ๋๋ค. :)
์ด๊ฒ๋ค ๊ฐ๊ฐ์๋ ๋ณด์ด๋ ๊ฒ๋ณด๋ค ์กฐ๊ธ ๋ ๊น์ด๊ฐ ์์ง๋ง ๋๋ ๊ทธ๊ฒ์ ๋งก๊ธธ ๊ฒ์ ๋๋ค.
@mrdoob ๋ก๊ณ ์ ๋ฌธ์ ๊ฐ ๋ ์์๋ ํ ๊ฐ์ง๋ ์์ ๋ฒ์ ์
๋๋ค. ์ถ์ํ๋ฉด ์ผ๊ฐํ์ด ์ ๋ง ์์์ง๋๋ค. ๋๋ ๋ ๋๊บผ์ด ๋ฒ์ ์ ์๋ ํ ๊ฒ์
๋๋ค.
์๋ฅผ ๋ค์ด ํ
์คํธ ์์ ๊ธฐํธ๋ฅผ ๋ฐฐ์นํด์ผ ํ ๋ ๊ฐ๋๊ฐ ๋ค๋ฅธ ๊ตฌ์ฑ์์ ์ ์๋ํ์ง ์์ ์๋ ์์ต๋๋ค. (์๋ฅผ ๋ค์ด ๋ ์ปดํฉํธํ๊ฒ ๋ง๋ค๊ธฐ ์ํด)
@mrdoob ๋์์ด๋๋ก์ ์ ๋ three.js๋ฅผ ์ข์ํฉ๋๋ค! ๋ก๊ณ ๋ ๊ธฐํ ๋์์ธ์ ๊ณต์ง๋ก ๊ณตํํ๊ณ ์ถ์ ๋ถ๋ค์ด ๋ง๊ธฐ ๋๋ฌธ์ ์๊ท๋ชจ ํ์ ๊ตฌ์ฑํด์ผํ๋ค๊ณ ์๊ฐํฉ๋๋ค. ๊ทธ๋ค์ three.js์์ ๋์ ๊ฐ์ ์ด์ ์ ๊ฐ์ง ์ ์์ผ๋ฉฐ ๊ณต์ ๋ก๊ณ ๋ฅผ ๊ฐ๋ ๊ฒ์ด ์ ์ ๋ ํ์ํฉ๋๋ค.
์์ ๋์์ธ ํ ๋ก๊ณ ๋ ๊ต์ฅํ๋ฉฐ ์ ๋ @EskelCz ์ ๊ฐ์ ๊ฒฌํด๋ฅผ
1, ์ผ๊ฐํ์ด ์ข์ต๋๋ค.
2, ์ถ์ ํ ๋ ์ ๋ง ์์ต๋๋ค.
๊ทธ๋์ ๋๋ ๋น์ ์ ์์ด๋์ด์ ๋ฐ๋ผ ๊ทธ๊ฒ์ ๋ค๋ฌ๊ณ ๋ ์์ ์ ์ด๊ณ ํ๋ คํ๋ฉฐ ๋์ค์ ์ผ๋ก ๋ง๋ค ์ ์์ต๋๋ค.
๋ด๊ฐ ๋์์ด ๋ ์ ์์ต๋๋ค.
๋๋ ๊ฐ์ธ์ ์ผ๋ก ์์ ํฌ๊ธฐ์ ๋ฌธ์ ๋ฅผ ๋ณด์ง ๋ชปํฉ๋๋ค. ์์ด์ฝ์ผ๋ก ์๋ํ์ง ์์ง๋ง ์์ฃผ ์์ ํฌ๊ธฐ๋ก ์ ๋ณด์ ๋๋ค.
์ฌ๊ธฐ์์๋ ๋๋น๊ฐ 80px๋ก ์กฐ์ ๋์ด ์์ง๋ง ์ฝ๊ฐ ํ๋ฆฟํ์ง๋ง ๋ฒกํฐ ํ์ผ์์ ํฌ๊ธฐ๋ฅผ ์กฐ์ ํ์ฌ ์์ ํ ์ ์์ต๋๋ค.
์ด๋ณด๋ค ์๊ฒ ๋ณด์ด๋ ๋ก๊ณ ๊ฐ ํ์ํฉ๋๊น?
@looeee ์์ด์ฝ์ผ๋ก ์ธํฐ๋ท์์ 16px * 16px๊น์ง ๋ด๋ ค๊ฐ ์ ์์ต๋๋ค. ์ :
๊ทธ๋ฆฌ๊ณ ์ด ํ๋น์ฝ์ SVG ํ์์ ์ง์ํ์ง ์์ต๋๋ค.
์ฐ๋ฆฌ๋ ๋ค์ํ ํฌ๊ธฐ๋ก ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ด ๋ง๋ค๋ ๊ฒ์ ์๊ณ ์์ต๋๋ค.
์ ๋ฅผ ํผ๋์ค๋ฝ๊ฒํ๋ ๋ช ๊ฐ์ง ๋ฌธ์ ๊ฐ ์์ต๋๋ค.
1, ํ์ .
๋ก๊ณ ๊ฐ ์ฝ 43.643๋ ํ์ ํ๋ ๊ฐ๋๋ฅผ ํ
์คํธํฉ๋๋ค. ์ค๋๋ ฅ์๋ ์ด์ ๊ฐ ์์ต๋๊น?
2, ๋ถ๋ฌธ.
4๋ก ๋๋ ์ด์ ๋ ๋ฌด์์
๋๊น? ๋จ์ํ์ง ์๊ฑฐ๋ ๋ ๋ณต์กํ์ง ์์ต๋๊น?
3, ์คํธ๋กํฌ ํญ.
๋ ์ ๊ฒ ๋๋๊ณ ๋ ๊ฐํ๊ฒ ์ธ ์ ์์ต๋๊น?
์์ด์ฝ์ผ๋ก ์ธํฐ๋ท์์ 16px * 16px๊น์ง ์ค์ผ ์ ์์ต๋๋ค.
์, ์ ๋ ์๊ณ ์์ต๋๋ค. ์ ๊ฐ ์๋ฏธํ๋ ๋ฐ๋ 'three.js'๊ธ์๊ฐ์๋ ๋ก๊ณ ๊ฐ ์์ด์ฝ์ด ์๋๋ผ๋ ๊ฒ์ ๋๋ค. ํ์ง๋ง ์์ด์ฝ์ผ๋ก ์ฌ์ฉํ ์์๋ ๋ก๊ณ ๊ฐ ์์ผ๋ฉด ์ ์ฉ ํ ๊ฒ์ด๋ผ๋ ๋ฐ ๋์ํฉ๋๋ค. ์ฌ๊ธฐ์์ ์ฝ๊ฐ์ ํ ์คํธ๋ฅผ ์ํํ์ต๋๋ค.
64x64px :
32x32px :
16x16px :
๋ถํํ๋ ์ด๊ฒ๋ค์ ์ฌ๊ธฐ์ ์ด๋ค ์ข ๋ฅ์ ์ค์ผ์ผ๋ง์ด ์ ์ฉ๋ ๊ฒ์ฒ๋ผ ๋ณด์ด๋ฏ๋ก ์ฌ๊ธฐ์์ ๋ช ํํ๊ฒ ๋ณผ ์๋ ์์ง๋ง 32x32๋ก ๋ฎ์ถ๋ ๊ฒ์ด ์ข์ง๋ง 16x16์ ๋ ๋ง์ ์์ ์ด ํ์ํฉ๋๋ค.
์๋ณธ ํ์ผ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค. https://drive.google.com/open?id=0B6LojVT90-hsd3hlWHNSUFJUVmc
1, ํ์ .
๋ก๊ณ ๊ฐ ํ์ ํ๋ ๊ฐ๋๊ฐ ์ฝ 43.643 ๋์ธ ์ง ํ ์คํธํฉ๋๋ค. ์ค๋๋ ฅ์๋ ์ด์ ๊ฐ ์์ต๋๊น?
์ด๋ป๊ฒ ๋ ์ณ๊ณ ๋ ํนํ๋ค๊ณ ๋๊ผ์ต๋๋ค.
2, ๋ถ๋ฌธ.
4๋ก ๋๋ ์ด์ ๋ ๋ฌด์์ ๋๊น? ๋จ์ํ์ง ์๊ฑฐ๋ ๋ ๋ณต์กํ์ง ์์ต๋๊น?
์ผ์ข ์ ๋ ํนํ ๋๋.
์ฒซ ๋ฒ์งธ๋ ์ ค๋ค์ด๊ณ ๋ ๋ฒ์งธ๋ ํต์ ๋๋ค ๐
์์ด์ฝ๋ณ๋ก ... ์ค์ ๋ก "3"์ด ์๋ต ๋ ๋ฒ์ ์ ๊ณํ ์ค์ด์์ต๋๋ค.
๋๋ ํ์ ์ ์ข์ํ๋ฉฐ ๋ง์ ๊ฐ์ฑ๊ณผ ๋ ์ฐฝ์ฑ์ ๋ถ์ฌํฉ๋๋ค. ๊ทธ๋ฌ๋ ๋๋ 2 ๊ฐ์ ๋ถํ (๊ฐ๋ฉด์ 3 ๊ฐ์ tris)์ ์ฌ์ฉํ๊ณ ๋ ์ผ๊ด๋๊ณ ๋จ์ํ๊ฒ ๋๊ปด์ง๋๋ค.
์ผ๋จ ํ์ ๋๋ฉด ํต ์์ด๋์ด์ ๋ฌธ์ ๊ฐ ์๋ค๊ณ ์๊ฐํฉ๋๋ค. ์ฌ์ค, 3D ์น์ ํตํฉ๋๊ณ ๋ณดํธ์ ์ธ ํต์ฌ / ํต์ผ๋ก์ threejs์ ์์ด๋์ด๋ ๋ฉ์ง๋๋ค.
๋๋ @feiss์ ๋์ํ๋ค. ๋๋ ๊ทธ๊ฒ์ ๋ณผ ๋ ๋ด ๋ง์์ด ์ธก๋ฉด์์๋ 3 ๊ฐ์ ์ผ๊ฐํ์๋ณด๊ณ 3 ๊ฐ์ ๊ทธ๋ฃน์ผ๋ก ๊ทธ๋ฃนํํ๋ ๊ฒฝํฅ์ด ์๊ธฐ ๋๋ฌธ์ ๋ ๋ฒ์งธ ๊ฒ์ ์ ํธํ๋ค.
:)
2D ๋ก๊ณ ๋ three.js์ ์ ํฉํ์ง ์๋ค๊ณ ์๊ฐํฉ๋๋ค. ๊ทธ๊ฒ์ ์ฌ๋ฉด์ฒด๋ก ๋ฐ๊ฟ ์ ์์ต๋๋ค.
@WestLangley ๋ ์ด๊ฒ์ด ์ ์์ ์๋์ธ์ง ํ์คํ์ง ์์ง๋ง mrdoob์ ๋ฒ์ ๊ณผ ๋ค๋ฅธ ๋ก๊ณ ๋ณํ์ 3D ๋ฉ์ฌ ๋ฐ ํ๋ธ๋ก ํด์ ํ ์ ์์ต๋๋ค. ๊ฐ์ฅ์๋ฆฌ๊ฐ ์ ๊ฑฐ ๋ fernardojsg ๋ฒ์ ์ด ๋ ์ ๋ณด์
๋๋ค.
@WestLangley 2D ์ผ๊ฐํ ๋ก๊ณ ์ ๋ํ ์์ด๋์ด๋ ๋ถ๋ถ์ ์ผ๋ก๋ ๋๋ด์ด์์ต๋๋ค.
์๋ ๋ก๊ณ ๋ ํ๋ฅญํ๋ค๊ณ ์๊ฐํ์ง๋ง ์์น, ํฌ๊ธฐ ์กฐ์ , ํ ์คํธ ๋ฐฐ์น ๋ฐ ๋๋น์ ๋ํ ์ฝ๊ฐ์ ์กฐ์ ์ด ํ์ํฉ๋๋ค!
๊ทธ๋๋ ํ ์คํธ ์ํธ๊ฐ ํ์ํ ๊ฒ ๊ฐ์ต๋๊น?
http://patorjk.com/software/taag/#p = display & f = Dr % 20Pepper & t = Three.js
https://threejs.org/docs/ ์์ ์ฝ์์ ๋ณธ ์ ์ด
๋ค, ๊ทธ๊ฒ์ด ์ ๊ฐ ์ ์ํ ์ด์ ์ ๋๋ค! ๋๋ ๊ทธ๊ฒ์ ๋ก๊ณ ์ ์ด๋ป๊ฒ ๋ ํตํฉ ํ ์ ์๊ธฐ๋ฅผ ๋ฐ๋๋๋ค.
์ถ์ : ๊ทธ๊ฑด ๊ทธ๋ ๊ณ , ๋๋ ๋น์ ์ด ์ด๋ป๊ฒ ๊ธ๋ก๋ฒ ํฉํ ๋ฆฌ๋ฅผ ๋ง๋ค๊ณ , ์ด๋ป๊ฒ Object.assignProperty.์ ๊ฒ๋ค์ ๊ตฌํํ๋์ง ์กฐ์ฌํ์ต๋๋ค. ํํ ๋ฆฌ์ผ์ ๋ง๋ค๊ฑฐ๋ ๋งํฌ ํ ์ ์์ต๋๊น? ๋น์ ์ดํ๋ ๋ฐฉ์์ผ๋ก ๊ฒ์ ์์ง์ ๋ง๋๋ ๋ฒ์ ๋ฐฐ์ฐ๊ณ ์ถ๊ธฐ ๋๋ฌธ์ ๋๋ค!
์ด๋ฏธ ๊ณต์ ๋ก๊ณ ๊ฐ ์์ต๋๋ค!
์ ์ด๋ ์ํค โโ๋ฏธ๋์ด์ ๋ฐ๋ฅด๋ฉด ๐คฃ
https://commons.wikimedia.org/wiki/File : Three.js_logo.png
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
์ด๋ฏธ ๊ณต์ ๋ก๊ณ ๊ฐ ์์ต๋๋ค!
์ ์ด๋ ์ํค โโ๋ฏธ๋์ด์ ๋ฐ๋ฅด๋ฉด ๐คฃ
https://commons.wikimedia.org/wiki/File : Three.js_logo.png