ThreeJs (2) Geometry

Mesh (Object3D)

Mesh를 생성할 때 mesh의 형상을 정의하는 geometry와 색상이나 투명도 등을 지정할 수 있는 material이 필요하다.

Geometry

3차원 오브젝트의 형상을 정의한다.
형상을 정의하기 위한 데이터는?

• 정점
  형상을 정의하는 정점 데이터 xyz축에 대한 좌표
• 정점 인덱스
  3차원 오브젝트의 면을 구성하는 정점에 대한 인덱스
• 수직 벡터
• 정점 색상
• 텍스쳐 맵핑을 위한 UV 좌표
• 사용자 정의 데이터
  이러한 데이터들은 3차원으로 시각화될 떄 GPU에 한번에 전달되어 빠르게 처리된다.

마우스로 모델 움직이기

import { OrbitControls } from "examples/jsm/controls/OrbitControls";

this._setupControls(); 

_setupControls() {

		//OrbitsControls 객체를 생성할 때는 카메라 객체와 마우스 이벤트를 받는 DOM 요소가 필요
		new OrbitControls(this._camera, this._divContainer);
}

ERROR

Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".

해결완료
ThreeJs javaScript 모듈 import 확인하기

[출처]https://www.youtube.com/watch?v=ITA9no8Bsio&t=42s