[Three.js] 2D 타일 배치하기

Three.js는 3D 라이브러리이지만, 카메라 깊이 방향의 한 축을 고정하면 2D 처럼 구현할 수 있다.

 

png asset은 여기에서 구했다.

https://kenney.nl/starter-kits

Starter Kits · Kenney

 

그 와중에 내가 겪은 이슈..

 

canvas : 800 x 800 px

mapData : 10 x 10 2차원 행렬

tile size : 80 x 80 px 

 

그럼 캔버스에 꽉차게 타일이 배치되어야하는데 상단에 까맣게 빈 공간이 존재했다. 

의도적으로 타일 텍스쳐를 렌더링하지않고 빵꾸냈을 때 정사각형 타일이 아니라 약간 직사각형인걸 볼 수 있다.  

하지만 콘솔 로그를 찍어보면 타일 geometry 크기는 80 x 80인걸 확인할 수 있었다. 

 

// 카메라 위치 
const width = 800;
const height = 800;
renderer.setSize(width, height);

camera = new THREE.OrthographicCamera(0, width, height, 0, -1000, 1000);

camera.position.set(0, 200, 200);
camera.lookAt(0, 0, 0);

문제점 1️⃣

left   = 0
right  = 800
top    = 800
bottom = 0

 

-> frustum 중심 (400, 400)

가로 중심 : (left + right) / 2 = 400

세로 중심 : (top + bottom) / 2 = 400

 

x : 0 ~ 800 

y : 0 ~ 800

 

그런데 카메라는 원점 (0,0,0)을 보고 있음

 

문제점 2️⃣

카메라 position (0, 200, 200) -> y/z 값을 갖는 기울어진 각도로 평면을 보여주게 된다. 

이게 타일이 직사각형으로 눌려서 보였던 직접적인 원인

// 타일 포지션
tile.position.set(
  x * this.tileWidth + this.tileWidth / 2,
  0,
  -(y * this.tileHeight) - this.tileHeight / 2
);

 

---

▼ 지피티 닥달해서 고친 결과 
타일이 정사각형으로 렌더되고 캔버스도 꽉 찼다! 

// 카메라 위치 - 변경
camera = new THREE.OrthographicCamera(
  -width / 2,
  width / 2,
  height / 2,
  -height / 2,
  -1000,
  1000
);

camera.position.set(0, 500, 0);
camera.lookAt(0, 0, 0);

변경 내용 1️⃣

left   = -400
right  = 400
top    = 400
bottom = -400

-> frustum 중심 (0,0)

( -400 + 400 ) / 2 = 0
(  400 + -400 ) / 2 = 0

 

x : -400 ~ 400

y : -400 ~ 400 

 

카메라도 정확히 중심을 봄. 

 

해결 2️⃣

카메라 position (0, 500, 0) -> lookAt(0,0,0) 

탑뷰 구조로 세팅

// 타일 포지션 - 변경
tile.position.set(
  x * this.tileWidth - this.width / 2 + this.tileWidth / 2,
  0,
  -(y * this.tileHeight - this.height / 2 + this.tileHeight / 2)
);

 

타일도 중심 기준으로 이동 

---

2️⃣번 문제점이었던 카메라만 탑뷰로 고쳐도 타일이 직사각형에서 정사각형으로 바르게 렌더링되면서 캔버스에 평면이 꽉차게 보인다. 

하지만 frustum이 불일치하는 문제는 드러나지 않았을 뿐 좌표계가 뒤틀려있는 것은 여전히 존재하는 문제점이다. 

따라서 1️⃣번처럼 중심 기준으로 좌표계를 통일하는 것도 필요한 조치였다. 

---

PerspectiveCamera vs. OrthographicCamera 

view frustum 차이 

참고. https://dudurian.tistory.com/140

PerspectiveCamera

OrthographicCamera

 

---

그나저나 2월에 한 가지 기능은 완성하려고했는데 이제야 맵 세팅을 하고있다. ㅋㅋ

고퀄리티의 3D 건축물 asset을 무료로 구하기는 어려운거같아서 2D 맵에 캐릭터가 움직이는 형식을 먼저 구현하는 중..