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

오늘은 이어서 Part3 [Three.js]의 Chapter03 3D 텍스트 강의를 들었습니다.(01~03강)

 

그럼 오늘 강의에서 배운 내용들과 느낀점을 간략하게 작성해 볼게요!

 

🔎01. 폰트 변환하기

Three.js에서 텍스트를 보여줄때는 text geometry를 사용하는데요, 이때 전달하는 폰트의 형식이 일반적으로 많이 사용하는 ttf,otf 같은 형식이 아니라 TypeFace라는 json 형식의 코드여야 합니다. 가장 간단히 적용해 볼 수 있는 폰트는 아래코드처럼 가져올 수 있는데요.

import typeface from 'three/examples/fonts/gentilis_bold.typeface.json'

그외 Three.js에서 기본적으로 지원하는 폰트들

위 폰트들은 한글지원이 안되는지라 강의에서는 한글 지원이 되는 폰트를 새로 받은 후 TypeFace로 변환하여 사용하였습니다.

 

저는 제가 가지고있는 지마켓산스OTF 파일을 TypeFace 형식으로 변환해서 사용했습니다.

갠적으로 자주사용하는 예쁜 폰트입니다 ㅎㅅㅎ 아래 지마켓 홈페이지에서 다운받으실 수 있어요.

https://corp.gmarket.com/fonts/

변환된 typeface 형식 폰트

아래 사이트에 가지고있는 폰트파일을 올리면 TypeFace 형식으로 변환이 가능합니다.

https://gero3.github.io/facetype.js/

Facetype.js

 

🔎02. 폰트 불러오기

typeface로 변환한 파일을 main.js에서 불러와 사용해보겠습니다. 폰트를 불러올 때는 Three.js가 제공하는 FontLoader 클래스를 사용하시면 됩니다. FontLoader는 JSON format 파일을 불러오고 Shapes 배열형태인 'font'를 리턴해줍니다.

자세한 내용은 아래 공식문서를 참조해주세요.

https://threejs.org/docs/index.html?q=font#examples/en/loaders/FontLoader

three.js docs

폰트를 로드하는 첫번째 방법은 fontLoader의 load 메서드를 사용하는 것 입니다.

load 메서드의 첫번째 인자로는 폰트 파일의 위치, 그리고 순서대로 onLoad, onProgree, onError cb함수를 추가할 수 있습니다.

// FontLoader 클래스 호출
import { FontLoader } from 'three/addons/loaders/FontLoader.js';
// 인스턴스 생성
const fontLoader = new FontLoader();
// load 메서드로 폰트 불러오기
  fontLoader.load(
    "./assets/fonts/Gmarket Sans Bold_Regular.json", //경로 지정
    (font) => {
      console.log("onload", font);
    },
    (event) => {
      console.log("progress", event);
    },
    (error) => {
      console.log("error", error);
    }
  );

콘솔을 확인해보면 onProgress 콜백이 호출될때 loaded값이 점점 커지면서 total 값과 같아지고 마지막에 onload 함수가 호출되는 걸 볼 수 있습니다.

 

폰트를 로드하는 두번째 방법은 typeface객체 자체를 main.js에서 직접 불러오고 three.js가 이해할 수 있게 파싱해서 사용하는 방법입니다.

import jsonFont from './assets/fonts/Gmarket Sans Bold_Regular.json';

const font = fontLoader.parse(jsonFont);

강의에서는 Load메서드에 경로를 지정하는 방식을 사용했습니다.

🔎03. 텍스트 추가하기

 

저번에 불러온 폰트를 적용할 text geometry를 만들어 보겠습니다. 먼저 아래 호출문으로 TextGeometry class를 import 해주세요

import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';

TextGeometry에 대한 자세한 내용은 아래 공식 문서를 확인해주세요

https://threejs.org/docs/index.html?q=text#examples/en/geometries/TextGeometry

three.js docs

그리고 load메서드의 onload 콜백부분을 아래처럼 변경해줍니다.

  fontLoader.load("./assets/fonts/Gmarket Sans Bold_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);
  });

여기까지 작성하셨을 때는 화면에 아무것도 보이지 않는데요, 이유는 MeshPhongMaterial이 빛에 영향을 받는 재질이기 때문에 빛이 없으면 아무것도 보이지 않기 때문에 그렇습니다 ㅎㅎ;

ambientLight와 pointLight를 장면에 추가해주시면 텍스트가 잘 보이게 됩니다.

 

그런데 저는 잘 안보이더라구요..ㅠ하핫.. 아래와 같은 오류가 발생했습니다.

 

onError 콜백에서 확인했을 때 로드자체 문제는 아닌 것 같고 폰트를 불러온 후 글자 path 를 그리는 과정에서 뭔가 문제가 있던 것 같습니다..🧐 혹시몰라 강사님이 사용하신 폰트로 변경해서 해보니 잘되더라구요? 그래서 혹시 OTF, TTF 문제일까 싶어서 지마켓 산스 TTF파일을 다운로드받아 typeface로 변환후 사용해보니 잘 되는 것을 확인해볼 수 있었습니다.

마지막으로 확실히 해보기위해 강사님이 사용하신 잠실체 OTF 폰트를 변환후 적용해보니 에러코드는 안나지만 글자가 깨져보이는 현상이 발생했습니다. 정확한 이유는 알수없으나 OTF파일을 https://gero3.github.io/facetype.js/ 사이트에서 typeface로 변환하는데 뭔가 문제가 있는 게 아닌가 싶네요.

 

이후에는 조명과 조명의 위치에따라 텍스트의 명암이 다르게 설정되는 것을 확인하기 위해

1. OrbitControls 추가

2. lil-gui 라이브러리 설치 및 GUI 설정 추가 

를 진행해주었습니다.

고러면 아래 결과물처럼 PoistionLight의 위치에 따라 다르게 보이는 텍스트 지오메트리를 확인하실 수 있습니다.

  const ambientLight = new THREE.AmbientLight(0xffffff, 2);
  scene.add(ambientLight);
  const pointLight = new THREE.PointLight(0xffffff, 3);
  const pointLightHelper = new THREE.PointLightHelper(pointLight, 0.5);
  pointLight.position.set(3, 0, 2);
  scene.add(pointLight, pointLightHelper);
  gui.add(pointLight.position, "x").min(-3).max(3).step(0.1);

(p.s 강사님은 ambientLight, pointLight 값을 둘다 0.5, 1정로 작게 설정하셔도 화면에서 텍스트가 밝게 잘보이는데 저는 이상하게 좀 어둡게 보이더라구요..? 그래서 조명 강도를 좀 높였는데 이 부분은 나중에 추가로 알아봐야할 것 같습니다 ㅡㅅㅡ)

✨오늘의 결과물

 

오늘은 일반 폰트를 typeface.js 로 변경하고 three.js 프로젝트에 적용하는 작업을 진행했습니다. 왜 번거롭게 typeface라는 형식을 사용할까싶었는데 생각해보면 js를 사용해서 폰트를 보여주는 거면 페이지 성능 최적화나 다양한 브라우저, OS에서도 일관성을 유지할 수 있다는 장점이 있는 것 같습니다!

 

https://churchm.ag/standardizing-your-web-projects-with-typeface-js/

Standardizing Your Web Projects with Typeface.js - ChurchMag

 

✨오늘의 학습 인증 샷

 

 

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

https://fastcampus.co.kr/event_online_challenge_2401_mission

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

https://bit.ly/48sS29N