기본 뼈대 이해하기 Renderer, Scene, Camera – Three.js 강좌

안녕하세요. 저번 시간에 기본적인 설치를 마쳤는데, 바로 코드로 직접 짜기 전에 three.js의 기본 구조를 살펴볼게요.
three.js에서 가장 기본이 되는 구조는 renderer, scene, camera,입니다.
장면을 만들어서 그 안에 3D 도형을 넣고 그걸 카메라로 비춘 다음에 렌더 어를 통해 그걸 canvas라는 HTML안에 렌더링해서 보여주는 개념이에요.
대략적인 개념을 이해하고 가장 기본이 되는 장면과 카메라, 랜더러 코드를 작성해볼게요.

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

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

핵심 요약

Three.js의 기본 구조입니다. 이번 강좌에서는 렌더러, 씬, 카메라를 위주로 알아보겠습니다

렌더러 renderer

렌더러는 three.js의 핵심 객체입니다. 렌더러를 쉽게 정의해보면 scene과 camera 객체 데이터를 넘겨 받아서 화면 안에 이미지로 렌더링 해주는 역할입니다

씬 scene

scene은 최상위 노드로 배경색과 안개 등의 요소를 포함하며 여러 개의 3D 오브젝트와 빛, 질감들이 모인 화면입니다.

카메라 Camera

카메라는 scene에 담긴 3D 공간을 카메라로 비춰서 화면을 담아서 렌더러에게 데이터를 넘기는 역할을 합니다. 카메라는 시야각, 카메라의 시작과 끝 지점, 위치 등을 조절할 수 있습니다.