R3F에서 3d Text만들기 및 웹폰트json 파일 크기 최적화

도입 배경 및 폰트 준비

 

2D로 택스트를 작성해서 넣었습니다.. 물론 단지 2D라서 그런건 아니지만 입체감이 있으면 좀 더 잘 보이고 이쁠 거 같아서 3d텍스트를 도입하기로 했습니다.

 

https://github.com/pmndrs/drei?tab=readme-ov-file#text3d

GitHub - pmndrs/drei: 🥉 useful helpers for react-three-fiber

이떄 사용할 것은 drei의 text3d입니다.

스토리북으로 실습도 할 수 있는데, 해당 컴퍼넌트를 사용하려면 json형식의 font가 필요하다고 하네요.

이는 drei의 text3d는 three.js의 textGeometry기반으로 만들어졌기 때문입니다.

 

따라서  폰트를 다운받고, (시바와 어울리는 동글동글한 글씨체를 찾았습니다)

 

폰트를 json파일로 변환 (링크)

 

 

하지만 wasd space 이정도의 글자만 사용할려고 하는데,, 용량이 좀 크네요...

 

우선 폰트 먼저 적용해보려고 합니다

 

폰트 적용

우선 폰트 먼저 적용해보려고 합니다

import { Center, Text, Text3D } from '@react-three/drei';

export default function Manual() {
  const fontUrl = '/font/ONE_Mobile_POP_Regular.json';

  const fontStyle = {
    font: fontUrl,
    size: 0.2,
    letterSpacing: 0.01,
    height: 0.02,
    fontSize: 2,
  };
  return (
    <group>
      <group>
        <Text3D position={[-0.12, 0.57, 0]} {...fontStyle}>
          이동
          <meshBasicMaterial color={'#654321'} />
        </Text3D>
        <Text3D position={[0, 0.27, 0]} {...fontStyle}>
          W
        </Text3D>
        <Text3D position={[-0.26, 0, 0]} {...fontStyle}>
          A S D
        </Text3D>
      </group>
      <group position={[0, 2, 0]}>
        <Text3D position={[0, 0.35, 0]} {...fontStyle}>
          비행
          <meshBasicMaterial color={'#654321'} />
        </Text3D>
        <Text3D position={[-0.26, 0, 0]} {...fontStyle}>
          SPACE
        </Text3D>
      </group>
    </group>
  );
}

 

 

위치는 조정해야겠지만 글자 생김새는 마음에 드네요.. 색을 사실 잘 못정하겠네요 ㅠㅠ 색이 같으면 너무 안 보일거 같고,,너무 독특하면 튈거같아서 국방색 느낌으로 조합했습니다..

 

폰트 파일 최적화

json형식의 웹폰트는 글리프( 하나 이상의 문자를 시각적으로 표현하기 위해 타이포그래피에서 사용되는 용어)로 구성되어있습니다. 이 중에서 사용하는 글리프만 추출하여 json파일의 크기를 줄여볼려고합니다

 

import fontjson from './ONE_Mobile_POP_Regular.json';
export default function Manual() {

  // 사용하는 font 최적화
  useEffect(() => {
    const fontData = fontjson;
    const targetText = '이동WASDPCE비행카메라 제어마우스 활용';
    const modifiedGlyphs = {};

    for (const char of targetText) {
      const charKey = fontData.glyphs[char]
        ? char
        : fontData.glyphs[char.toUpperCase()]
        ? char.toUpperCase()
        : null;
      if (charKey) {
        modifiedGlyphs[charKey] = fontData.glyphs[charKey];
      }
    }

    const modifiedFontData = {
      ...fontData,
      glyphs: modifiedGlyphs,
    };
    console.log(JSON.stringify(modifiedFontData));
  }, []);

콘솔에 사용하는 글리프들을 확인하고 이를 json파일로 덮어씌웁니다.

 

그  결과  900배 정도 크기가 감소했네요..

 

최종 위치는 아래와 같이 벽에 배치했습니다. 색깔도 베이지 색으로,,