如何在React Native中渲染自定义3D对象

Question

我已经设法使用Trix.js Expo-three和Expo-GL配置了React Native中红色立方体的3D渲染， 但是我想让用户渲染自己可能拥有的自定义3D对象（.obj或.mtl扩展），但是我不确定如何让他们加载它们。

这是我为Cube渲染的代码：

import React from 'react'
import { Text, View, TouchableOpacity } from 'react-native'
import { GLView } from 'expo-gl';
//@ts-ignore
import * as THREE from "three";
import ExpoTHREE, { Renderer } from "expo-three"

interface Props {
    route: any
}

const Player: React.FC<Props> = ({ route }) => {
    const { item } = route.params;

    const onContextCreate = async (gl: any) => {
        // 1. Scene
        var scene = new THREE.Scene();
        // 2. Camera
        const camera = new THREE.PerspectiveCamera(75, gl.drawingBufferWidth / gl.drawingBufferHeight, 0.1, 1000);

        gl.canvas = { width: gl.drawingBufferWidth, height: gl.drawingBufferHeight }
        camera.position.z = 1.5

        const renderer = new Renderer({ gl })
        renderer.setSize(gl.drawingBufferWidth, gl.drawingBufferHeight)

        const geometry = new THREE.BoxBufferGeometry(1, 1, 1);
        const material = new THREE.MeshBasicMaterial({ color: 'red' })

        const cube = new THREE.Mesh(geometry, material)
        scene.add(cube)

        const render = () => {
            requestAnimationFrame(render)
            cube.rotation.x += 0.1
            cube.rotation.y += 0.1
            renderer.render(scene, camera)
            gl.endFrameEXP()
        }

        render()
    };


    return (
        <View style={{ flex: 1 }}>
            <GLView
                style={{ width: '90%', height: '90%', }}
                onContextCreate={onContextCreate}
            />
        </View>
    )
}


export default Player