@react-three/fiber 初学笔记

glb模型拆解，将模式按组进行拆解成mesh,方便添加事件

npx gltfjsx public/glb/officeModel2.glb

/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
Command: npx gltfjsx@6.2.16 public/glb/officeModel2.glb 
*/

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

export function Model(props) {
  const { nodes, materials } = useGLTF('/officeModel2.glb')
  return (
    <group {...props} dispose={null}>
      <group position={[-46.614, 33.274, -78.146]} rotation={[Math.PI / 2, 0, 0]}>
        <mesh geometry={nodes.zuoding_1.geometry} material={materials.a52} />
        <mesh geometry={nodes.zuoding_2.geometry} material={materials.a42} />
      </group>
      <group position={[63.126, 15.557, -70.959]} rotation={[Math.PI / 2, 0, -Math.PI / 2]}>
        <mesh geometry={nodes.zuo2_1.geometry} material={materials.a43} />
        <mesh geometry={nodes.zuo2_2.geometry} material={materials.a32} />
        <mesh geometry={nodes.zuo2_3.geometry} material={materials.a55} />
        <mesh geometry={nodes.zuo2_4.geometry} material={materials.a29} />
        <mesh geometry={nodes.zuo2_5.geometry} material={materials.a56} />
        <mesh geometry={nodes.zuo2_6.geometry} material={materials.a52} />
        <mesh geometry={nodes.zuo2_7.geometry} material={materials.a50} />
      </group>
      <group position={[63.126, 15.557, -70.959]} rotation={[Math.PI / 2, 0, -Math.PI / 2]}>
        <mesh geometry={nodes.zuo3_1.geometry} material={materials.a43} />
        <mesh geometry={nodes.zuo3_2.geometry} material={materials.a32} />
        <mesh geometry={nodes.zuo3_3.geometry} material={materials.a29} />
        <mesh geometry={nodes.zuo3_4.geometry} material={materials.a56} />
        <mesh geometry={nodes.zuo3_5.geometry} material={materials.a55} />
        <mesh geometry={nodes.zuo3_6.geometry} material={materials.a52} />
        <mesh geometry={nodes.zuo3_7.geometry} material={materials.a50} />
      </group>
      <group position={[-62.155, 3.75, 76.565]} scale={0.12}>
        <mesh geometry={nodes.zuo5_1.geometry} material={materials.a29} />
        <mesh geometry={nodes.zuo5_2.geometry} material={materials.a52} />
        <mesh geometry={nodes.zuo5_3.geometry} material={materials.a50} />
        <mesh geometry={nodes.zuo5_4.geometry} material={materials.a55} />
        <mesh geometry={nodes.zuo5_5.geometry} material={materials.a56} />
        <mesh geometry={nodes.zuo5_6.geometry} material={materials.vhfthult} />
        <mesh geometry={nodes.zuo5_7.geometry} material={materials.cgbhffault} />
        <mesh geometry={nodes.zuo5_8.geometry} material={materials['Material #1621']} />
      </group>
      <group position={[-62.155, 3.75, 76.565]} scale={0.12}>
        <mesh geometry={nodes.zuo1_1.geometry} material={materials['a29.001']} />
        <mesh geometry={nodes.zuo1_2.geometry} material={materials['a55.001']} />
        <mesh geometry={nodes.zuo1_3.geometry} material={materials['a50.001']} />
        <mesh geometry={nodes.zuo1_4.geometry} material={materials.a30} />
        <mesh geometry={nodes.zuo1_5.geometry} material={materials.a22} />
        <mesh geometry={nodes.zuo1_6.geometry} material={materials.a27} />
        <mesh geometry={nodes.zuo1_7.geometry} material={materials.a28} />
        <mesh geometry={nodes.zuo1_8.geometry} material={materials['a43.001']} />
        <mesh geometry={nodes.zuo1_9.geometry} material={materials['a32.001']} />
        <mesh geometry={nodes.zuo1_10.geometry} material={materials['a52.001']} />
        <mesh geometry={nodes.zuo1_11.geometry} material={materials.a19} />
        <mesh geometry={nodes.zuo1_12.geometry} material={materials.a40} />
        <mesh geometry={nodes.zuo1_13.geometry} material={materials['a56.001']} />
        <mesh geometry={nodes.zuo1_14.geometry} material={materials.a21} />
        <mesh geometry={nodes.zuo1_15.geometry} material={materials.a17} />
        <mesh geometry={nodes.zuo1_16.geometry} material={materials.a16} />
        <mesh geometry={nodes.zuo1_17.geometry} material={materials.a15} />
        <mesh geometry={nodes.zuo1_18.geometry} material={materials.a18} />
        <mesh geometry={nodes.zuo1_19.geometry} material={materials.a46} />
        <mesh geometry={nodes.zuo1_20.geometry} material={materials.a45} />
      </group>
      <group position={[-46.614, 33.274, -78.146]} rotation={[Math.PI / 2, 0, 0]}>
        <mesh geometry={nodes.zuo4_1.geometry} material={materials.a52} />
        <mesh geometry={nodes.zuo4_2.geometry} material={materials.a50} />
        <mesh geometry={nodes.zuo4_3.geometry} material={materials.a56} />
        <mesh geometry={nodes.zuo4_4.geometry} material={materials.a29} />
        <mesh geometry={nodes.zuo4_5.geometry} material={materials.a55} />
      </group>
    </group>
  )
}

useGLTF.preload('/officeModel2.glb')