Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot load OBJ file using React Native #3298

Closed
mattlewer opened this issue Jun 30, 2024 · 0 comments
Closed

Cannot load OBJ file using React Native #3298

mattlewer opened this issue Jun 30, 2024 · 0 comments

Comments

@mattlewer
Copy link

mattlewer commented Jun 30, 2024

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:
#3085
#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"
    ````
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant