如何在React Native中渲染Draco压缩的GLB文件

要解决Draco压缩GLB的渲染问题，核心是配置Draco解码器并让@react-three/fiber正确加载解码后的模型，具体步骤如下：

1. 安装必要依赖 #

首先安装提供Draco解码器的包，以及封装了加载器工具的drei库：

npm install draco3d @react-three/drei
# 或使用yarn
yarn add draco3d @react-three/drei

2. 配置Draco解码器路径 #

React Native无法直接使用CDN路径加载解码器文件，需要手动复制解码器资源到项目本地：

• 从node_modules/draco3d/javascript/目录下，复制draco_decoder.js、draco_decoder.wasm（可选，若WASM加载有问题可先跳过）到项目的assets/draco/目录中

3. 编写加载渲染代码 #

使用@react-three/drei的useGLTF配合DracoLoader，为GLTFLoader添加Draco解码插件，示例代码如下：

import React from 'react';
import { View } from 'react-native';
import { Canvas } from '@react-three/fiber/native';
import { useGLTF, DracoLoader } from '@react-three/drei';

// 配置Draco解码器路径
DracoLoader.setDecoderPath(require('../assets/draco/'));
// 若WASM在RN环境加载失败，切换为JS版本解码器
DracoLoader.setDecoderConfig({ type: 'js' });

function CompressedGLBModel() {
  const gltf = useGLTF(require('../assets/models/your-compressed-model.glb'), loader => {
    // 为GLTFLoader挂载Draco解码插件
    const dracoLoader = new DracoLoader();
    loader.setDRACOLoader(dracoLoader);
  });

  return <primitive object={gltf.scene} />;
}

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <Canvas>
        <ambientLight />
        <pointLight position={[10, 10, 10]} />
        <CompressedGLBModel />
      </Canvas>
    </View>
  );
}

4. 常见问题处理 #

• WASM加载失败：React Native对WASM的支持存在设备差异，遇到问题时切换为JS版本解码器即可。
• 资源路径错误：确保require的解码器路径与实际文件位置完全匹配，避免路径层级错误。
• 版本兼容问题：保证@react-three/fiber、@react-three/drei、three和draco3d的版本相互兼容，避免因版本不匹配导致加载失败。

内容的提问来源于stack exchange，提问作者ARD