텍스트 출력하기

FontLoader, TextGeometry import하기

THREE 모듈에 포함되어 있지 않으므로 따로 import를 해줘야한다.

Three.js 공식 문서에서 FontLoader로 검색하면 맨 아랫 부분에 공식 깃헙 저장소의 소스코드 링크가 나온다. 아래 링크를 CDN 링크에 이어붙여 사용하면 된다.

https://unpkg.com/three@0.145.0/ + examples/jsm/loaders/FontLoader.js
TextGeometry도 같은 방식으로 설정해준다.

import { FontLoader } from 'https://unpkg.com/three@0.145.0/examples/jsm/loaders/FontLoader.js'
import { TextGeometry } from 'https://unpkg.com/three@0.145.0/examples/jsm/geometries/TextGeometry.js'

FontLoader 사용하여 텍스트 세팅

const fontLoader = new FontLoader();
fontLoader.load('Roboto Black_Regular.json', (font) => {
  const geometry = new TextGeometry({
  	font,
    size: 10, // 텍스트의 크기 결정
    height: 2, // 텍스트의 두께 결정
  });
  const material = new THREE.MeshPhongMaterial({color: 0xffbb00});
  const text = new THREE.Mesh(geometry, material);
  scene.add(text);
})