React-three-fibe加载Draco压缩的模型

​

React-three-fiber 是一个基于👉 React 的 3D 渲染库，它将 three.js 的强大渲染能力与 React 的声明式编程模型相结合。使用 react-three-fiber，您可以使用 React 的组件化开发方式来创建复杂的 3D 场景，同时利用 React 的状态管理和生命周期钩子来控制场景的交互和动画。

Draco压缩是压缩3D文件的一种实现方式。原生的Three.js提供了解析Draco文件的实现。

最初我采用了react-three/drei中的useGLFT来加载模型，这个hook具有自动解析Draco文件的功能（useGLFT就是基于React-three-fiber中的useLoader来实现的）

​

​
/**
 * Fox
 *
 */
 import {  useGLTF } from "@react-three/drei";
 function Model(props) {
   const model = useGLTF("model/Fox.glb");
    ...
 
   return (
     <>
       <primitive object={model.scene} {...props}></primitive>
     </>
   );
 }

但是由于useGLTF解析Draco文件依赖于CDN.这个CND有时候会解析失败。后面我就采用了另一种基于React-three-fiber来解析Draco文件，最后加载成功。

​
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
import { useLoader } from "@react-three/fiber";
​
    /**
 * 加载Draco模型
 */
     const model = useLoader(
      GLTFLoader,
      "46/portal_merged.glb",
      (loader) => {
        const dracoLoader = new DRACOLoader();
     //解析器路径
        dracoLoader.setDecoderPath("draco/");
        loader.setDRACOLoader(dracoLoader);
      }
    );

注意：

将node_modules\three\examples\jsm\libs\draco 路径下的draco文件夹复制到项目的静态资源根目录作为解析器。setDecoderPath（）中传入解析器路径。