将.glb文件加载到React Native Expo应用程序

Question

我正在开发一个项目，需要在React Native中显示3D化身。使用从 three/examples/jsm/loaders/GLTFLoader导入的GLTFLoader添加我的.glb模型时，出现了一个错误： FileReader.readAsArrayBuffer未实现错误。

当我使用ExpoTHREE.loadAsync加载模型时，也会出现这个错误。有没有办法可以将我的.glb模型加载到我的应用程序中？

以下是我的代码：

import { ExpoWebGLRenderingContext, GLView } from "expo-gl";
import ExpoTHREE, { Renderer, TextureLoader } from "expo-three";
import { Asset } from "expo-asset";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import * as React from "react";
import {
  AmbientLight,
  BoxBufferGeometry,
  Fog,
  GridHelper,
  Mesh,
  MeshStandardMaterial,
  PerspectiveCamera,
  PointLight,
  Scene,
  SpotLight,
} from "three";

export default function App() {
  let timeout;

  React.useEffect(() => {
    // Clear the animation loop when the component unmounts
    return () => clearTimeout(timeout);
  }, []);

  return (
    <GLView
      style={{ flex: 1 }}
      onContextCreate={async (gl) => {
        try {
          const { drawingBufferWidth: width, drawingBufferHeight: height } = gl;
          const sceneColor = 0x6ad6f0;

          // Create a WebGLRenderer without a DOM element
          const renderer = new Renderer({ gl });
          renderer.setSize(width, height);
          renderer.setClearColor(sceneColor);

          const camera = new PerspectiveCamera(70, width / height, 0.01, 1000);
          camera.position.set(2, 5, 5);

          const scene = new Scene();

          //! Doesn't work
          // const asset = Asset.fromModule(require("./assets/avatar.glb"));
          // await asset.downloadAsync();
          // const loader = new GLTFLoader();

          // loader.load(asset.localUri, (group) => {
          //   console.log(group);
          //   // scene.add(group.scene)
          // });

          function update() {}

          // Setup an animation loop
          const render = () => {
            timeout = requestAnimationFrame(render);
            update();
            renderer.render(scene, camera);
            gl.endFrameEXP();
          };
          render();
        } catch (error) {
          console.log(error);
        }
      }}
    />
  );
}

依赖项：

"dependencies": {
    "@react-three/fiber": "^7.0.29",
    "base64-arraybuffer": "^1.0.2",
    "expo": "~45.0.0",
    "expo-file-system": "~14.0.0",
    "expo-gl": "~11.3.0",
    "expo-splash-screen": "~0.15.1",
    "expo-status-bar": "~1.3.0",
    "expo-three": "^6.1.0",
    "react": "^17.0.2",
    "react-dom": "17.0.2",
    "react-native": "0.68.2",
    "react-native-dotenv": "^3.3.1",
    "react-native-unimodules": "^0.14.10",
    "react-native-web": "0.17.7",
    "three": "^0.141.0"
  },

- caslawter

---

你最终找到解决方案了吗？ - Benson Wally Tran

Answer 1

你可以在这里找到一个使用threejs在react-native中导入.glb文件的起始repo示例：https://github.com/CodyJasonBennett/r3f-native-starter

- foufrix