React-three/drei Native中useGLTF抛出url.lastIndexOf错误排查

错误原因 #

Metro 与 Webpack 对 GLTF 这类非标准资源文件的导入处理逻辑存在差异：

• Webpack 会将 import BaseWhite from './base.gltf' 解析为文件的路径字符串，完全符合 useGLTF 对参数的要求；
• Metro 则会将这类资源编译为内部资源 ID（一个数字，比如你遇到的 3），而非路径字符串。直接把这个数字传给 useGLTF 时，函数会将其当作 URL 处理，调用 lastIndexOf 方法时自然报错（数字类型没有该方法）；调用 toString() 后得到数字字符串（如 "3"），Metro 会尝试请求该路径，最终导致 404。

解决办法 #

在 React Native + Metro 环境下，需通过 require 获取资源的正确 URI，再传递给 useGLTF：

import React from 'react'
import { useGLTF } from '@react-three/drei/native'

export default function Model(props) {
  // 用 require 获取资源的正确 URI
  const baseWhiteUri = require('./base.gltf').default;
  const gltf = useGLTF(baseWhiteUri);
  return <primitive object={gltf.scene} />;
}

同时需确保 Metro 配置文件（metro.config.js）中已将 gltf 添加到 assetExts 数组，保证资源能被正确识别：

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

const config = {};

module.exports = mergeConfig(getDefaultConfig(__dirname), {
  resolver: {
    assetExts: [...getDefaultConfig(__dirname).resolver.assetExts, 'gltf'],
  },
});

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