不使用Expo的React Native项目如何实现3D模型展示？

无Expo的纯React Native项目可直接实现3D模型渲染，无需迁移到Expo工作流，以下是可直接落地的生产级方案：

核心依赖选型 #

• 3D渲染核心：three（通用WebGL 3D渲染引擎）、@react-three/fiber（Three.js的React声明式封装，原生端适配纯RN环境）
• 能力扩展：@react-three/drei（封装好的模型加载、手势控制、光照等通用组件，减少重复代码）
• 底层图形驱动：expo-gl（OpenGL渲染底层，可单独在纯RN项目安装，不需要全量引入Expo）

注意：expo-前缀的官方模块支持在纯React Native裸项目中单独安装使用，不会强制要求接入Expo的构建、调试、发布工具链，不存在环境绑定问题。

实现步骤 #

1. 安装依赖

# 安装3D渲染相关依赖
npm install three @react-three/fiber @react-three/drei
# 安装底层OpenGL驱动
npm install expo-gl
# iOS端安装原生依赖
cd ios && pod install && cd ..

2. 原生端配置

• Android：在android/app/src/main/AndroidManifest.xml中添加网络权限（加载远程模型时需要）

<uses-permission android:name="android.permission.INTERNET" />

• iOS：加载非HTTPS的远程模型时，需要在ios/项目名/Info.plist中添加ATS安全配置例外，加载本地模型无需额外配置。

3. 编写3D展示组件

import { Canvas } from '@react-three/fiber';
import { useGLTF, OrbitControls } from '@react-three/drei';
import { Suspense } from 'react';
import { View, StyleSheet } from 'react-native';

// 模型渲染组件
function ShowModel() {
  // 支持glb/gltf格式，可替换为本地资源路径或远程模型地址
  const { scene } = useGLTF(require('./assets/your-model.glb'));
  return <primitive object={scene} scale={1.2} position={[0, 0, 0]} />;
}

export default function Model3DPage() {
  return (
    <View style={styles.pageContainer}>
      <Canvas
        style={styles.canvasArea}
        camera={{ position: [0, 0, 6], fov: 45 }}
        gl={{ antialias: true }}
      >
        {/* 基础光照配置，避免模型发黑不可见 */}
        <ambientLight intensity={0.5} />
        <directionalLight position={[5, 5, 5]} intensity={1} />
        <Suspense fallback={null}>
          <ShowModel />
          {/* 手势控制器，支持旋转、缩放、拖拽查看模型 */}
          <OrbitControls enableRotate enableZoom enablePan />
        </Suspense>
      </Canvas>
    </View>
  );
}

const styles = StyleSheet.create({
  pageContainer: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  canvasArea: {
    flex: 1,
  }
});

优化与避坑 #

• 模型优先选择.glb格式，资源打包更简单，路径解析出错概率远低于gltf、obj、fbx等格式
• 移动端建议模型总面数控制在10万面以内，纹理分辨率不超过2048*2048，避免出现卡顿、内存溢出问题
• 如果完全不想引入任何expo-前缀的依赖，可以替换底层驱动为react-native-gl-model-view，但该库维护活跃度低，新RN版本兼容性问题较多，不推荐生产环境使用
• 需要加载obj、fbx等其他格式模型时，直接引入three.js官方对应的加载器即可，用法与Web端完全一致

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