React Native Expo如何从URL渲染.glb格式3D模型？

需求说明 #

• 具备Web开发经验，曾用React结合<model-viewer>实现3D功能
• 从事Expo React Native开发1年，尝试基于expo-three实现3D可视化，但官方文档缺乏可用示例
• 搜索到的相关方案要么不适用（非Expo环境、纯原生实现、仅适配Web React等），要么无法复现；因使用Expo无法执行react-native link react-native-3d-model-view命令，也不想进行深度原生开发
• 已成功渲染旋转立方体，但无法加载GLB模型，需要仅依赖three、expo-three、expo-gl的完整可运行示例，目标模型地址：https://universobucket.s3.us-west-1.amazonaws.com/Test/Scout+Trooper+-+Lego.glb

完整可运行代码 #

import React from "react";
import { View } from "react-native";
import { Scene, PerspectiveCamera, AmbientLight, DirectionalLight } from "three";
import { Renderer } from "expo-three";
import { GLView } from "expo-gl";
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";

const App = () => {
  const onContextCreate = async (gl) => {
    // 初始化场景与相机
    const scene = new Scene();
    const camera = new PerspectiveCamera(
      75,
      gl.drawingBufferWidth / gl.drawingBufferHeight,
      0.1,
      1000
    );
    // 调整相机位置，确保能完整看到模型
    camera.position.set(0, 1, 3);
    camera.lookAt(0, 0, 0);

    // 配置渲染器
    const renderer = new Renderer({ gl });
    renderer.setSize(gl.drawingBufferWidth, gl.drawingBufferHeight);
    renderer.setClearColor(0xf0f0f0); // 设置浅灰色背景

    // 添加光源：无光源时模型会显示为黑色
    const ambientLight = new AmbientLight(0xffffff, 0.6);
    scene.add(ambientLight);
    const directionalLight = new DirectionalLight(0xffffff, 0.8);
    directionalLight.position.set(5, 5, 5);
    scene.add(directionalLight);

    // 加载远程GLB模型
    let model;
    try {
      const loader = new GLTFLoader();
      const gltf = await new Promise((resolve, reject) => {
        loader.load(
          "https://universobucket.s3.us-west-1.amazonaws.com/Test/Scout+Trooper+-+Lego.glb",
          resolve,
          undefined,
          reject
        );
      });
      model = gltf.scene;
      // 根据模型实际尺寸调整缩放与位置，避免超出视图或被截断
      model.scale.set(0.5, 0.5, 0.5);
      model.position.set(0, -1, 0);
      scene.add(model);
    } catch (error) {
      console.error("模型加载失败:", error);
    }

    // 渲染循环与动画
    const render = () => {
      requestAnimationFrame(render);
      // 模型旋转动画
      if (model) {
        model.rotation.y += 0.01;
      }
      renderer.render(scene, camera);
      gl.endFrameEXP();
    };

    render();
  };

  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <GLView
        onContextCreate={onContextCreate}
        style={{ width: 400, height: 400, backgroundColor: "#f0f0f0" }}
      />
    </View>
  );
};

export default App;

关键说明 #

• 引入GLTFLoader处理GLB模型加载，需从three/addons/loaders/GLTFLoader.js导入
• 必须添加光源：环境光保证模型整体亮度，方向光增强立体感，避免模型呈现纯黑
• 调整相机、模型的位置与缩放参数是适配不同模型的关键，可根据实际模型尺寸微调
• 包含错误捕获逻辑，便于排查模型加载失败的原因

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