Three.js 6일차 (카메라)

 

 

---

1. 화각

---

FOV는 Field of view의 약어로 화각이라고 한다. 시야각이라고도 한다.

렌즈의 종류는 광각렌즈, 표준렌즈, 망원렌즈로 크게 3가지다.

 

1) 망원렌즈 (화각 28도 이하)

오브젝트를 가까이 크게 보이게 하고 싶다면, 망원으로 표현해야 한다.

그러기 위해서는 화각이 좁아야 한다.

대략 8~28도 정도이다.

 

 

2) 표준렌즈 (화각 47도)

평범하게 보여주고 싶을 때 쓴다.

 

 

3) 광각렌즈 (화각 63~84도)

망원렌즈의 특징은 화각이 좁고, 멀리있는 피사체를 가까이 있는 것처럼 확대해서 촬영할 수 있다.

그만큼 사진 속에 담기는 영역이 좁게 표현된다.

즉, 마을과 도시같은 부분을 표현하고 싶다면 광각으로 표현한다.

 

 

---

2. 카메라 설정

---

 // 카메라
  const fov = 47;
  const aspect = window.innerWidth / window.innerHeight;
  const near = 0.1;
  const far = 1000;

  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.set(0,0,1);

카메라는 PerspectiveCamera로 설정하게 되는데, 이 때 필요한 요소가 4가지이다.

fov(화각), aspect(종횡비), near(첫 시작), far(끝 지점)

 

 

1) 표준 시야(47도)

const fov = 47;

 

 

 

 

2) 망원 시야(28도)

더 가까이 보여주고 싶다. 그러면 8~28도 사이이다.

const fov = 28;

 

 

 

 

3) 광각 시야(63도)

더 멀어진다.

const fov = 63;

---

3. 종횡비

---

 

종횡비는 가로 세로 비율이다.

주로 모니터 속 브라우저의 포트 기준으로 해준다.

const aspect = window.innerWidth / window.innerHeight;

 

 

 

---

4. near / far

---

far보다 멀리있는 요소나 near보다 가까이 있는 요소는 보이지 않을 것이다. 카메라에 안잡히기 때문이다. 렌더링이 안되기 때문이다.

 

 

import * as THREE from 'three'

import {
  WEBGL
} from './webgl'

if (WEBGL.isWebGLAvailable()) {

  // 장면 추가
  const scene = new THREE.Scene();
  scene.background = new THREE.Color(0xeeeeee);

  // 카메라 추가
  const fov = 75; //25, 50, 75
  const aspect = window.innerWidth / window.innerHeight;
  const near = 0.1; //가까이
  const far = 1000; //멀리
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

  // 카메라 위치 변경
  camera.position.set(0,0,1);

  // 렌더러 추가
  const renderer = new THREE.WebGLRenderer({
    alpha: true,
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  // 도형 추가
  const geometry = new THREE.BoxGeometry(0.5, 0.5, 0.5);
  const material = new THREE.MeshStandardMaterial({
    color: 0xFF7F00
  });
  const cube = new THREE.Mesh(geometry, material);
  cube.rotation.y = 0.5;
  scene.add(cube);

  //바닥 추가
  const planeGeometry = new THREE.PlaneGeometry(30, 30, 1, 1);
  const planeMaterial = new THREE.MeshStandardMaterial({
    color: 0xaaaaaa
  });
  const plane = new THREE.Mesh(planeGeometry, planeMaterial);
  plane.rotation.x = -0.5 * Math.PI;
  plane.position.y = -0.5;
  scene.add(plane);


  const pointLight = new THREE.PointLight(0xffffbb, 1);
  pointLight.position.set(0, 2, 12);
  scene.add(pointLight);

  function render(time) {
    renderer.render(scene, camera);
  }
  requestAnimationFrame(render);

  // 반응형 처리
  function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  }
  window.addEventListener('resize', onWindowResize);

} else {
  var warning = WEBGL.getWebGLErrorMessage();
  document.body.appendChild(warning);
}

 

 

 

 

이 코드를 베이스로 진행한다.

 

// 카메라 추가
  const fov = 75; //25, 50, 75
  const aspect = window.innerWidth / window.innerHeight;
  const near = 0.3; //가까이
  const far = 0.8; //멀리
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

 

카메라의 far을 1000에서 0.8로 줄이면 뒤 부분이 깍여 렌더링되는 것을 볼 수 있다.

 

 

 

 

---

5. 카메라 위치 변경

---

// 카메라 위치 변경
//   camera.position.set(0,0,1);
  camera.position.x = 0; //카메라 좌우 이동
  camera.position.y = 0.3; //카메라 상하 이동
  camera.position.z = 1;

position.set을 풀어쓰면 x, y, z을 조정하는 것이다.

x는 내가 보는 방향에서 -값이면 우측 이동, +값이면 좌측 이동을 진행한다.

y는 내가 보는 방향에서 -값이면 위로 이동, -값이면 아래로 이동을 진행한다.

z는 내가 보는 방향에서 -값이면 오브젝트가 앞으로 이동, +값이면 오브젝트가 뒤로 이동을 진행한다.

 

 

---

6. 카메라가 바라보는 위치 지정

---

간혹 위치를 조정할 때 카메라가 물체를 벗어나 비추는 경우가 있다. 물체를 무조건 비추도록 중심으로 두고 움직이고 싶다면 어떻게 할까?

camera.lookAt(new THREE.Vector3(0, 0, 0)); //특정 좌표를 쳐다보기

lookAt을 사용하면 된다.