Three.js module 활용 - (2) Geometry

[이전 글]

Three.js module 활용 - (1) Basic

 

---

해당 게시글은 2022.05.11에 깃허브로 작성되었으며

아래 유튜브 강의 영상을 수강하며 공부한 내용을 기재했습니다.

 

 

---

 

이어서 Geometry에 대해 더 자세히 알아보자.

 

1. 기본 세팅

이전 시간에 만들었던 01_basic.html, 01_basic.css, 01_basic.js를 복사하여 붙여넣기 한 후 파일명을 02_geometry로 변경한다.

 

그 후 02_basic.html 에서 css와 js를 import하는 부분의 파일명을 02_basic로 변경하고 이제 본격적으로 02_basic.js 파일을 수정해나가자.

 

---

 

2. 색상 변경 및 Line 추가

02_basic.js 파일 중 _setupModel 함수 부분을 아래와 같이 수정하자.

 

color가 515151(gray)인 box를 만들고 color가 ffff00(yellow)인 line(선) Material을 만들어

WireframeGeometry를 이용해 앞서 생성한 box geometry의 골격을 참조하여 lineMaterial 색상의 line을 만든다.

_setupModel() {
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  const fillMaterial = new THREE.MeshPhongMaterial({color: 0x515151});
  const cube = new THREE.Mesh(geometry, fillMaterial);

  const lineMaterial = new THREE.LineBasicMaterial({color: 0xffff00});
  const line = new THREE.LineSegments(
    new THREE.WireframeGeometry(geometry), lineMaterial);

  const group = new THREE.Group()
  group.add(cube);
  group.add(line);

  this._scene.add(group);
  this._cube = group;
}

만들어진 Mesh와 Line을 하나의 그룹으로 묶기 위해 Group을 생성하고 추가한다.

그리고 이를 scene에 추가함으로써 화면에 보여지도록 한다.

 

그럼 아래와 같이 라인이 보여지는 박스가 보여진다.

 

---

 

3. OrbitControls

(1) OrbitControls import

이제 사용자의 마우스 움직임에 따라 3D object가 움직여지도록 해볼텐데

이를 위해서 기존에 작성했던 자동으로 회전하는 코드인 아래 부분을 주석 처리하자.

update(time){
  time *= 0.001;
  // this._cube.rotation.x = time;
  // this._cube.rotation.y = time;
}

 

그리고 가장 중요한 기능을 담고있는 OrbitControls.js를 02_basic.js의 최상단에서 import한다.

import { OrbitControls } from '../examples/jsm/controls/OrbitControls.js';

 

OrbitControls.js를 import하기 위해 처리 과정이 필요한데 02_basic.html 파일 내에서 link 태그 바로 밑에 아래 코드를 추가한다.

  <script type="importmap">
    {
        "imports": {
            "three": "../build/three.module.js"
        }
    }
</script>

 

(2) 함수 작성

그리고 함수를 호출하는 부분 아래에 다음 함수를 추가로 호출해주는데

this._setupControls();

해당 함수의 내용은 아래와 같다.

_setupControls() {
  new OrbitControls(this._camera, this._divContainer);
}

OrbitControls객체를 생성할 때에는 camera객체와 마우스 이벤트를 받는 dom요소가 필요하다.

사용자의 마우스 움직임에 따라 3D object가 움직이는 것이 아닌, camera를 돌려감으로써 3D object가 움직이는 것처럼 보이게 하는 원리 이기 때문이다.

 

camera는 이전에 생성했던 camera로, dom 요소는 divContainer로 잡았다.

 

그 후 웹 페이지를 보면 다음과 같이 마우스에 따라 잘 움직이는 것을 볼 수 있다.

 

 

---

 

4. Geometry

(1) BoxGeometry

이제 본격적으로 우리가 다루고 있는 BoxGeometry에 대해 알아보자.

BoxGeometry는 가로, 세로, 깊이에 대한 크기와 함께 가로, 세로, 깊이 각각에 대한 분할(Segments) 개수로 정의된다.

이 가로, 세로, 깊이에 대한 분할수는 지정하지 않으면 기본값이 1인데 다음과 같이 이 값들을 모두 2로 지정해보자.

const geometry = new THREE.BoxGeometry(1, 1, 1, 2, 2, 2);

 

그럼 아래와 같이 가로, 세로, 깊이가 모두 2분할된 걸 볼 수 있다.

 

(2) CircleGeometry

이번에는 CircleGeometry에 대해 알아보자.

CircleGeometry는 원판 모양의 Geometry이고 다음과 같은 4개의 인자를 받는다.

- radius
 원판의 크기를 정의하며 기본값은 1이다.

- segments
 원판의 분할 개수이며 기본값은 8이다.
 그렇기에 해당값이 클수록 좀 더 완전한 원의 형태가 된다.

- thetaStart
 원판의 시작 각도를 정의하며 각도에 대한 단위는 radian이고 기본값은 0이다.

- thetaLength
 원판의 시작 각도를 정의하며 각도에 대한 단위는 radian이고 기본값은 2pi(360도)이다.

BoxGeometry에 대한 정의를 주석처리하고

CircleGeometry의 인자에 다양한 값을 줘보며 각 인자에 대해 감을 잡아보자.

// const geometry = new THREE.BoxGeometry(1, 1, 1, 2, 2, 2);
const geometry = new THREE.CircleGeometry(0.9, 16, Math.PI/2, Math.PI/2);

 

(3) ConeGeometry

ConeGeometry는 원뿔 모양의 Geometry이고 다음과 같은 7개의 인자를 받는다.

- radius
 밑면에 해당되는 원판의 반지름 크기를 정의하며 기본값은 1이다.

- height
 원뿔의 높이를 정의하며 기본값은 1이다.

- radialSegments
 원뿔의 둘레 방향에 대한 분할 개수이며 기본값은 8이다.

- heightSegments
 원뿔의 높이 방향에 대한 분할 개수이며 기본값은 1이다.

- openEnded
 원뿔 밑면을 열어놓을 것인지에 대한 여부를 정의하며 기본값은 false이기에 닫혀있다.

- thetaStart
 원뿔의 시작각을 정의하며 기본값은 0이다.

- thetaLength
 원뿔의 연장각을 정의하며 기본값은 2pi(360도)이다.

CircleGeometry에 대한 정의를 주석처리하고

ConeGeometry의 인자에 다양한 값을 줘보며 각 인자에 대해 감을 잡아보자.

// const geometry = new THREE.CircleGeometry(0.9, 16, Math.PI/2, Math.PI/2);
const geometry = new THREE.ConeGeometry(0.5, 1.6, 16, 9, true, 0, Math.PI);

 

(4) CylinderGeometry

CylinderGeometry는 원통 모양의 Geometry이고 다음과 같은 8개의 인자를 받는다.

- radiusTop
 윗면에 해당하는 원의 반지름 크기이며 기본값은 1이다.

- radiusBottom
 밑면에 해당하는 원의 반지름 크기이며 기본값은 1이다.

- height
 원뿔의 높이를 정의하며 기본값은 1이다.

- radiusSegments
 원통의 둘레 방향에 대한 분할 개수이며 기본값은 8이다.

- heightSegments
 원통의 높이 방향에 대한 분할 개수이며 기본값은 1이다.

- openEnded
 원통의 윗면과 밑면을 열어놓을 것인지에 대한 여부를 정의하며 기본값은 false이기에 닫혀있다.

- thetaStart
 원통의 시작각을 정의하며 기본값은 0이다.

- thetaLength
 원통의 연장각을 정의하며 기본값은 2pi(360도)이다.

ConeGeometry에 대한 정의를 주석처리하고

cylinderGeometry의 인자에 다양한 값을 줘보며 각 인자에 대해 감을 잡아보자.

// const geometry = new THREE.ConeGeometry(0.5, 1.6, 16, 9, true, 0, Math.PI);
const geometry = new THREE.CylinderGeometry(0.9, 0.9, 1.6, 32, 12, true, 0, Math.PI);

 

(5) SphereGeometry

SphereGeometry는 구 모양의 Geometry이고 다음과 같은 7개의 인자를 받는다.

- radius
 구의 반지름 크기이며 기본값은 1이다.

- widthSegments
 수평 방향에 대한 분할 개수이며 기본값은 32이다.

- heightSegments
 수직 방향에 대한 분할 개수이며 기본값은 16이다.

- phiStart
 수평 방향에 대한 구의 시작각을 정의하며 기본값은 0이다.

- phiLength
 수평 방향에 대한 구의 연장각을 정의하며 기본값은 2pi(360도)이다.

- thetaStart
 수직 방향에 대한 구의 시작각을 정의하며 기본값은 0이다.

- thetaLength
 수직 방향에 대한 구의 연장각을 정의하며 기본값은 pi(180도)이다.

CylinderGeometry에 대한 정의를 주석처리하고

SphereGeometry의 인자에 다양한 값을 줘보며 각 인자에 대해 감을 잡아보자.

// const geometry = new THREE.CylinderGeometry(0.9, 0.9, 1.6, 32, 12, true, 0, Math.PI);
const geometry = new THREE.SphereGeometry(0.9, 32, 12, 0, Math.PI, 0, Math.PI/2);

 

(6) RingGeometry

RingGeometry는 2차원 형태의 반지 모양 Geometry이고 다음과 같은 6개의 인자를 받는다.

- innerRadius
 내부 반지름값을 정의하며 기본값은 0.5이다.

- outerRadius
 외부 반지름값을 정의하며 기본값은 1이다.

- thetaSegments
 가장자리 둘레 방향으로의 분할 개수이며 기본값은 8이다.

- phiSegments
 내부 방향에 대한 분할 개수이며 기본값은 1이다.

- thetaStart
 시작각을 정의하며 기본값은 0이다.

- thetaLength
 시작각을 정의하며 기본값은 2pi(360도)이다.

SphereGeometry에 대한 정의를 주석처리하고

RingGeometry의 인자에 다양한 값을 줘보며 각 인자에 대해 감을 잡아보자.

// const geometry = new THREE.SphereGeometry(0.9, 32, 12, 0, Math.PI, 0, Math.PI/2);
const geometry = new THREE.RingGeometry(0.2, 1, 6, 2, 0, Math.PI);

 

(7) PlaneGeometry

PlaneGeometry는 평면 모양의 사각형 Geometry이고 다음과 같은 4개의 인자를 받는다.

- width
 너비에 대한 길이를 정의하며 기본값은 1이다.

- height
 높이에 대한 길이를 정의하며 기본값은 1이다.

- widthSegments
 너비 방향에 대한 분할 개수이며 기본값은 1이다.

- heightSegments
 높이 방향에 대한 분할 개수이며 기본값은 1이다.

RingGeometry에 대한 정의를 주석처리하고

PlaneGeometry의 인자에 다양한 값을 줘보며 각 인자에 대해 감을 잡아보자.

// const geometry = new THREE.RingGeometry(0.2, 1, 6, 2, 0, Math.PI);
const geometry = new THREE.PlaneGeometry(1, 1.4, 1, 5);

해당 PlaneGeometry는 지리 정보 시스템(GIS)에서 3차원 지형 등을 표현하는 데 유용하게 사용된다.

 

(8) TorusGeometry

TorusGeometry는 3차원 반지 모양의 Geometry이고 다음과 같은 5개의 인자를 받는다.

- radius
 반지름값을 정의하며 기본값은 1이다.

- tube
 Torus는 긴 원통이 360도 돌아 이루어진 도형인데 이 원통의 반지름값을 정의하며 기본값은 0.4이다.

- radialSegments
 Torus의 방사 방향에 대한 분할 개수이며 기본값은 8이다. 값이 클수록 Torus의 두께가 두꺼워진다.

- tubularSegments
 Torus에 대한 긴 원통의 분할 개수이며 기본값은 6이다. 값이 커질수록 더 동그랗게 된다.

- arc
 Torus의 연장각의 길이를 정의하며 기본값은 2pi(360도)이다.

PlaneGeometry에 대한 정의를 주석처리하고

TorusGeometry의 인자에 다양한 값을 줘보며 각 인자에 대해 감을 잡아보자.

// const geometry = new THREE.PlaneGeometry(1, 1.4, 1, 5);
const geometry = new THREE.TorusGeometry(0.9, 0.4, 24, 32, Math.PI);

 

(9) TorusKnotGeometry

TorusKnotGeometry는 보면 알다시피 특별히 정의하기 어려운 형태를 가진 Geometry이며 다음과 같은 6개의 인자를 받는다.

복잡한 형태이기에 사용도는 많이 떨어진다.

- radius
 TorusKnotGeometry의 반지름을 정의한다.

- tube
 TorusKnotGeometry를 구성하는 원통의 반지름 크기를 정의한다.

- tubularSegments
 TorusKnotGeometry에 대한 긴 원통의 분할 개수를 정의한다.

- radialSegments
 TorusKnotGeometry의 방사 방향에 대한 분할 개수를 정의한다.

- p
 회전대칭축 중심의 회전수를 정의한다.

- q
 내부의 원 주위 형상의 회전수를 정의한다.

---

 

이렇게 Three.js에서 제공하는 기본적인 Geometry들에 대해 알아봤다.

다음 시간엔 다른 Geometry에 대해 알아보며 마무리하도록 하겠다.

 

[Three.js module 활용 - (2) Geometry 전체 코드]

GitHub - rlacodud/UID