[Three.js] Three.js Camera updateProjectionMatrix 정리

Three.js에서 Camera 객체에 updateProjectionMatrix를 호출하는 경우가 발생한다. 대부분 updateProjectionMatrix를 호출하는 기준은 카메라의 FOV(화각)이나 aspect ratio(종횡비), 줌 또는 스케일 등의 변경이 있을 때마다 updateProjectionMatrix를 호출하여 렌더링 변경을 해줘야 한다.

---

updateProjectionMatrix

ProjectionMatrix를 투영행렬이라고 하는데, 간단히 설명하면 2D 화면에 3D처럼 보이도록 투영시키는 행렬을 말한다. 그래서, three.js에서 3D 화면을 볼 때 카메라의 fov, aspect 등의 설정으로 3D 화면을 볼 수 있다.

 

그래서, 이 updateProjectionMatrix의 경우에는 카메라의 설정 등을 변경하면 호출을 해야 한다.

 

1. 카메라 aspect 비율 변경 시

// 카메라 aspect 비율 업데이트
if (this.camera && this.tsim01CanvasBody) {
	this.camera.aspect = this.tsim01CanvasBody.offsetWidth / this.tsim01CanvasBody.offsetHeight;
	this.camera.updateProjectionMatrix();
}

 

2. 카메라 zoom factor 변경 

updateZoom: function() {
          // 3D 화면 크기 조정
          if (this.camera) {
              this.camera.zoom = this.scale / 10;  // 10을 기준으로 설정
              this.camera.updateProjectionMatrix();
          }
}

 

 

3. 이 외에도 fov, aspect, near, far  등이 변경될 때도 updateProjectionMatrix를 호출해야 한다.

 

 

위의 방식대로 카메라에 대한 설정값을 변경하였을 때, updateProjectionMatrix를 호출하여 투영행렬로 갱신을 해줘야 한다.