我刚开始做移动应用开发，现在在Expo React Native项目里用React Three Fiber做一个3D模型加载器（在我的Android设备上测试）。模型成功加载出来了，但纹理一直加载失败，反复遇到这个错误：

ERROR THREE.GLTFLoader: Couldn't load texture {"_h": 1, "_i": 2, "_j": [Error: Creating blobs from 'ArrayBuffer' and 'ArrayBufferView' are not supported], "_k": null}

以下是我用到的代码和配置：

组件代码：components/ModelViewer.tsx #

import { useGLTF } from '@react-three/drei'
import React from 'react'
import * as THREE from 'three'
import { GLTF } from 'three-stdlib'

type GLTFResult = GLTF & {
  nodes: {
    Object_382: THREE.SkinnedMesh
    ...
    _rootJoint: THREE.Bone
  }
  materials: {
    material: THREE.MeshBasicMaterial
    ...
  }
}

interface ModelProps {
  [key: string]: any
}

export function Model(props: ModelProps) {
  const { nodes, materials } = useGLTF(require('../assets/models/myModel.glb')) as unknown as GLTFResult
  return (
    <group {...props} dispose={null} scale={[0.2,0.2,0.2]} position={[0, -1.5, 0]}>
      <group rotation={[-Math.PI / 2, 0, 0]}>
        <primitive object={nodes._rootJoint} />
        <skinnedMesh geometry={nodes.Object_382.geometry} material={materials.material} skeleton={nodes.Object_382.skeleton} />
        ...
      </group>
    </group>
  )
}

useGLTF.preload(require('../assets/models/myModel.glb'))

export default Model

项目依赖 #

"@react-three/drei": "^10.4.4",
"@react-three/fiber": "^9.2.0",
"three": "^0.178.0",
"expo-gl": "~15.1.7",

Metro配置：metro.config.js #

const { getDefaultConfig } = require('@expo/metro-config');
const config = getDefaultConfig(__dirname);

config.resolver.sourceExts = [
  'js', 'jsx', 'json', 'ts', 'tsx', 'cjs', 'mjs',
];
config.resolver.assetExts = [
  'glb', 'gltf', 'png', 'jpg', 'ttf',
];

module.exports = config;

模型渲染代码：app/Home.tsx #

import { Canvas, useFrame } from '@react-three/fiber/native'
import Model from '../components/ModelViewer'
import React, { Suspense, useEffect, useRef, useState } from 'react'
import { GestureResponderEvent, PanResponder, PanResponderGestureState } from 'react-native'

<View style={styles.modelContainer} {...panResponder.panHandlers} >
  <Canvas 
    pointerEvents="none" 
    style={styles.canvas} 
    camera={{ position: [0, 0, 10], fov: 50 }} 
    frameloop="always"
    onCreated={({ gl }) => {
      const _gl: any = gl.getContext()
      const p = _gl.pixelStorei.bind(_gl)
      _gl.pixelStorei = (...args: any[]) => {
        if (args[0] === _gl.UNPACK_FLIP_Y_WEBGL) return
        p(...args)
      }
    }}
  >
    <directionalLight position={[1, 1, 1]} args={['white', 2]} />
    <ambientLight intensity={0.5} />
    <Suspense fallback={null}>
      <GroupWithControls rotation={rotation} zoom={zoom}>
        <Model />
      </GroupWithControls>
    </Suspense>
  </Canvas>
</View>

我已经卡了好几天了，试过单独加载纹理，也参考了一些配置示例但都没解决，连示例里的模型也加载不出来。如果需要我提供更多信息请告诉我，非常感谢大家的帮助！

内容来源于stack exchange