【React-Native开发3D应用】React Native加载GLB格式3D模型并打包至Android手机端

import React, { useRef, useEffect } from 'react';
import { StyleSheet, View } from 'react-native';
import { GLTFModel } from 'expo-three';
 
export default function App() {
  // 创建一个ref来引用3D模型组件
  const modelRef = useRef(null);
 
  // 当组件挂载后，模型加载完成后会触发
  useEffect(() => {
    if (modelRef.current) {
      let model = modelRef.current;
      model.loadAsync({
        // glb文件的URI
        uri: 'path/to/your/model.glb',
      }).then(() => {
        // 模型加载成功后的操作
        console.log('Model Loaded');
      });
    }
  }, []);
 
  return (
    <View style={styles.container}>
      {/* 使用GLTFModel组件来加载和渲染3D模型 */}
      <GLTFModel
        ref={modelRef}
        style={styles.modelStyle}
      />
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  modelStyle: {
    width: 300,
    height: 300,
  },
});

这段代码展示了如何在React Native应用中加载和渲染一个GLB格式的3D模型。首先，我们引入了必要的React和React Native组件，并创建了一个函数组件App。在该组件中，我们使用了useRef来创建一个ref引用，并在useEffect中进行了模型的加载和渲染。这里的GLTFModel组件是从expo-three导出的，它允许我们直接在React Native应用中使用Three.js的功能来加载和显示3D模型。