![Three.js](http://designbase.co.kr/wp-content/uploads/2024/07/icon-three.png)
![three 기본구조 - 렌더러, 신, 카메라](https://designbase.co.kr/wp-content/uploads/2022/04/threejs-03-overview-728x410.jpg)
![Three.js](http://designbase.co.kr/wp-content/uploads/2024/07/icon-three.png)
안녕하세요. 저번 시간에 기본적인 설치를 마쳤는데, 바로 코드로 직접 짜기 전에 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 기본 구조](http://designbase.dothome.co.kr/wp-content/uploads/2022/04/threejs-03-1-2-1920x1080.jpg)
![](http://designbase.dothome.co.kr/wp-content/uploads/2022/04/threejs-03-1-1920x1080.jpg)
Three.js의 기본 구조입니다. 이번 강좌에서는 렌더러, 씬, 카메라를 위주로 알아보겠습니다
![렌더러 안에는 카메라와 신이 담겨 있습니다.](http://designbase.dothome.co.kr/wp-content/uploads/2022/04/threejs-03-2-1920x1080.jpg)
렌더러 renderer
렌더러는 three.js의 핵심 객체입니다. 렌더러를 쉽게 정의해보면 scene과 camera 객체 데이터를 넘겨 받아서 화면 안에 이미지로 렌더링 해주는 역할입니다
![Scene이란](http://designbase.dothome.co.kr/wp-content/uploads/2022/04/threejs-03-3-1920x1080.jpg)
씬 scene
scene은 최상위 노드로 배경색과 안개 등의 요소를 포함하며 여러 개의 3D 오브젝트와 빛, 질감들이 모인 화면입니다.
![Camera란](http://designbase.dothome.co.kr/wp-content/uploads/2022/04/threejs-03-4-1920x1080.jpg)
카메라 Camera
카메라는 scene에 담긴 3D 공간을 카메라로 비춰서 화면을 담아서 렌더러에게 데이터를 넘기는 역할을 합니다. 카메라는 시야각, 카메라의 시작과 끝 지점, 위치 등을 조절할 수 있습니다.