Three.js 에서 한글 폰트 사용하기

React Three Fiber와 drei에서 한글 텍스트를 사용할 때 엑스박스로 표시되는 문제가 생겨서 이 문제를 해결하는 방법을 찾았다.

 

 

문제 상황

 

<Text 
  position={[0, 0.5, 0]} 
  fontSize={0.8} 
  color="white"
  font="/NanumGothic-Bold.ttf"
  anchorX="center"
  anchorY="middle"
>
  평균 객단가
</Text>

이 코드에서 한글 텍스트가 엑스박스(□□□)로 표시된다.

Three.js의 Text 컴포넌트는 일반 TTF/WOFF 폰트를 직접 사용할 수 없기 때문이다.

 

 

해결 방법

Three.js에서 한글을 표시하려면 특별한 JSON 형식의 폰트 파일이 필요함.

 

폰트 변환 과정

1. TTF 폰트 준비: 사용할 한글 폰트 파일을 준비한다.
2. facetype.js 변환: TTF 파일을 Three.js 호환 JSON으로 변환한다.

 

변환된 폰트 사용하기

 

<Text 
  position={[0, 0.5, 0]} 
  fontSize={0.8} 
  color="white"
  font="/NanumGothic-Bold.json" // JSON 폰트 파일 경로
  anchorX="center"
  anchorY="middle"
>
  평균 객단가
</Text>

 

 

주의사항

1. 올바른 JSON 형식: 변환된 JSON 파일에는 glyphs, familyName, ascender, descender 등의 정보가 포함되어야 한다.
2. 한글 글리프 포함: 변환 시 한글 글리프가 포함되도록 설정하지 않으면 한글은 여전히 엑스박스로 표시된다.
3. 파일 위치: 변환된 JSON 파일은 public 폴더에 저장해야 한다.

 

 

React Three Fiber에서 한글을 표시하려면 일반 폰트 파일을 Three.js 호환 JSON으로 변환해야 한다. facetype.js 변환기로 이 과정을 수행하면 3D 공간에서 한글을 정상적으로 표시할 수 있다.