pmndrs / react-three-fiber

🇨🇭 A React renderer for Three.js
https://docs.pmnd.rs/react-three-fiber
MIT License
27.62k stars 1.6k forks source link

Cannot load OBJ file using React Native #3298

Closed mattlewer closed 4 months ago

mattlewer commented 4 months ago

Hi there, I cannot for the life of me figure out what I am doing wrong here. Please help!

I have followed the advice of the existing issues: https://github.com/pmndrs/react-three-fiber/issues/3085 https://github.com/pmndrs/react-three-fiber/issues/3199

@anurbe's suggestion results in: Error: A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition.

import React, {Suspense, useMemo} from 'react';
import {Canvas, useLoader} from '@react-three/fiber/native';
import {OBJLoader} from 'three/examples/jsm/loaders/OBJLoader';
import * as THREE from 'three'

function App(): JSX.Element {
  const buffer = useLoader(THREE.FileLoader, require('./assets/tree.obj'));
  const obj = useMemo(() => new OBJLoader().parse(THREE.LoaderUtils.decodeText(buffer)), [buffer])

  return (
      <Canvas>
        <ambientLight/>
        <pointLight position={[10,10,10]} />
        <Suspense fallback={null}>
          <mesh>
            <primitive object={obj} scale={10}/>
          </mesh>
        </Suspense>
      </Canvas>
  );
}

@CodyJasonBennett suggestion results in: TypeError: Cannot read property 'OBJLoader' of undefined

import React, {Suspense} from 'react';
import {Canvas, useLoader} from '@react-three/fiber/native';
import {OBJLoader} from 'three/examples/jsm/loaders/OBJLoader';
import {Asset} from 'expo-asset';

function App(): JSX.Element {

  const obj = useLoader(
    OBJLoader,
    Asset.fromModule(require('./assets/tree.obj')).uri,
  );

  return (
    <Suspense fallback={null}>
      <Canvas>
        <ambientLight />
        <pointLight position={[10, 10, 10]} />
        <Suspense fallback={null}>
          <mesh>
            <primitive object={obj}  scale={10}/>
          </mesh>
        </Suspense>
      </Canvas>
    </Suspense>
  );
}
    "react": "18.2.0",
    "react-native": "0.71.8",
    "@react-three/fiber": "^8.13.0",
    "expo": "^48.0.0",
    "expo-gl": "~12.4.0",
    "three": "^0.152.2",
    "expo-asset": "~8.9.1"