๐ ๊ฐ๋ฐ ๊ณต๋ถ 6๊ฐ์ ์ฐจ์ธ to-be ๊ฐ๋ฐ์์ ์์ต ๋ธ๋ก๊ทธ๐๏พ JAN 16 ~ 22, 2022
ํ์ฌ ์ํ
๋งจ๋ "๊ถ๊ธํ๋ค, ํด๋ณด๊ณ ์ถ๋ค, ์ธ์ ๊ฐ ํด์ผ์ง" ํ์ง ๋ง๊ณ ํ ๋ฒ ๋์ ํด ๋ณธ ์ฐ๋ฆฌ์ ์ด์์ค!!
Three.js์ ๊ธฐ๋ณธ ๊ตฌ์ฑ ์์
์ถ์ฒ : GIS DEVELOPER
BufferGeometry class๋ฅผ ํตํด ์ ์๋๋ค.
3์ฐจ์ ๊ฐ์ฒด์ ํ์ ๋ฑ์ ์ ์ํ๋ค.
Material๊ณผ ํจ๊ป Mesh๋ฅผ ๊ตฌ์ฑํ๋ ์์์ด๋ค.
(์์) Geometry(โ ์ธ์1, โก ์ธ์2, โข ์ธ์3, ..., โ ์ธ์N)
: OO ๋ชจ์
BoxGeometry(โ ๊ฐ๋ก, โก ์ธ๋ก, โข ๊น์ด, โฃ ๊ฐ๋ก ๋ฐฉํฅ์ ๋ํ ๋ถํ ๊ฐ์, โค ์ธ๋ก ๋ฐฉํฅ์ ๋ํ ๋ถํ ๊ฐ์, โฅ ๊น์ด ๋ฐฉํฅ์ ๋ํ ๋ถํ ๊ฐ์)
: ์ก๋ฉด์ฒด ๋ชจ์
ย ย ย ย โ ๊ฐ๋ก (๊ธฐ๋ณธ ๊ฐ : 1)
ย ย ย ย โก ์ธ๋ก (๊ธฐ๋ณธ ๊ฐ : 1)
ย ย ย ย โข ๊น์ด (๊ธฐ๋ณธ ๊ฐ : 1)
ย ย ย ย โฃ ๊ฐ๋ก ๋ฐฉํฅ์ ๋ํ ๋ถํ ๊ฐ์ (๊ธฐ๋ณธ ๊ฐ : 1)
ย ย ย ย โค ์ธ๋ก ๋ฐฉํฅ์ ๋ํ ๋ถํ ๊ฐ์ (๊ธฐ๋ณธ ๊ฐ : 1)
ย ย ย ย โฅ ๊น์ด ๋ฐฉํฅ์ ๋ํ ๋ถํ ๊ฐ์ (๊ธฐ๋ณธ ๊ฐ : 1)
CircleGeometry(โ ๋ฐ์ง๋ฆ, โก ๋ถํ ๊ฐ์, โข ์์ ๊ฐ๋, โฃ ์ฐ์ฅ ๊ฐ๋)
: ์ํ ๋ชจ์
ย ย ย ย โ ๋ฐ์ง๋ฆ (๊ธฐ๋ณธ ๊ฐ : 1)
ย ย ย ย โก ๋ถํ ๊ฐ์ (๊ธฐ๋ณธ ๊ฐ : 8) (์์น๊ฐ ๋์ ์๋ก ์์ ๊ฐ๊น์ด ๋ชจ์์ด ๋จ)
ย ย ย ย โข ์์ ๊ฐ๋ (๊ธฐ๋ณธ ๊ฐ : 0)
ย ย ย ย โฃ ์ฐ์ฅ ๊ฐ๋ (๊ธฐ๋ณธ ๊ฐ : 2pi)
ConeGeometry(โ ๋ฐ๋ฉด ์์ ๋ฐ์ง๋ฆ, โก ์๋ฟ์ ๋์ด, โข ๋๋ ๋ฐฉํฅ์ ๋ํ ๋ถํ ๊ฐ์, โฃ ๋์ด ๋ฐฉํฅ์ ๋ํ ๋ถํ ๊ฐ์, โค ๋ฐ๋ฉด ๊ฐ๋ฐฉ ์ฌ๋ถ, โฅ ์์ ๊ฐ๋, โฆ ์ฐ์ฅ ๊ฐ๋)
: ์๋ฟ ๋ชจ์
ย ย ย ย โ ๋ฐ๋ฉด ์์ ๋ฐ์ง๋ฆ (๊ธฐ๋ณธ ๊ฐ : 1)
ย ย ย ย โก ์๋ฟ์ ๋์ด (๊ธฐ๋ณธ ๊ฐ : 1)
ย ย ย ย โข ๋๋ ๋ฐฉํฅ์ ๋ํ ๋ถํ ๊ฐ์ (๊ธฐ๋ณธ ๊ฐ : 8) (์์น๊ฐ ๋์ ์๋ก ๋ฐ๋ฉด์ด ์์ ๊ฐ๊น์ด ๋ชจ์์ด ๋จ)
ย ย ย ย โฃ ๋์ด ๋ฐฉํฅ์ ๋ํ ๋ถํ ๊ฐ์ (๊ธฐ๋ณธ ๊ฐ : 1) (์์น๊ฐ ๋์ ์๋ก ์ ๋ฉด์ ์ธต์ด ์๊น)
ย ย ย ย โค ๋ฐ๋ฉด ๊ฐ๋ฐฉ ์ฌ๋ถ (๊ธฐ๋ณธ ๊ฐ : false)
ย ย ย ย โฅ ์์ ๊ฐ๋ (๊ธฐ๋ณธ ๊ฐ : 0)
ย ย ย ย โฆ ์ฐ์ฅ ๊ฐ๋ (๊ธฐ๋ณธ ๊ฐ : 2pi)
CylinderGeometry(โ ๋ฐ๋ฉด์ ๋ฐ์ง๋ฆ, โก ์๋ฉด์ ๋ฐ์ง๋ฆ, โข ์ํต์ ๋์ด, โฃ ๋๋ ๋ฐฉํฅ์ ๋ํ ๋ถํ ๊ฐ์, โค ๋์ด ๋ฐฉํฅ์ ๋ํ ๋ถํ ๊ฐ์, โฅ ๋ฐ๋ฉด ๋ฐ ์๋ฉด ๊ฐ๋ฐฉ ์ฌ๋ถ, โฆ ์์ ๊ฐ๋, โง ์ฐ์ฅ ๊ฐ๋)
: ์ํต ๋ชจ์
ย ย ย ย โ ๋ฐ๋ฉด์ ๋ฐ์ง๋ฆ (๊ธฐ๋ณธ ๊ฐ : 1)
ย ย ย ย โก ์๋ฉด์ ๋ฐ์ง๋ฆ (๊ธฐ๋ณธ ๊ฐ : 1)
ย ย ย ย โข ์ํต์ ๋์ด (๊ธฐ๋ณธ ๊ฐ : 1)
ย ย ย ย โฃ ๋๋ ๋ฐฉํฅ์ ๋ํ ๋ถํ ๊ฐ์ (๊ธฐ๋ณธ ๊ฐ : 8) (์์น๊ฐ ๋์ ์๋ก ๋ฐ๋ฉด์ด ์์ ๊ฐ๊น์ด ๋ชจ์์ด ๋จ)
ย ย ย ย โค ๋์ด ๋ฐฉํฅ์ ๋ํ ๋ถํ ๊ฐ์ (๊ธฐ๋ณธ ๊ฐ : 1) (์์น๊ฐ ๋์ ์๋ก ์ ๋ฉด์ ์ธต์ด ์๊น)
ย ย ย ย โฅ ๋ฐ๋ฉด ๋ฐ ์๋ฉด ๊ฐ๋ฐฉ ์ฌ๋ถ (๊ธฐ๋ณธ ๊ฐ : false)
ย ย ย ย โฆ ์์ ๊ฐ๋ (๊ธฐ๋ณธ ๊ฐ : 0)
ย ย ย ย โง ์ฐ์ฅ ๊ฐ๋ (๊ธฐ๋ณธ ๊ฐ : 2pi)
SphereGeometry(โ ๋ฐ์ง๋ฆ, โก ์ํ ๋ฐฉํฅ์ ๋ํ ๋ถํ ๊ฐ์, โข ์์ง ๋ฐฉํฅ์ ๋ํ ๋ถํ ๊ฐ์, โฃ ์ํ ๋ฐฉํฅ์ ๋ํ ์์ ๊ฐ๋, โค ์ํ ๋ฐฉํฅ์ ๋ํ ์ฐ์ฅ ๊ฐ๋, โฅ ์์ง ๋ฐฉํฅ์ ๋ํ ์์ ๊ฐ๋, โฆ ์์ง ๋ฐฉํฅ์ ๋ํ ์ฐ์ฅ ๊ฐ๋)
: ๊ตฌ ๋ชจ์
ย ย ย ย โ ๋ฐ์ง๋ฆ (๊ธฐ๋ณธ ๊ฐ : 1)
ย ย ย ย โก ์ํ ๋ฐฉํฅ์ ๋ํ ๋ถํ ๊ฐ์ (๊ธฐ๋ณธ ๊ฐ : 32) (์์น๋ฅผ ๋ฎ์ถ๋ฉด ๊ฐ์ด ์๊น)
ย ย ย ย โข ์์ง ๋ฐฉํฅ์ ๋ํ ๋ถํ ๊ฐ์ (๊ธฐ๋ณธ ๊ฐ : 16)
ย ย ย ย โฃ ์ํ ๋ฐฉํฅ์ ๋ํ ์์ ๊ฐ๋ (๊ธฐ๋ณธ ๊ฐ : 0)
ย ย ย ย โค ์ํ ๋ฐฉํฅ์ ๋ํ ์ฐ์ฅ ๊ฐ๋ (๊ธฐ๋ณธ ๊ฐ : 2pi)
ย ย ย ย โฅ ์์ง ๋ฐฉํฅ์ ๋ํ ์์ ๊ฐ๋ (๊ธฐ๋ณธ ๊ฐ : 0)
ย ย ย ย โฆ ์์ง ๋ฐฉํฅ์ ๋ํ ์ฐ์ฅ ๊ฐ๋ (๊ธฐ๋ณธ ๊ฐ : pi)
RingGeometry(โ ๋ด๋ถ ๋ฐ์ง๋ฆ, โก ์ธ๋ถ ๋ฐ์ง๋ฆ, โข ๊ฐ์ฅ์๋ฆฌ ๋๋ ๋ฐฉํฅ์ผ๋ก์ ๋ถํ ๊ฐ์, โฃ ๋ด๋ถ ๋ฐฉํฅ์ ๋ํ ๋ถํ ๊ฐ์, โค ์์ ๊ฐ๋, โฅ ์ฐ์ฅ ๊ฐ๋)
: 2์ฐจ์ ๋ฐ์ง ๋ชจ์ (camera ์กฐ๋ฆฌ๊ฐ์ฒ๋ผ ์๊น)
ย ย ย ย โ ๋ด๋ถ ๋ฐ์ง๋ฆ (๊ธฐ๋ณธ ๊ฐ : 0.5)
ย ย ย ย โก ์ธ๋ถ ๋ฐ์ง๋ฆ (๊ธฐ๋ณธ ๊ฐ : 1)
ย ย ย ย โข ๊ฐ์ฅ์๋ฆฌ ๋๋ ๋ฐฉํฅ์ผ๋ก์ ๋ถํ ๊ฐ์ (๊ธฐ๋ณธ ๊ฐ : 8)
ย ย ย ย โฃ ๋ด๋ถ ๋ฐฉํฅ์ ๋ํ ๋ถํ ๊ฐ์ (๊ธฐ๋ณธ ๊ฐ : 1)
ย ย ย ย โค ์์ ๊ฐ๋ (๊ธฐ๋ณธ ๊ฐ : 0)
ย ย ย ย โฅ ์ฐ์ฅ ๊ฐ๋ (๊ธฐ๋ณธ ๊ฐ : 2pi)
PlaneGeometryโ ๋๋น, โก ๋์ด, โข ๋๋น ๋ฐฉํฅ์ ๋ํ ๋ถํ ๊ฐ์, โฃ ๋์ด ๋ฐฉํฅ์ ๋ํ ๋ถํ ๊ฐ์)
: 2์ฐจ์ ์ฌ๊ฐํ ๋ชจ์ (์ง๋ฆฌ ์ ๋ณด system์ธ GIS์์ 3์ฐจ์ ์งํ ๋ฑ์ ํํํ๋ ๋ฐ์ ์ฐ์)
ย ย ย ย โ ๋๋น (๊ธฐ๋ณธ ๊ฐ : 1)
ย ย ย ย โก ๋์ด (๊ธฐ๋ณธ ๊ฐ : 1)
ย ย ย ย โข ๋๋น ๋ฐฉํฅ์ ๋ํ ๋ถํ ๊ฐ์ (๊ธฐ๋ณธ ๊ฐ : 1)
ย ย ย ย โฃ ๋์ด ๋ฐฉํฅ์ ๋ํ ๋ถํ ๊ฐ์ (๊ธฐ๋ณธ ๊ฐ : 1)
TorusGeometryโ ๋ฐ์ง๋ฆ, โก ์์ชฝ ๋ฐ์ง๋ฆ(?), โข ๋ฐฉ์ฌ ๋ฐฉํฅ์ ๋ํ ๋ถํ ๊ฐ์, โฃ ์ํต์ ๋ํ ๋ถํ ๊ฐ์, โค ์ฐ์ฅ ๊ฐ๋์ ๊ธธ์ด)
: 2์ฐจ์ ๋ฐ์ง ๋ชจ์
ย ย ย ย โ ๋ฐ์ง๋ฆ (๊ธฐ๋ณธ ๊ฐ : 1)
ย ย ย ย โก ์์ชฝ ๋ฐ์ง๋ฆ(?) (๊ธฐ๋ณธ ๊ฐ : 0.4)
ย ย ย ย โข ๋ฐฉ์ฌ ๋ฐฉํฅ์ ๋ํ ๋ถํ ๊ฐ์ (๊ธฐ๋ณธ ๊ฐ : 8)
ย ย ย ย โฃ ์ํต์ ๋ํ ๋ถํ ๊ฐ์ (๊ธฐ๋ณธ ๊ฐ : 6) (์์น๊ฐ ๋์ ์๋ก ๊ฐ์ด ์๋ ๊ณก๋ฉด์ด ๋จ)
ย ย ย ย โค ์ฐ์ฅ ๊ฐ๋์ ๊ธธ์ด (๊ธฐ๋ณธ ๊ฐ : 2pi)
TorusKnotGeometry(โ ์ธ์1, โก ์ธ์2, โข ์ธ์3, โฃ ์ธ์4, โค ์ธ์5)
: ๋ฐฐ๋ฐฐ ๊ผฌ์ฌ์์... (ํ์ฉ๋๊ฐ ๋ฎ์์ ์ค๋ช
์๋ต)
โป ๋ชจ๋ '์์ ๊ฐ๋'์ '์ฐ์ฅ ๊ฐ๋'์ ๊ฐ๋
์ CircleGeometry
์ '์์ ๊ฐ๋' ๋ฐ '์ฐ์ฅ ๊ฐ๋'์ ๋์ผ
// ์์
const geometry = new THREE.BoxGeometry(1, 1, 1);
const geometry = new THREE.CircleGeometry(0.9, 16, Math.PI/2, Math.PI);
3์ฐจ์ ๊ฐ์ฒด์ ์์ฒด๋ ํฌ๋ช
๋ ๋ฑ์ ์ ์ํ๋ค.
Geometry์ ํจ๊ป Mesh๋ฅผ ๊ตฌ์ฑํ๋ ์์์ด๋ค.
๋ชจ๋ ์ฌ์ง์ Material class๋ฅผ ์์๋ฐ๋๋ค. (๋ชจ๋ ์ฌ์ง์ Material class์ ์์ฑ์ ์ฌ์ฉํ ์ ์๋ค.)
e.g. visible
, transparent
, opacity
, depthTest
, depthWrite
, side
...
์ฌ์ง์ ์์ ์ ์์ฑ ๊ฐ ๋ณํ์ ์ธ๋ถ ๊ด์์ ์ํฅ์ ๋ฏผ๊ฐํ๊ฒ ๋ฐ์ํ๋ค.
Mesh, Line, Position ๋ฑ์ ํ์ class๋ก 3์ฐจ์ ๊ฐ์ฒด๋ฅผ ํ๋ฉด์ ํ์ํ๋ค.
position
, rotation
, scale
์ด๋ผ๋ ์์ฑ์ ๊ฐ์ง๋ฉฐ ์ด๋ 4X4 ํฌ๊ธฐ์ ํ๋ ฌ ์ ๋ณด๋ก ๋ณํ๋๋ค.
position
: ์์นrotation
: ํ์ scale
: ํฌ๊ธฐ3์ฐจ์ ๊ณต๊ฐ ์์ ์ฅ๋ฉด ๊ตฌ์ฑ์ผ๋ก์ 3์ฐจ์ ๊ฐ์ฒด๋ฅผ ๊ณต๊ฐ ์์ ๊ตฌ์ฑํ๋ ๊ฒ์ scene graph๋ฅผ code๋ก ์์ฑํ๋ ๊ฒ์ด๋ค.
๊ฐ์ฒด ์ด๋ฆ, ๊ฐ์ฒด ํ์, ๋ถ๋ชจ - ์์ ๊ด๊ณ๋ฅผ ๋ํ๋ก ๋ํ๋ธ ํ code๋ก ์ฎ๊ธด๋ค.
(์์๊ฐ js file ์ ์ฒด๋ผ ๋ชป ์ฎ๊ธฐ๊ฒ ์...!)
light class๋ฅผ ์์ ๋ฐ๋ ์ฌ์ฏ ๊ฐ์ ๊ด์ class๊ฐ ์๋ค.
์์์์๋ ๊ด์์ ํ๋์ฉ ์ฌ์ฉํ์ง๋ง ์ค์ ๋ก๋ ๋ณด๋ค ๋์ rendering ๊ฒฐ๊ณผ๋ฅผ ์ํด ์ฌ๋ฌ ์ข
๋ฅ์ ๊ด์์ ์ค์นํ์ฌ ์ฌ์ฉํ๋ค.
THREE.AmbientLight(๋น์ ์์, ๋น์ ์ธ๊ธฐ)
THREE.HemisphereLight(์์์ ๋น์น๋ ๋น์ ์์, ์๋์์ ๋น์น๋ ๋น์ ์์, ๋น์ ์ธ๊ธฐ)
THREE.DirectionalLight(๋น์ ์์, ๋น์ ์ธ๊ธฐ)
THREE.PointLight(๋น์ ์์, ๋น์ ์ธ๊ธฐ)
light.distance
์์๋ฅผ ํตํด ์ง์ ๋ ๊ฑฐ๋ฆฌ๊น์ง๋ง ๊ด์์ ์ํฅ์ด ๋ฏธ์นจTHREE.SpotLight(๋น์ ์์, ๋น์ ์ธ๊ธฐ)
light.penumbra
์์๋ฅผ ํตํด ๋น์ ๊ฐ์๋ฅผ ์กฐ์ THREE.RectAreaLight(๋น์ ์์, ๋น์ ์ธ๊ธฐ, ๊ด์์ ๊ฐ๋ก ํฌ๊ธฐ, ๊ด์์ ์ธ๋ก ํฌ๊ธฐ)
Object3D class๋ฅผ ์์๋ฐ๋ Camera class์ ๋ ๊ฐ์ง ๊ธฐ๋ณธ์ ์ธ camera๊ฐ ์๋ค.
THREE.PerspectiveCamera(fovy, aspect, zNear, zFar)
THREE.OrthographicCamera(xLeft, xRight, yTop, yBottom, zNear, zFar)
Three.js์์ ๊ทธ๋ฆผ์๋ฅผ ์ ๊ณตํ๋ ๊ด์์ THREE.PointLight
, THREE.PointLight
, THREE.SpotLight
์ด๋ค.
๊ทธ๋ฆผ์๋ฅผ renderingํ๊ธฐ ์ํด ๊ฐ์ฒด์ ์ธ ๊ฐ์ง๋ฅผ ์ค์ ํด์ผ ํ๋ค.