📚

Next.js 13でThree.jsのTextのFontを読み込む方法

2023/08/27に公開

Next.js

結論

publicフォルダにfontsフォルダを作り、その中にjsonファイルを入れる
- publicからじゃないと404が出る

環境

  "dependencies": {
    "@types/node": "20.4.5",
    "@types/react": "18.2.17",
    "@types/react-dom": "18.2.7",
    "next": "13.4.12",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.45.2",
    "three": "^0.155.0",
    "typescript": "5.1.6",
  },
  "devDependencies": {
    "@types/three": "^0.155.0",
  }
}

状況

        const fontLoader = new FontLoader();

        fontLoader.load(
            '/fonts/helvetiker_regular.typeface.json',
            (font) => {
                const textGeometry = new TextGeometry("Hello Three.js", {
                    font: font,
                    size: 0.5,
                    height: 0.2,
                    curveSegments: 12,
                    bevelEnabled: true,
                    bevelThickness: 0.03,
                    bevelSize: 0.02,
                    bevelOffset: 0,
                    bevelSegments: 5,
                });
                textGeometry.center();

                const textMaterial = new THREE.MeshStandardMaterial();
                const text = new THREE.Mesh(textGeometry, textMaterial);
                
                text.castShadow = true;
                text.position.z = 1;
                scene.scene.add(text)
            }
        );

実行すると、

Failed to load resource: the server responded with a status of 404 (Not Found) :3000/fonts/helvetiker_regular.typeface.json:1

のようなエラーが出る。

対処法

nextjsのpublicフォルダにfontsフォルダを作り、その中にフォントjsonを入れる

ttfとかのファイルをjsonに変換する方法などは以下の記事が参考になりました。

参考記事

参考コード

こちらのリポジトリを見てpublicに置くと解決することがわかりました。ありがとうございました。

結論

環境

状況

対処法

参考記事

参考コード

Discussion