ReactにBlenderオブジェクトを読み込み

Blenderで作ったオブジェクトをReactで表示

Blenderのお勉強

GWに時間があったので、下の本でBlenderのお勉強をしてました📖

そして私にも下の微妙なクマさんを作れちゃいました🐻＜クマー

となると react-three-fiber で表示したいよね〜
したいよね〜
ということで、やってみたやってみた！

Blenderから書き出し

まずはクマさんの各部品のモディファイアーを適用して
"A"で 全部品を選択 して ⌘-"J" で「オブジェクトを統合」を実行

[ファイル]→[エクスポート]→[flTF 2.0(.glb/.gltf)] を選択して
とりあえず "sample.glb" として保存。

react-three-fiber への読み込み

調べてみると、useGLTF というフックが使えるらしい
色々試してみたら、以下コードで表示できました。
sample.glb は public 以下に配置

import { OrbitControls, useGLTF } from '@react-three/drei'
import { Canvas } from '@react-three/fiber'

const GltfCanvas = () => {
  const LoadedModel = () => {
    const { scene } = useGLTF('sample.glb')
    return <primitive object={scene} />
  }
  return (
    <Canvas>
      <OrbitControls />
      <directionalLight />
      <ambientLight />
      <LoadedModel />
    </Canvas>
  )
}

export default GltfCanvas

表示結果

はいはい、こんな感じになりました。

あとは自由にグリングリンできますね！

感想

とりあえず最低限の実装方法のサンプルコードが作成できたのと
基本的にBlenderの操作も判るようになったので
今後のサイト作りの小技として使えると楽しいかなぁ...
とりあえずGWをダラダラ消費ぜずに
Outputを作ることができた自分を褒めたいです。