【React×Blender】gltf形式で出力した3Dモデルが表示できなかった時の原因について

背景

Reactにおいてthreeのライブラリを使用し、Blenderで作成した3DモデルをWebページ上に表示させようとしたが、エラー文言が出力され、3Dモデルが表示されなかった。

環境

• vite：5.0
• raect：18.2
• three：0.158

前提

Blender側で3Dモデルをエクスポートしたときの設定は以下の通りです。

エラー内容

SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON
～～

結論

3dモデルを入れたassetsフォルダをpublicフォルダの中に作成する必要があった。

原因と対応

• 原因

以下のコマンドでReactのプロジェクトを作成した際にデフォルトでは、
srcフォルダ直下にassetsフォルダが生成されている。
本来であれば、publicフォルダに3Dモデルを入れたassetsを作成する必要があったと思われる。

 npm create vite@latest

今回はsrc直下のassetsに3Dモデルを入れ、GLTFLoaderで読み込もうとしたため、
エラーが出力されたと考えられる。

• 対応

3dモデルを入れたassetsフォルダをpublicフォルダの中に作成した。

• 参考

  以下が、3Dモデルを読み込んでシーンに追加しているコード部分です。

App.jsx

// 3Dモデルを読み込んでシーンに追加
const loader = new GLTFLoader();
    loader.load('assets/moon_and_star.glb', (gltf) => {
      scene.add(gltf.scene);
    });

結果

問題なく、3Dモデルが表示されました。

参考

• https://discourse.threejs.org/t/syntaxerror-unexpected-token-doctype-is-not-valid-json-at-json-parse-anonymous/42441/11