Expo Three 优雅加载 .obj 文件：告别“missing-asset-registry-path”错误

2024-03-09 13:58:32

在 Expo Three 中优雅地加载 .obj 文件：告别 "missing-asset-registry-path" 错误

在当今交互式 3D 体验盛行的时代，Expo Three 框架提供了在移动应用程序中实现令人惊叹的 3D 图形的功能。然而，加载 .obj 文件时，可能会遇到令人沮丧的 "missing-asset-registry-path" 错误。作为经验丰富的程序员，我们将深入探讨这个问题，并提供分步指南，帮助你轻松解决它。

剖析 "missing-asset-registry-path" 错误

当 Metro 捆绑器无法解析给定路径中的文件时，就会出现 "missing-asset-registry-path" 错误。这是因为 Metro 负责捆绑 JavaScript 代码和应用程序资产，包括 3D 模型（如 .obj 文件）。为了解决此问题，我们需要确保 Metro 能够识别 .obj 文件作为一种可导入的资产类型。

解决步骤

1. 配置 Metro 捆绑器

在 metro.config.js 文件中，将 .obj 文件添加到 assetExts 数组中：

module.exports = {
  resolver: {
    assetExts: ['glb', 'gltf', 'mtl', 'obj', 'png', 'jpg'],
  },
};

2. 导入 .obj 文件

使用 Asset.fromModule 函数从应用程序包中导入 .obj 文件：

const objAsset = Asset.fromModule(require('./assets/Suzanne.obj'));

3. 下载资产

使用 downloadAsync() 方法异步下载 .obj 文件：

await objAsset.downloadAsync();

4. 加载 .obj 文件

使用 OBJLoader 加载 .obj 文件：

const loader = new OBJLoader();

loader.load(
  objAsset.localUri || objAsset.uri,
  (object) => {
    // 将对象添加到场景中
  },
  (xhr) => {
    // 显示加载进度
  },
  (error) => {
    // 处理错误
  }
);