[three.js 기초 #1] Geometry

2024.05.12 - [frontend] - [three.js 기초 #0] 시작하기 & 환경 세팅

[three.js 기초 #0] 시작하기 & 환경 세팅

[three.js 기초 #1] Geometry

1. Geometry란?

Geometry는 메쉬, 선, 점 등의 기하학적 형태를 표현하는 데 사용되는 three 핵심 요소

모든 정보 데이터들은 하나로 모여 GPU에 빠르게 전달됨

2. Geometry 종류

• BufferGeometry: 메쉬, 선, 점 기하학을 표현하는 가장 기본적인 Geometry 클래스
• ParametricGeometry: 수학적 함수식을 이용해 2개의 값을 입력하여 좌표를 생성
• SphereGeometry: 구 형태의 Geometry로, 반지름과 수평/수직 분할 수를 설정할 수 있음
• BoxGeometry: 상자나 직육면체 모양의 geometry를 생성합니다. 너비, 높이 및 깊이를 조절하여 크기를 조정할 수 있음
• PlaneGeometry: 평면을 생성하는 데 사용됩니다. 너비와 높이를 조절하여 크기를 조정할 수 있습니다.
• CircleGeometry: 원을 생성할 수 있습니다. 원의 중심, 반지름 및 세그먼트 수를 조절하여 원의 모양과 세부 사항을 조정

3. Geometry 생성

모델 함수

_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;
	}

• BoxGeometry(1,1,1): 가로 세로 깊이가 각각 1의 크기정보가 담긴 정육면체 형상 객체
• MeshPhongMaterial: 반사광이 있는 광택 표면을 정의
  • color 속성은 재질의 색상을 16진수 코드로 지정
• Mesh: geometry와 material을 결합하여 하나의 3D 객체를 생성(=cube)
• LineSegments: 선 객체를 생성
  • WireframeGeometry: boxgeometry의 와이어 프레임 형태로 지정 → 모든 외곽선이 표시되기 위함
• LineBasicMaterial: 선 객체의 재질을 정의
• Group: 여러개의 3D 객체 형태를 하나의 그룹으로 관리할 수 있게 함(cube, line)

4. OrbitControls

카메라를 장면의 중심 주변으로 자유롭게 회전, 확대/축소, 이동할 수 있는 threejs 클래스

new OrbitControls(this._camera, this._divcontainer);

• this._camera: 제어할 카메라 객체입니다. 이 카메라가 장면에 포함되어야 합니다.
• this._divcontainer: 카메라 제어를 위한 DOM 요소입니다. 일반적으로 Three.js 렌더링이 이루어지는 div 요소를 사용합니다.

 

💡OrbitControls 관련 이슈(빈화면): Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".

원인: ES6 모듈과 충돌

...

<!-- head에 추가 -->
<script type="importmap">
    {
        "imports": {
            "three": "../build/three.module.js"
        }
    }
</script>