패스트캠퍼스 환급챌린지 22일차 미션 (2월 22일) : 초격차 패키지 : 21개 프로젝트로 완성하는 인터랙티브 웹 개발 with Three.js & Canvas 강의 후기

Part3 [Three.js]의 Chapter03 3D 텍스트 강의 후기(04~05강)

오늘은 폰트를 비동기적으로 로딩하는 방법과 Text Geometry를 화면 가운데로 정렬하는 방법에 대해 배웠습니다.
지난 시간에 기본적인 otf, ttf 폰트를 typeFont로 변경 후 Three.js가 제공하는 FontLoader class를 사용해서 three.js에서 사용할 수있는 font 객체를 반환하고 이를 TextGeometry에 font 옵션으로 추가하여 적용하는 것까지 했는데요, 이때 코드를 보시면 텍스트로 추가한 값이 onLoad cb scope 에서만 유효하다는 것을 확인할 수있습니다.

  const fontLoader = new FontLoader();
  // 1. load method
  fontLoader.load(
    "./assets/fonts/The Jamsil 3 Regular_Regular.json",
    (font) => {
      const textGeometry = new TextGeometry("안녕하세요", {
        font,
        size: 0.5, // 크기 설정
        height: 0.1, // 두께 지정
      });
      const textMaterial = new THREE.MeshPhongMaterial({ color: 0x00c896 });
      const text = new THREE.Mesh(textGeometry, textMaterial);
      scene.add(text);
    }
  );

 

전역으로 변수를 만들어 내부에서 수정할 수도있겠지만 코드의 가독성을 위해 async await을 사용해서 폰트를 불러오도록 수정했습니다

  const font = await fontLoader.loadAsync(
    "./assets/fonts/The Jamsil 3 Regular_Regular.json"
  );

코드가 훨씬 간결해졌네요!

 

다음으로는 텍스트를 중앙 정렬시키는 방법입니다.
저번에 올린 과제물 영상에서는 화면 양쪽이 잘려서 중앙에 위치한 것처럼 보였지만 사실은 글자의 시작부분이 화면 중앙에 위치해 전체적으로는 화면 우측으로 쏠린듯해 보였습니다.

이를 수정하기 위해 boundingBox 의 개념을 알아야합니다
boundingBox는 화면에 보이지는 않지만 Text Geometry를 감싸고 있는 영역입니다.

boundingBox를 확인해보려면 꼭 아래 computeBoundingBox 함수를 먼저 실행해야합니다!

boundingBox가 기본적으로 계산된 값이 아니라 명시적으로 계산 명령을 내린 후 확인가능합니다.

  textGeometry.computeBoundingBox();

textGeometry.boundingBox를 콘솔로 확인한 모습

min, max 객체 값으로 일반 객체가 아닌 Vector3를 사용하고있네요..! vector3는 threejs가 3D공간을 나타낼 때 사용하는 좌표클래스입니다.

https://threejs.org/docs/#api/en/math/Vector3

three.js docs

 

Text Geometry의 시작위치(min)와 끝위치(max)를 알면 너비를 알수있고 그 값은 반을 각 x,y,z값애서 빼주면 중앙 정렬이 됩니다.

이때는 지난 강의 때 사용해본 translate 메서드를 사용할 수 있습니다.

  textGeometry.translate(
    -(textGeometry.boundingBox.max.x - textGeometry.boundingBox.min.x) * 0.5,
    -(textGeometry.boundingBox.max.y - textGeometry.boundingBox.min.y) * 0.5,
    -(textGeometry.boundingBox.max.z - textGeometry.boundingBox.min.z) * 0.5
  );

 

((( 화면에서 보이는 텍스트는 화면을 돌리지않는 이상 2D 오브젝트처럼 보이는지라 처음엔 x ,y좌표만 빼는 걸 생각했네요…

3D 오브젝트를 다루고 있다는 사실을 잊지말아야겠습니다..😅)))

 

그리고 이 방법말고도 더 빠르게 중앙 정렬을 할 수있는 방법이 있습니다

  textGeometry.center();

단 위 코드는 중앙정렬만 가능하고 위치를 세세하게 조정할때는 사용할 수 없으므로 geometry의 translate를 사용하는 방식도 알아둬야 할 것 같습니다. (그런데,, y값이 약간 다르게 보이는 건 제 착각일까요..?)

개인적으로 css에서 사용하던 translateX(-50%) 처럼 지오메트리의 중간 너비값을 바로 계산할 수 있을거라 생각했는데요..

이런 기능은 따로 지원하지 않는 것 같네요..🤔

 
✨오늘의 학습 인증 샷

가운데 정렬된 텍스트 지오메트리

 

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.

https://fastcampus.co.kr/event_online_challenge_2401_mission

커리어 성장을 위한 최고의 실무교육 아카데미 | 패스트캠퍼스

https://bit.ly/48sS29N