使用React Native轻松展示3D模型 —— react-native-gl-model-view

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import ModelView from 'react-native-gl-model-view';
 
export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <ModelView
          style={styles.modelContainer}
          source={require('./path/to/your/model.glb')} // 指定3D模型文件路径
          // 可选的参数
          // lighting={false} // 关闭环境光照
          // modelAlpha={0.5} // 设置模型的半透明度
        />
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  modelContainer: {
    width: 300,
    height: 300,
    backgroundColor: 'black',
  },
});

这段代码演示了如何在React Native应用中嵌入一个3D模型。首先导入了必要的组件和样式，然后定义了一个React组件App，在其render方法中使用ModelView组件来展示一个3D模型。在source属性中指定了3D模型文件的路径，并提供了一些可选的配置参数。最后，定义了一些样式来布局3D模型。