Three.js 지오메트리(Geometry) #1

* https://threejs.org/manual/#ko/primitives을 통해 다양한 형태를 확인할 수 있습니다.

* ​https://threejs.org/manual/#ko/custom-buffergeometry​ 사용자 지정 Geometry

* 이 글 또한 Youtube. GIS DEVELOPER 님의 영상을 보고, 공부한 부분을 적어둔 내용입니다.

 

Geometry(지오메트리)는 Mesh 형태를 나타내는 속성값으로 사용이 되며, 기하학 객체의 정점 데이터입니다.

정육면체(cube), 면(plane), 개, 고양이, 사람, 나무, 건물 등 아주 다양한 것이 될 수 있죠. 

 

BufferGeometry는 3차원 Object 형상을 정의, Geometry를 형상하기 위해서는.

정점(x,y,z 좌표), 정점 인덱스, 수직 벡터, 정점 색상, 텍스쳐 랩핑을 위한 UV좌표, 사용자 정의 데이터가 있습니다.

3차원으로 시각화할때 GPU에 한 번에 전달됨.

 

BoxGeometry(가로,세로,깊이,가로 분할 수,세로 분할 수,깊이 분할 수). 박스 형태의 Geometry

기본값 (분할수)1

 

CircleGeometry(반지름값, 원판의 분할 수, 시작각도, 연장각도) 원판 형태의 Geometry

분할수가 높을 수록 원형태에 가까워짐. 

각도의 단위는 라디안.

기본값은 (반지름)1, (분할갯수)8 , (시작각도)0, (연장각도)2π

 

ConeGeometry(밑면반지름값,높이,둘레 방향에 대한 분할 개수, 높이 방향에 대한 분할 개수,밑면 유무,시작각도,연장각도) 원뿔 형태의 Geometry

밑면의 유무값을 true로 하면은, 밑면이 없어진다.

기본값은 (밑면 반지름)1, (높이)1, (둘레 방향 분할 개수) 8, (높이 방향 분할 개수) 1, (밑면유무) false, (시작각도)0, (연장각도)2π

 

CylinderGeometry(윗면반지름값,밑면반지름값,높이,둘레 방향 분할 개수,높이 방향 분할 개수,윗밑면 유무,시작각도,연장각도) 원통형태의 Geometry

기본값은 (윗면 반지름)1, (밑면 반지름)1, (높이)1, (둘레 방향 분할 개수) 8, (높이 방향 분할 개수) 1, 윗밑면유무 false,(시작각도)0, (연장각도)2π

 

SphereGeometry(반지름,수평 방향 분할 개수,수직 방향 분할 개수,수평 방향 시작각도,수평 방향연장각도,수직 방향 시작각도,수직 방향연장각도) 구형태의 Geometry

기본값은 (반지름)1, (수평 방향 분할 개수)32, (수직 방향 분할 개수)16, (수평 방향 시작각도)0, (수평 방향 연장각도)2π

,(수직 방향 시작각도)0, (수직 방향 연장각도)2π

 

RingGeometry(내부 반지름,외부 반지름,가장자리 분할 개수,내부 분할 개수,시작각도,연장각도) 2차원 반지형태의 Geometry

기본값 (내부 반지름)0.5, (외부 반지름)1, (가장자리 분할 개수)8, (내부 분할 개수)1,(시작각도)0, (연장각도)2π

 

PlaneGeometry(너비,높이,너비 분할 개수,높이 분할 개수) 사각형태의 Geometry

기본값 (너비)1, (높이)1, (너비 분할 개수)1, (높이 분할 개수)1

 

TorusGeometry(반지름,원통 반지름,방사 방향 분할 개수,긴 원통 분할 개수,연장 각 길이) 3차원 반지 형태의 Geometry

TorusGeometry은 긴 원통으로 360도로 서로 이어져 있다.

긴 원통 분할 개수가 높을 수록 원에 가까워 짐.

기본값은 (반지름)1, (원통 반지름)0.4, (방사 방향 분할 개수)8, (긴 원통 분할 개수)6, (연장 각 길이)2π

 

TorusKnotGeometry(반지름,원통 반지름,방사 방향 분할 개수,긴 원통 분할 개수,서로 꼬아진 횟수,서로 연결된 원통 개수) 서로 꼬아진 링 형태의 Geometry 

활용도가 높지 않음.

import * as THREE from "../../build/three.module.js";

const geometry = new THREE.BoxGeometry(1, 1, 1, 2, 2, 2); 
// 가로,세로,깊이,가로 분할 수,세로 분할 수,깊이 분할 수

const geometry = new THREE.CircleGeometry(1,8,0,Math.PI * 2); 
// 반지름값,원판의 분할 수,시작각도,연장각도

const geometry = new THREE.ConeGeometry(1,1,8,1,false,0,Math.PI * 2); 
// 밑면반지름값,높이,둘레 방향에 대한 분할 개수, 높이 방향에 대한 분할 개수,
밑면 유무,시작각도,연장각도

const geometry = new THREE.CylinderGeometry(1,1,1,8,1,false,0,Math.PI * 2); 
// 윗면반지름값,밑면반지름값,높이,둘레 방향 분할 개수,높이 방향 분할 개수,윗밑면 유무,시작각도,연장각도

const geometry = new THREE.SphereGeometry(1,32,16,0,Math.PI * 20,0,Math.PI * 2); 
// 반지름,수평 방향 분할 개수,수직 방향 분할 개수,수평 방향 시작각도,수평 방향연장각도,수직 방향 시작각도,수직 방향연장각도

const geometry = new THREE.RingGeometry(0.5,1,8,1,0,Math.PI * 2); 
// 내부 반지름,외부 반지름,가장자리 분할 개수,내부 분할 개수,시작각도,연장각도

const geometry = new THREE.PlaneGeometry(1,1,1,1); 
// 너비,높이,너비 분할 개수,높이 분할 개수

const geometry = new THREE.TorusGeometry(1,0.4,8,6,Math.PI * 2); 
// 반지름,원통 반지름,방사 방향 분할 개수,긴 원통 분할 개수,연장 각 길이

const geometry = new THREE.TorusKnotGeometry(0.6,0.1,64,32,3,4);
// 반지름,원통 반지름,방사 방향 분할 개수,긴 원통 분할 개수,서로 꼬아진 횟수,서로 연결된 원통 개수