TTF 폰트를 읽어서 SVG와 3D로 렌더링 하기

[admin.kim]

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공간에서 사용되게 됩니다