React(Next)で3Dモデル(GLTF)を表示する

概要

react-three-fiberというライブラリを使って、GLTF形式の3Dモデルを自分のサイトに載せるのだ
https://docs.pmnd.rs/react-three-fiber/getting-started/introduction

環境

package.json(一部)

"next": "12.2.5",
"react": "18.2.0",
"@react-three/drei": "^9.34.4",
"@react-three/fiber": "^8.8.10",
"three": "^0.145.0"

その他筆者の環境にはreact-bootstrapなど入っているが省略

ディレクトリ構成

root/
├ pages/
│ 　 └ index.tsx
├ components/
│ 　 └ model.tsx
└ public/
　 　 └ rowlet.gltf

準備

プロジェクトを準備するところは省略,create-react-appなりなんなりと
プロジェクトのルートディレクトリに移動し以下のコマンドを実行

$ yarn add three @react-three/fiber @react-three/drei
$ yarn add -D @types/three

コード

Model.tsx

import React from "react";

import { useLoader } from "@react-three/fiber";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

export function Model(prop: { src: string }) {
  const gltf = useLoader(GLTFLoader, prop.src);
  return <primitive object={gltf.scene} scale={0.4} />;
}

index.tsx

import { Model } from "../../components/Model";
import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
import * as React from "react";


const App = () => {
  return (
        <div style={{ width: "100vw", height: "100vh" }}>
          <Canvas>
            <OrbitControls />
            <ambientLight />
            <Model src="/rowlet.gltf" />
          </Canvas>
        </div>
  );
};

export default App;

nextでは静的ファイルのパスがpublicディレクトリをルートとする絶対パスであるため注意しよう(2敗)

エラー

Error:cannot find module 'three'

は？？？あるが？？？
しかもランタイムエラーなんですよねこれ、〇すぞ～～～！！！
いろいろ試した結果、キャッシュ削除からのライブラリ再インストールで解決しました
https://sakanasoft.net/yarn-cache/

Error: Unknown property 'object' found  react/no-unknown-property

うるせ～～～！！！しらね～～～！！！
…というわけにもいかないので、eslintrc.jsonいじって解決

eslintrc.json

{
    "rules": {
+      "react/no-unknown-property": ["error", { "ignore": ["object"] }]
    }
}

実はModel.tsx中でdreiのuseGLTF使ってないのは、eslintrc.jsonのいじる項目が多そうで辟易したからです
参考:
https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unknown-property.md

実行画面

https://kerusu.xyz/shadow-box

うわぁい

感想

Three.jsなんもわからん人間でも手軽に使えてええなのお気持ち、カメラ位置とかいじれるみたいなので公式ドキュメント見て挑戦しようね