Geometry

Geometry

3D 공간 내의 x축, y축, z축을 사용하여 물체의 위치, 크기, 모양 등을 표현하기 위한 수학적인 구조와 원리

Segments

• Geometry는 기본적으로 여러 삼각형 조각으로 구성된다.

• Segments는 geometry를 구성하는 작은 삼각형들을 의미하며, 구성된 segments가 많아질수록 보다 높은 디테일과 부드러운 외형을 가질 수 있게된다.

• 단, 렌더링 시 segements의 수가 많아질수록 계산량이 많아지므로 성능 저하가 발생할 수 있다.

Built In Geometry

Three.js에서 제공하는 다양한 Geometry를 알아보자.

• BoxGeometry → 큐브 모양의 형태를 구성하는 지오메트리, width, height, depth와 각각의 segments로 구성된다.

• CapsuleGeometry → 캡슐 모양의 형태를 구성하는 지오메트리, radius,length, 각각의 segement로 구성된다.

• CircleGeometry → 원판 모양의 형태를 구성하는 지오메트리, radius, segments 로 구성된다.

• ConeGeometry → 각뿔 또는 원뿔 모양의 형태를 구성하는 지오메트리, radius, height, segments로 구성되며, openEnded 옵션으로 밑면이 뚫림 여부를 조절 가능

• EdgesGeometry → 다른 지오메트리의 모서리 영역을 표현해주는 지오메트리

• IcosahedronGeometry → 20면체를 만들 때 사용되는 지오메트리, radius,detail 로 구성되며 detail 값이 커질수록 구의 형태에 가까워 지게 된다.

• PlaneGeometry → 평면을 나타내는 지오메트리, 바닥을 표현하기 위해 자주 사용된다.

• RingGeometry → 링 모양의 형태를 구성하는 지오메트리

• ShapeGeometry -> 사용할 마땅할 지오메트리가 없고, 원하는 형태의 도형을 직접 커스텀하고 싶을 때 사용한다.

• SphereGeometry -> 구 형태의 지오메트리, 달과 행성을 표현할 때 유용하게 사용된다.

Shape

const shpae = new THREE.Shpae();
const geometry = new THREE.ShapeGeometry(shape);

Method

absarc(absolute arc)

• (x, y, radius, startAngle, endAngle, clockwise)

• 타원 모양의 곡선을 그리는데 사용된다.

• 원호를 뜻하는 arc는 '곡선의 한 부분'을 의미한다.

• ShapeGeometry는 2차원 도형만을 나타내는데 깊이감을 표현하고 싶다면 ExtrudeGeometry를 사용하자.

// 예시
const shape = new THREE.Shape();
shape
  .absarc(x, y, radius, Math.PI / 2, 0, true)
  .lineTo(x + radius, -y)
  .absarc(x, -y, radius, 0, -Math.PI / 2, true) 
  .lineTo(-x, -(y + radius))
  .absarc(-x, -y, radius, -Math.PI / 2, Math.PI, true)
  .lineTo(-(x + radius), y)
  .absarc(-x, y, radius, Math.PI, Math.PI / 2, true);

const geometry = new THREE.ExtrudeGeometry(shape, {
  depth: 0.01,
  bevelThickness: 0.1,
  });