💪 Three w/ GIS DEVELOPER

Preface

📌 개발 공부 6개월 차인 to-be 개발자의 자습 블로그🙂ﾠJAN 16 ~ 22, 2022

현재 상태
맨날 "궁금하다, 해보고 싶다, 언젠가 해야지" 하지 말고 한 번 도전해 본 쓰리제이에스!!

Three

Three.js의 기본 구성 요소
출처 : GIS DEVELOPER

Installation

1. VS Code 등 editor 필요
2. Three.js homepage에서 'download' click
3. VS Code 왼쪽 menu 중 'Run and Debug' 선택 후 'Create launch.json' click
4. browser 선택
5. (Run → Start Debugging)
6. web server ('live server 등') 설치 후 실행

Geometry

정의

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);

Material

정의

3차원 객체의 색체나 투명도 등을 정의한다.
Geometry와 함께 Mesh를 구성하는 요소이다.

특징

모든 재질은 Material class를 상속받는다. (모든 재질은 Material class의 속성을 사용할 수 있다.)
e.g. visible, transparent, opacity, depthTest, depthWrite, side...
재질은 자신의 속성 값 변화와 외부 광원의 영향에 민감하게 반응한다.

종류

• Mesh
  • MeshBasicMaterial
  • MeshLambertMaterial
  • MeshPhongMaterial
  • PBR (Physically Based Rendering)
    • MeshStandardMaterial
    • MeshPhysicalMaterial
• Line
  • LineBasicMaterial
  • LineDashedMaterial
• Points
  • PointsMaterial

Mesh material에서 texture를 표현하기 위한 속성

• map
  • map
  • alphaMap
  • aoMap
  • displacementMap
  • lightMap
  • metalnessMap
  • normalMap
  • roughnessMap
  • minmap
• texture
  • repeat.x, repeat.y
  • wrapS, wrapT
  • offset.x, offset.y
  • rotation
  • center.x, center.y
  • magfilter, minfilter

Mesh (Object3D)

정의

Mesh, Line, Position 등의 파생 class로 3차원 객체를 화면에 표시한다.
position, rotation, scale이라는 속성을 가지며 이는 4X4 크기의 행렬 정보로 변환된다.

Object3D의 파생 class

• Mesh : 삼각형 면으로 구성된 객체를 표현
  • x, y, x (기본 값 : 0)
• Line : 선형 객체를 표현
  • Line
  • LineLoop
    • x, y, x (기본 값 : 0)
• Points : 점을 표현
  • x, y, x (기본 값 : 1)

속성

• position : 위치
  • x, y, x (기본 값 : 0)
• rotation : 회전
  • x, y, x (기본 값 : 0)
• scale : 크기
  • x, y, x (기본 값 : 1) (1은 원래 크기, 2는 두 배...)

Scene Graph

정의

3차원 공간 상의 장면 구성으로서 3차원 객체를 공간 상에 구성하는 것은 scene graph를 code로 작성하는 것이다.

객체 이름, 객체 형식, 부모 - 자식 관계를 도표로 나타낸 후 code로 옮긴다.
(예시가 js file 전체라 못 옮기겠음...!)

Custom Geometry

• position
• normal
• color
• uv
• vertex index

Light

light class를 상속 받는 여섯 개의 광원 class가 있다.
예시에서는 광원을 하나씩 사용했지만 실제로는 보다 나은 rendering 결과를 위해 여러 종류의 광원을 설치하여 사용한다.

• 환경광 혹은 주변광
  • THREE.AmbientLight(빛의 색상, 빛의 세기)
    • 빛의 색상과 빛의 세기를 인자로 받음
    • 단순히 scene에 존재하는 모든 물체에 대해 단일 색상으로 rendering하도록 함
    • 세기를 많이 낮추어 광원의 영향을 받지 못하는 물체도 살짝 보여지게 하는 데에 사용
  • THREE.HemisphereLight(위에서 비치는 빛의 색상, 아래에서 비치는 빛의 색상, 빛의 세기)
    • 빛의 색상 두 가지와 빛의 세기를 인자로 받음
• 방향성을 가지는 광
  • THREE.DirectionalLight(빛의 색상, 빛의 세기)
    • 태양처럼 빛과 물체 간의 거리에 상관없이 동일한 빛의 효과를 줌
    • 그렇기 때문에 이 빛의 position과 target 속성의 position으로 결정되는 방향만이 의미가 있음
  • THREE.PointLight(빛의 색상, 빛의 세기)
    • 빛의 색상 두 가지와 빛의 세기를 인자로 받음
    • 빛이 광원 위치에서 사방으로 퍼져나감
    • light.distance 요소를 통해 지정된 거리까지만 광원의 영향이 미침
  • THREE.SpotLight(빛의 색상, 빛의 세기)
    • 빛의 색상 두 가지와 빛의 세기를 인자로 받음
    • light.penumbra 요소를 통해 빛의 감쇄를 조정
  • THREE.RectAreaLight(빛의 색상, 빛의 세기, 광원의 가로 크기, 광원의 세로 크기)
    • 빛의 색상, 빛의 세기, 광원의 가로 및 세로 크기를 인자로 받음
    • 마치 형광등이나 창문에서 들어오는 광원
    • 두 개의 import code 필요
    • 이전에는 광원의 방향을 대상의 위치로 지정했던 것과 다르게 각도로 지정함

Camera

Object3D class를 상속받는 Camera class에 두 가지 기본적인 camera가 있다.

• THREE.PerspectiveCamera(fovy, aspect, zNear, zFar)
  • 가까이 있는 물체가 멀리 있는 물체보다 상대적으로 크게 보이도록 원근감을 표현해서 rendering
  • fovy : 절두체의 높이 방향에 대한 각도 (단위 : degree)
  • aspect : 절두체의 가로 길이를 세로 길이로 나눈 비율
  • zNear, zFar : camera로부터의 거리이며, 이 영역의 물체만 rendering됨
• THREE.OrthographicCamera(xLeft, xRight, yTop, yBottom, zNear, zFar)
  • 물체 간의 거리감 (원근감) 없이 물체의 크기대로 rendering
  • DOM 요소의 크기에 따라 xLeft, xRight의 값이 지정되므로 DOM 요소의 크기가 변경되면 camera의 xLeft와 xRight 값도 변경해 주어야 함

Shadow

Three.js에서 그림자를 제공하는 광원은 THREE.PointLight, THREE.PointLight, THREE.SpotLight이다.
그림자를 rendering하기 위해 객체에 세 가지를 설정해야 한다.

• renderer
• 광원
  • 그림자를 지원하는 광원은 모두 shadow라는 속성을 갖고, 이 shadow 속성에는 camera 속성이 존재하는데, 이 camera가 그림자에 대한 texture image를 생석하기 위해 사용됨
• model

Endnote

🔗 related documents

threejs.org

🙇 the source of this content

GIS DEVELOPER