非Expo环境React Native加载.obj 3D模型失败求助

问题根源 #

裸React Native项目的Metro打包器默认不识别.obj这类非代码资源，导致require('./model.obj')无法解析；同时expo-three的loadObjAsync在裸项目中需要调整资源加载方式。

解决步骤 #

1. 配置Metro支持.obj文件 #

在项目根目录创建或修改metro.config.js，添加对.obj后缀的资源支持：

const { getDefaultConfig } = require('@react-native/metro-config');

const config = getDefaultConfig(__dirname);
config.resolver.assetExts.push('obj'); // 新增obj格式支持

module.exports = config;

2. 调整模型加载代码 #

裸项目中require返回的是资源URI而非Expo Asset对象，需修改loadObjAsync调用方式，同时补上代码中缺失的相机定义：

import { GLView } from "expo-gl";
import { View } from "react-native";
import { loadObjAsync, Renderer } from "expo-three";
import { Scene, PerspectiveCamera } from "three";

export const Three = (props) => {
  async function onContextCreate(gl) {
    const renderer = new Renderer({gl});
    renderer.setSize(200, 200);

    const scene = new Scene();
    // 补全相机定义
    const camera = new PerspectiveCamera(75, 200/200, 0.1, 1000);
    camera.position.z = 5;

    // 改用URI方式加载模型
    const obj = await loadObjAsync({
      uri: require('./model.obj').uri
    });

    scene.add(obj);

    // 修复动画循环逻辑
    const render = () => {
      requestAnimationFrame(render);
      renderer.render(scene, camera);
      gl.endFrameEXP();
    };

    render();
  }

  return (
    <View>
      <GLView style={{width:200, height:200}} onContextCreate={onContextCreate} />
    </View>
  );
};

3. 额外检查项 #

• 确认model.obj文件确实存在于src/model目录下，文件名大小写与代码引用完全一致
• 确保react-native-unimodules已完成全平台配置（Android端gradle配置、iOS端pod安装）
• 修改配置后重启Metro打包器，确保新配置生效

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