참고 강의 : GIS Developer 유튜브 강의
three.js의 BufferGeometry
는 배열 형태로 3차원 오브젝트를 구성하는 정점의 정보와 인덱스 정보 등을 저장함으로써 3차원 구조체의 형상을 정의한다.
three.js는BufferGeometry
를 확장한 다양한 형상의 지오메트리를 제공하는데, 이를 이용해 여러 종류의 도형을 쉽게 그릴 수 있다.
BufferGeometry
의 속성들을 알아보자.
BoxGeometry 공식 문서
사실 모든 속성은 공식 문서가 제공하는 예제로 직접 다뤄보는 것이 더 익히기 쉽다.
new BoxGeometry(width?: number, height?: number, depth?: number, widthSegments?: number, heightSegments?: number, depthSegments?: number): THREE.BoxGeometry
가로, 세로, 깊이(높이)로 구성된 육면체 지오메트리
const geometry = new THREE.BoxGeometry(1, 1, 1, 2, 2, 2);
각 방향으로 모두 2등분한 육면체가 생성된다.
CircleGeometry(radius : Float, segments : Integer, thetaStart : Float, thetaLength : Float)
2D 원 모양의 Geometry
const geometry = new THREE.CircleGeometry(1, 8, Math.PI, Math.PI / 2);
180도 방향에서 시작해 1/4만큼의 원을 8개의 도형으로 그린 원이 생성된다.
ConeGeometry(radius : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)
3차원 원뿔 모양의 Geometry
CylinderGeometry(radiusTop : Float, radiusBottom : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)
3차원 원기둥 모양의 Geometry
SphereGeometry(radius : Float, widthSegments : Integer, heightSegments : Integer, phiStart : Float, phiLength : Float, thetaStart : Float, thetaLength : Float)
3차원 구 형태의 Geometry
RingGeometry(innerRadius : Float, outerRadius : Float, thetaSegments : Integer, phiSegments : Integer, thetaStart : Float, thetaLength : Float)
2차원 도넛 모양의 Geometry
const geometry = new THREE.RingGeometry(0.5, 1, 8, 3);
8개의 thetaSegments를 통해 팔각형의 링이 형성되고, 둘레 방향으로 3분할 되었다.
PlaneGeometry(width : Float, height : Float, widthSegments : Integer, heightSegments : Integer)
2차원 사각 평면 모양의 Geometry
TorusGeometry(radius : Float, tube : Float, radialSegments : Integer, tubularSegments : Integer, arc : Float)
3차원 도넛 모양의 Geometry
※ Torus의 형상을 나타내는 닫힌 원기둥 링을 tube라고 한다.
const geometry = new THREE.TorusGeometry(1, 0.4, 12, 8);
radialSegments = 12이므로 tube가 12분할 되었다, tubularSegments = 8이므로 원 형상은 팔각형이 되었다.
2차원 도형의 모양을 정의하는 THREE.Shape 인스턴스를 통해 2차원 도형을 나타내는 Geometry
Shape 인스턴스를 생성하고, 메서드를 통해 직선 및 다양한 모양의 곡선을 통해 도형을 그릴 수 있다. (python의 turtle과 유사한 방식)
const shape = new THREE.Shape();
shape.moveTo(1, 1);
shape.lineTo(1, -1);
shape.lineTo(-1, -1);
shape.lineTo(-1, 1);
shape.closePath(); // 도형 닫기
정사각형이 그려졌다.
이렇게 생성한 THREE.Shape
인스턴스를 ShapeGeometry
로 감싸면 Mesh 형태로 표현할 수 있다.
TubeGeometry(path : Curve, tubularSegments : Integer, radius : Float, radialSegments : Integer, closed : Boolean)
어떤 곡선을 따르는 tube를 나타내는 Geometry
곡선을 정의하는 THREE.Curve
인스턴스를 통해 다양한 모양의 tube를 그릴 수 있다.
THREE.Curve
객체LatheGeometry(points : Array, segments : Integer, [param:Float phiStart], phiLength : Float)
어떤 선을 y축 방향으로 회전시킴으로써 얻어지는 3차원 도형을 나타내는 Geometry
ExtrudeGeometry(shapes : Array, options : Object)
THREE.Shape로 표현된 2차원 도형에 깊이 값을 정의하여 3차원 구조체를 나타내고, 밑면을 비스듬하게 처리할 수 있는 Geometry
※ 비스듬하게 처리하는 것을 beveling이라고 한다.
Three.Shape
객체를 통해 나타낼 평면THREE.Curve
가 값으로 들어가야 하며shapes에서 정의된 모양이 연장될(extruded) 곡선 모양을 결정한다.TubeGeometry
와 같이 곡선 등 비정형의 3차원 객체를 표현해야할 때, Three.Shape
객체와 extrudePath
옵션을 통해 path를 따라 다양한 모양의 3차원 객체를 그려낼 수 있다.
텍스트를 3D 객체로 나타내는 Geometry
ExtrudeGeometry
의 파생 클래스이며, core에는 탑재되어있지 않아 별도로 불러와야 하는 애드온이다.
사용하기 위해 json 폰트 파일과 FontLoader 클래스를 통해 json을 THREE.Font
인스턴스로 변환해야 한다.
TextGeometry(text : String, parameters : Object)
THREE.Font
인스턴스그 외 파라미터는 bevel 관련 설정이며 ExtrudeGeometry
의 옵션 값을 동일하게 사용가능하다.
// 공식문서 예제
const loader = new FontLoader();
loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
const geometry = new TextGeometry( 'Hello three.js!', {
font: font,
size: 80,
height: 5,
curveSegments: 12,
bevelEnabled: true,
bevelThickness: 10,
bevelSize: 8,
bevelOffset: 0,
bevelSegments: 5
} );
} );