我們可以在 sketchfab 上找到 GLB、 GLTF 模型，也可以透過 sketchfab 自動轉換不同格式的模型為 GLTF （有機率失敗）

https://sketchfab.com/3d-models/cheytac-m200-intervention-8bba3f02b2d643ccba945135a2a4a6f9#download
https://sketchfab.com/3d-models/honda-cb-750-f-super-sport-1970-f121301624174b179ca4d50158797b03

https://gltf-viewer.donmccurdy.com/

gltf-pipeline -i WH.gltf -o modelDigital_watch.gltf -d

Total: 398.655ms


npx gltfjsx modelDigital_watch.gltf
group removed (empty)
 Done:  ModelDigital_watch.js

這樣就可以得到我們想要的 GLTF 資產轉換為聲明性和可重用的react-three-fiber JSX 組件。

/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
*/

import React, { useRef } from 'react'
import { useGLTF } from '@react-three/drei'

export function Model(props) {
  const { nodes, materials } = useGLTF('/modelDigital_watch.gltf')
  return (
    <group {...props} dispose={null}>
      <group rotation={[-2.35, 0, 0]} scale={0.04}>
        <group rotation={[Math.PI / 2, 0, 0]} scale={0.01}>
          <group scale={100}>
            <group position={[0.1, 0.04, 2.35]} rotation={[-Math.PI / 2, 0, 0]} scale={100}>
              <group position={[0, 0.03, 0]}>
                <mesh geometry={nodes.Band_Band_0.geometry} material={materials.Band} />
              </group>
              <group position={[0, -0.01, 0]}>
                <mesh geometry={nodes.Glass_Glass_0.geometry} material={materials.Glass} />
              </group>
              <mesh geometry={nodes.Case_Case_0.geometry} material={materials.Case} />
              <mesh geometry={nodes.Case_Face_0.geometry} material={materials.Face} />
            </group>
          </group>
        </group>
      </group>
    </group>
  )
}

useGLTF.preload('/modelDigital_watch.gltf')