TTF 폰트 로딩 및 다루기
두 개의 데모가 있습니다. https://www.alongthecloud.com/ 에 있는데요
하나는 opentype.js 와 SVG를 사용하는 데모이고 또 하나는 Three.js에 포함되어 있는 TTFLoader를 사용하여 폰트를 그리고 평면 그림자를 드리우는 데모입니다
평면 그림자는 여기 ShadowMesh 예제 에서 사용된 그림자 기법입니다. 비용이 싸지만 평면에만 그림자를 드리울 수 있고 효과를 주기 어렵죠
두 개의 데모는 TTF 를 직접 로딩 하며 해당 부분만 설명하겠습니다
Opentype.js font + SVG 데모
컴포넌트에서
import opentype from 'opentype.js';
...
const [svgPath, setSvgPath] = useState((''));
const path = font.getPath(text, 0, fontSize, fontSize);
const svgPath = path.toPathData();
setSvgPath(svgPath);
이렇게 로딩하며 렌더링 부분은
<g>
<path d={svgPath} stroke={stroke} fill={fill} />
</g>
이렇게 되어 있습니다
여기에 svg의 style을 사용하여 여러 효과를 주면 되겠죠
R3F 3D Font 와 Plane Shadow 데모
import { TTFLoader } from 'three/examples/jsm/loaders/TTFLoader';
...
const loadFont = async (fontUrl) => {
console.log('Try Load Font');
try {
const loader = new TTFLoader();
loader.load(fontUrl, function (json) {
const font = new Font(json);
// 몇몇 한글 폰트에서 공백이 ?로 표시되는 것을 방지
if (!font.data.glyphs[' ']) {
font.data.glyphs[' '] = font.data.glyphs['\0'];
}
setUserFont(font);
})
} catch (error) {
console.error('Font loading error :', error);
}
};
중간에 폰트 글리프 ' '를 바꿔주는 곳이 있는데 주석 단 것 처럼 몇몇 한글 폰트의 경우 저렇게 해 주지 않으면 공백이 ?로 표시되는 경우가 있습니다
위 코드로 로드된 font 개체는
const shapes = font.generateShapes(text, fontSize);
const geometry = new THREE.ShapeGeometry(shapes, 20);
이렇게 Geometry로 바뀌어서 3D공간에서 사용되게 됩니다
