-
-
Notifications
You must be signed in to change notification settings - Fork 1.8k
Closed
Description
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:
pmndrs/native#9
#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"
````
Metadata
Metadata
Assignees
Labels
No labels