👏

【React Three Fiber】Reactで作る3D【#14useGLTF】

2023/04/06に公開

【#14useGLTF】

YouTube:https://youtu.be/BrQw92tN1j4

https://youtu.be/BrQw92tN1j4

今回は別のソフト等で作成された3Dモデルを読み込んで、
ブラウザで表示する部分について解説します。

使用する3Dモデルはこちらのサイトからダウンロードします。
モデルによってライセンスが異なりますのでご注意ください。

https://polyhaven.com/

https://sketchfab.com/3d-models/retro-pc-71cea9aba84842abbea4716effd3f9b8

モデルが用意できましたら、
「public」フォルダに「gltf」というフォルダを作成して、

「textures」
「license.txt」
「scene.bin」
「scene.gltf」

を全て移動します。

ここまでできましたら、
「src」->「components」フォルダに新しく「GeoGltf.tsx」を作成します。

モデルを読み込む方法は、
「@react-three/drei」の「useGLTF」を使用する方法と
「Gltf」コンポーネントのsrcにモデルのパスを渡す方法があります。

src/components/GeoGltf.tsx
import { Gltf, useGLTF } from '@react-three/drei'

const GeoGltf = () => {
  const gltfModel = useGLTF('/gltf/scene.gltf')

  return (
    <Gltf src="/gltf/scene.gltf" scale={0.02} />
    // <mesh scale={0.02}>
    //   <primitive object={gltfModel.scene} />
    // </mesh>
  )
}

export default GeoGltf

ここまでできましたら、
App.tsxに上記のコンポーネントを設定します。

src/App.tsx
import { Canvas } from '@react-three/fiber'
import { OrbitControls } from '@react-three/drei'
import GeoBox from './components/GeoBox'
import GeoText from './components/GeoText'
import GeoText3d from './components/GeoText3d'
import GeoTexture from './components/GeoTexture'
import GeoEnv from './components/GeoEnv'
import GeoGltf from './components/GeoGltf'

function App() {
  return (
    <div className="w-full h-screen">
      <Canvas shadows camera={{ position: [0, 0, 10] }}>
        <ambientLight intensity={0.1} />
        <directionalLight position={[0, 0, 5]} castShadow />
        {/* <GeoBox /> */}
        {/* <GeoText /> */}
        {/* <GeoText3d /> */}
        {/* <GeoTexture /> */}
        {/* <GeoEnv /> */}
        <GeoGltf />
        <OrbitControls />
      </Canvas>
    </div>
  )
}

export default App

カメラの位置がモデルの内部にありますので、
モデルのスケールを調整するか、
カメラの位置を調整すると正常に表示されるようになるかと思います。

Discussion