`near`와 `far` 평면의 높이는 시야각(fov), 너비는 시야각과 `aspect`에 의해
결정됩니다.
그리고 앞서 말했듯 절두체 안에 있는 요소만 렌더링되며, 바깥에 있는 요소는
렌더링되지 않습니다.
기본 설정으로 카메라는 -Z 축 +Y 축, 즉 아래를 바라봅니다. 정육면체를 원점에
놓을 예정이니 카메라를 조금 뒤로 움직여 화면 안에 들어오도록 해보죠.
```js
camera.position.z = 2;
```
우리가 원하는 결과물을 다음처럼 그려볼 수 있습니다.
카메라는 `z = 2` 위치에서 -Z 방향을 바라봅니다. 절두체는 카메라 앞 0.1 칸에서
5칸까지를 차지하죠. 또한 아래를 바라보는 형태이기 때문에, 시야각은 canvas
크기의 영향을 받습니다. 앞서 만든 canvas는 두 배 더 크기 때문에 실제로는 시야각이
위에서 정의한 75도 보다는 훨씬 넓을 것입니다.
이제 `Scene`을 만듭니다. Three.js에서 `Scene`이란 씬 그래프에서 가장 상단에
위치한 요소입니다. 뭔가를 화면에 렌더링하고 싶다면 먼저 `Scene`에 추가해야 하죠.
여기서는 간단하게 다룰 것이므로 자세한 내용은 [이 글](threejs-scenegraph.html)을
참고하세요.
```js
const scene = new THREE.Scene();
```
다음으로 간단한 정육면체를 만들어보죠. Three.js에서 렌더링되는 대부분의 3D 요소는
정점 데이터가 정의된 기하학 객체를 필요로 합니다. 지금은 정육면체를 만들어야 하니
`BoxGeometry` 생성자를 호출하겠습니다.
```js
const boxWidth = 1;
const boxHeight = 1;
const boxDepth = 1;
const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
```
다음으로 `Material`을 만들고 색을 지정합니다. 색을 지정할 때는 CSS처럼
숫자 형태의 hex 코드를 이용합니다(`#` 대신 `0x`. 역주).
```js
const material = new THREE.MeshBasicMaterial({color: 0x44aa88});
```
그리고 앞서 만든 `Geometry`(물체의 형태)와 `Material`(물체의 색, 밝기, 질감 등)을
이용해 `Mesh`를 만듭니다. `Mesh`는 `Geometry`, `Material` 외에도 물체의 위치, 방향,
크기 등을 담은 객체입니다.
```js
const cube = new THREE.Mesh(geometry, material);
```
마지막으로 완성된 정육면체 `Mesh`를 `Scene`에 넣어줍니다.
```js
scene.add(cube);
```
`renderer`의 `render` 메서드에 `Scene`과 `Camera`를 넘겨주면 화면을 렌더링할
수 있습니다.
```js
renderer.render(scene, camera);
```
아래는 전체 코드입니다.
{{{example url="../threejs-fundamentals.html" }}}
물론 위 예제는 3D 정육면체라고 하긴 어렵습니다. 코드 상으로 Three.js는
분명 3D 정육면체를 그렸지만, 카메라가 -Z 방향을 바라보고, 정육면체도
Z 축에 맞추어 정렬되어 있기 때문에 한 면만 보입니다.
한 번 이 물체에 애니메이션을 주고 3D처럼 보이는지 확인해보죠.
애니메이션을 구현하기 위해 [`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) 루프 안에서 렌더링 함수를 호출합니다.
```js
function render(time) {
time *= 0.001; // convert time to seconds
cube.rotation.x = time;
cube.rotation.y = time;
renderer.render(scene, camera);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
```
`requestAnimationFrame`은 브라우저에 애니메이션 프레임을 요청하는 함수입니다.
인자로 실행할 함수를 전달하면 되죠(이 경우는 `render` 함수). 브라우저는 넘겨받은
함수를 실행하고, 페이지에 변화가 있다면 페이지를 다시 렌더링합니다. 위 예제에서는
Three.js의 `renderer.render` 메서드를 호출해 씬을 렌더링하도록 했죠.
`requestAnimationFrame`은 매개변수로 넘겨받은 함수에 페이지가 로드된 이후의 시간값을
밀리초 단위로 넘겨줍니다. 전 초 단위가 더 익숙하기 때문에, 밀리초 단위를 초 단위로
변경하였습니다.
그리고 정육면체의 X, Y축 회전값을 현재 시간값으로 설정합니다(이 회전값은 [라디안(radians)](https://ko.wikipedia.org/wiki/%EB%9D%BC%EB%94%94%EC%95%88)
단위를 사용합니다). 360˚도는 2π 라디안이니 큐브는 각 축마다
약 6.28초에 한 바퀴를 돌게 됩니다.
그리고 씬을 렌더링 한 후, 브라우저에 재귀적으로 애니메이션 프레임을 요청해 이
애니메이션이 반복되도록 합니다.
마지막으로 루프 바깥에서 `requestAnimationFrame`을 한 번 호출해 루프를
시작합니다.
{{{example url="../threejs-fundamentals-with-animation.html" }}}
아까보단 낫지만 아직 3D 물체라고 부르기엔 뭔가 부족합니다. 광원을 추가해 그림자가
지도록 하면 어떨까요? 나중에 [이 글](threejs-lights.html)에서 자세히 다루겠지만,
Three.js에는 다양한 종류의 광원이 있습니다. 다 살펴보기 힘드니 지금은 예시로
`DirectionalLight`를 사용해보도록 하죠.
```js
{
const color = 0xFFFFFF;
const intensity = 1;
const light = new THREE.DirectionalLight(color, intensity);
light.position.set(-1, 2, 4);
scene.add(light);
}
```
`DirectionnalLight`에는 `위치(position)`와 `목표(target)` 속성이 있습니다.
기본값은 `0, 0, 0` 이죠. 먼저 `position`을 `-1, 2, 4`로 설정해 카메라보다
약간 동서쪽, Z축으로는 약간 위로 보냅니다. `target`은 기본값 `0, 0, 0` 그대로
두어 공간의 중앙을 비추도록 합니다.
그리고 `material`도 바꿔야 합니다. `MeshBasicMaterial`은 광원에 반응하지 않으니,
광원에 반응하는 `MeshPhongMaterial`로 바꿉니다(`phong`은 광원 반사 모델을 처음 개발한 사람 이름. 역주).
```js
-const material = new THREE.MeshBasicMaterial({color: 0x44aa88}); // greenish blue
+const material = new THREE.MeshPhongMaterial({color: 0x44aa88}); // greenish blue
```
다음은 현재까지의 프로그램 구조를 도식화 한 것이고,
