이번 포스팅에서는 Three.js에서 화면을 구성하기 위한 기본요소인 Scene, Camera, Renderer에 대해서 알아봅니다.
Scene
Three.js의 가장 기본이 되는 객체로, 모든 3D 개체가 배치되는 공간입니다. 화면에 보이는 모든 요소는 Scene에 추가되어야 합니다.
const scene = new THREE.scene();
scene.add(element);Camera
Scene을 보는 시점을 정의합니다. Three.js에서는 여러 카메라를 제공하는데, 대표적으로 PerspectiveCamera와 OrthographicCamera를 제공합니다.
PerspectiveCamera
- 원근감을 적용해서 객체를 투영하는 카메라로, 3D 공간감을 표현합니다.
const camera = new Three.PerspectiveCamera(fov, aspect, near, far);
fov: 시야각. 커질수록 화면에 많은 영역을 출력합니다.
- 기본값은 50으로 사람의 시야와 유사한 45~75사이의 값을 사용합니다.
aspect: 카메라의 종횡비. 가로와 세로의 비율
- window.innerWidth / window.innerHeight를 사용합니다.near,far: 카메라로 볼 수 있는 최소, 최대의 거리. 범위밖은 렌더링되지 않습니다.
OrthographicCamera
- perspectiveCamera와 반대로 원근감없이 평면적인 투영을 적용하는 카메라 입니다.
const camera = new THREE.OrthographicCamera(left, right, top, bottom, near, far);- left, right, top, bottom: 카메라가 볼 수 있는 영역의 좌표
- near, far: 카메라로 볼 수 있는 최소, 최대 거리
Renderer
Scene과 Camera를 연결해서 실제 화면에 보여지는 이미지를 생성합니다. canvas를 사용하여 HTML에 추가하고 reneder 메서드를 이요해서 scene과 camera를 연결하여 3D 그래픽을 출력합니다.
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 화면 렌더링
renderer.render(scene, camera);특정 캔버스 요소에 화면을 렌더링 하기 위해서 렌더러의 속성값으로 해당 캔버스 요소를 전달해야 합니다.
- canvas가 아닌 요소에는 화면이 렌더링되지 않습니다.
const $canvas = document.getElementById('canvas')
const renderer = new THREE.WebGLRenderer({ **canvas: $canvas** })캔버스의 스타일 속성을 주어 화면의 크기를 조정할 수 있습니다. 화면의 깨짐 현상을 방지하고 비율을 유지하기 위하여 카메라와 렌더러의 속성값을 캔버스의 크기에 맞추어 변경해주어야 합니다.
const camera = new THREE.PerspectiveCamera(50, $canvas.clientWidth / $canvas.clientHeight, 0.1, 1000);
renderer.setSize($canvas.clientWidth, $canvas.clientHeight);
keep on pushing