gltf.jsx

import React, { memo, Suspense } from "react";
import { useGLTF } from "@react-three/drei";
import { Select } from "@react-three/postprocessing";
const statusbar = [" ", "#6AE49B", "#4887E0", "#8D8D8D", "#F31A1A"];

const Mesh = (props) => {
  let { name, equpmentNo, setequpmentNo, status, scale } = props;
  const { nodes } = useGLTF(props.path);

  return (
    <Select enabled={equpmentNo == name}>
      <group
        {...props}
        dispose={null}
        onClick={() => {
          if(name=='0') return;
          if(equpmentNo==name){
            setequpmentNo(null);
          }else{
            setequpmentNo(name);
          }
        }}
      >
        {Object.keys(nodes).map((it, i) => {
          return (
            <mesh geometry={nodes[it].geometry} scale={scale ?? 0.002} key={it}>
              <meshPhysicalMaterial
                color={statusbar[status]}
                //transparent={true} //是否支持透明度
                // opacity={0.5} //透明度
                //visible={true}//是否可见
                wireframe={equpmentNo == name} //线框化
                //metalness={1} //金属性贴图
                roughness={0} //粗糙程度 越精细镜面效果越强
                clearcoat={1} // 透明漆 罩光漆
                transmission={0} //透光效果 模型透明 表面效果处理不变 opactiy是整体透明 不削弱反射光
                // reflectivity={1} //光的 反射率
              />
            </mesh>
          );
        })}
      </group>
    </Select>
  );
};

function Model(props) {
  return (
    <Suspense fallback={null}>
      <Mesh
        {...props}
        path={require(`@/assets/gltf/${props?.modelname}.glb`)}
      />
    </Suspense>
  );
}

const arr = ["M8", "T360", "M850"].map((it) => {
  return require(`@/assets/gltf/${it}.glb`);
});

useGLTF.preload(arr);

export default memo(Model)