Three.js 베이직

본 시리즈는 Three.js의 공식 문서를 중심으로 기초 개념들을 학습하고 정리한 문서입니다.

Geometry는 3D오브젝트의 뼈대 역할을 한다. 따라서, 3D오브젝트를 만들 때는 반드시 Geometry가 있어야 한다.

Material은 단어의 의미 그대로, ‘소재, 재질’을 의미한다. 딱 들어맞는 비유는 아니지만 Geometry가 뼈대라면 Material은 살로 비유할 수 있다.

plane은 쉽게 말해 평평한 바닥이라고 볼 수 있다. 우리가 3D모델을 만들거나 어떤 Scene을 만들어낼 때 대부분 땅(바닥)이 들어가기 때문에 아마도 Plane은 웬만한 구현에는 기본적으로 포함되는 요소일 것이다.

Geometry가 뼈대, Material이 살이라면 Texture는 일종의 옷이라고 볼 수 있다.

Light는 광원, 조명의 역할을 한다. 어떤 Light를 선택하느냐에 따라서 표현되는 느낌이 달라진다. 어떤 Light는 햇빛의 느낌을, 어떤 Light는 조명의 느낌을 내는 등 특징이 다르므로 각각의 특징을 잘 이해하고 활용해야 한다.

그야말로 카메라, 3D 오브젝트가 존재하는 Scene을 바라보는 역할을 한다.

Three.js는 광원에 따라 그림자를 만들 수 있는 기능이 (당연히)있다. 다만 다루기가 다소 까다로운 부분이 있어서 충분히 공부하고 연습이 되어야 자유자재로 그림자를 다룰 수 있을 것 같다.

이번 포스팅에서는 Obj에 그림자를 적용할 때 겪었던 문제와 해결방법을 정리해보려고 합니다.

Three.js glTF 로드시 "THREE.WebGLRenderer: image is not power of two" 경고 메시지 문제