背景

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

環境

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フォルダの中に作成した。

App.jsx

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

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