React Native可用于3D模型展示与交互的工具（库）推荐求助

一、Expo兼容方案（无需eject） #

• react-native-vision-camera + ARKit/ARCore
  支持原生AR场景加载.usdz/.glb等格式3D模型，自带手势缩放旋转交互。适配Expo，需安装expo-camera及对应AR模块，注意Expo Go部分功能需自定义构建（受Expo Go环境限制）。
• 直接用three.js + expo-gl
  跳过expo-three的封装，手动搭建场景。步骤：
  1. 安装依赖：npm install three expo-gl expo-gl-cpp
  2. 核心代码示例：

     import React, { useRef, useEffect } from 'react';
     import { View } from 'react-native';
     import { GLView } from 'expo-gl';
     import * as THREE from 'three';
     import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
     
     export default function App() {
       const glViewRef = useRef(null);
       let model;
     
       useEffect(() => {
         if (!glViewRef.current) return;
     
         glViewRef.current.createContextAsync().then((gl) => {
           const renderer = new THREE.WebGLRenderer({ gl });
           renderer.setSize(gl.drawingBufferWidth, gl.drawingBufferHeight);
     
           const scene = new THREE.Scene();
           const camera = new THREE.PerspectiveCamera(75, gl.drawingBufferWidth / gl.drawingBufferHeight, 0.1, 1000);
           camera.position.z = 5;
     
           // 加载GLTF模型（替换为你的模型路径）
           const loader = new GLTFLoader();
           loader.load(require('./model.gltf'), (gltf) => {
             model = gltf.scene;
             scene.add(model);
           });
     
           // 手势交互：旋转+缩放
           let isRotating = false;
           let lastTouch = { x: 0, y: 0 };
           let baseScale = 1;
     
           const handleTouchStart = (e) => {
             isRotating = true;
             lastTouch.x = e.nativeEvent.pageX;
             lastTouch.y = e.nativeEvent.pageY;
           };
     
           const handleTouchMove = (e) => {
             if (!isRotating || !model) return;
             const deltaX = e.nativeEvent.pageX - lastTouch.x;
             const deltaY = e.nativeEvent.pageY - lastTouch.y;
             model.rotation.y += deltaX * 0.01;
             model.rotation.x += deltaY * 0.01;
             lastTouch.x = e.nativeEvent.pageX;
             lastTouch.y = e.nativeEvent.pageY;
           };
     
           const handlePinch = (e) => {
             if (!model) return;
             const newScale = baseScale * e.nativeEvent.scale;
             model.scale.set(newScale, newScale, newScale);
           };
     
           const handleTouchEnd = () => {
             isRotating = false;
             if (model) baseScale = model.scale.x;
           };
     
           const render = () => {
             requestAnimationFrame(render);
             renderer.render(scene, camera);
             gl.endFrameEXP();
           };
           render();
         });
       }, []);
     
       return (
         <View style={{ flex: 1 }}>
           <GLView
             ref={glViewRef}
             style={{ flex: 1 }}
             onTouchStart={handleTouchStart}
             onTouchMove={handleTouchMove}
             onTouchEnd={handleTouchEnd}
             onPinchGesture={handlePinch}
           />
         </View>
       );
     }
     

  注意：加载GLB/GLTF需引入GLTFLoader，可从three.js的addons目录获取。

二、原生React Native方案（需eject或使用bare workflow） #

• react-native-3d-model-view：支持OBJ、GLB、GLTF等格式，内置手势缩放旋转，性能稳定，无需Three.js依赖。
• react-native-gl-model-view：基于OpenGL的轻量渲染库，支持基础3D模型展示与手势交互。
• react-native-ar-view：专注AR场景，支持加载3D模型并实现空间交互，适合AR需求场景。

三、expo-three问题临时解决办法 #

• 锁定兼容版本：安装expo-three@7.0.0 + expo-gl@11.0.0 + three@0.132.2，这套版本在Expo SDK 44-46的Expo Go中能稳定运行。
• 放弃Expo Go：用expo prebuild生成原生项目，通过Xcode/Android Studio运行，绕过Expo Go的环境限制。

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