3D 도형 추가하는 방법 (+반응형 적용) – Three.js 강좌

저번 시간에는 장면, 그리고 카메라와 렌더러를 세팅했으니 이제 진짜 도형을 그려봐야겠죠. 3D 물체를 구현해야 하기 때문에 좌표의 점을 이은 선과 면으로 이루어진 도형인 Geometry와 색상이나 질감을 표현한 재질인 Material을 합쳐서 표현합니다. 이번 시간에는 Geometry에 대해서 알아볼게요. Material에 대해서는 다음 강좌에서 좀 더 상세하게 다뤄볼게요. 추가로 브라우저의 화면을 줄였을 때 반응형 처리하는 코드까지 배워보도록 할게요.

three.js 기본 구조 – https://threejs.org/manual/#en/fundamentals

*디자인 베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커맨드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요.

핵심 요약

지오메트리 Geometry

Three.js에서 다양한 지오메트리를 제공합니다. 웹사이트 문서 중 Constructor 설명을 보면 순서대로 속성값을 입힐 수 있습니다. 여기에 기본값이 어떤 것인지 나와있습니다.

BoxGeometry – 정육면체를 만들 수 있습니다.
CylinderGeometry – 원기둥을 만들 수 있습니다.
PlaneGeometry – 평평한 면을 만들 수 있습니다. 주로 바닥을 만들때 사용합니다.
SphereGeometry – 구를 만들 수 있습니다.
TorusGeometry – 도넛 모양을 만들 수 있습니다.