Hello Stack Overflow community,
I am currently working with drei for react native / three.js fiber. I have been trying to load an fbx file following the instructions provided at https://github.com/pmndrs/drei but faced an issue with "Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:". Can anyone guide me in the right direction on how to resolve this?
import { StyleSheet, Text, View } from 'react-native';
import ReactDOM from 'react-dom'
import React, { useDebugValue, useRef, useState } from 'react'
import { Canvas, useFrame, useLoader } from 'react-three-fiber'
import { OrbitControls, Sky, useFBX, Loader } from '@react-three/drei'
import { debug } from 'react-native-reanimated';
useFBX('test/test1.fbx')
function SuzanneFBX() {
let fbx = useFBX('test/test1.fbx')
// wrap fbx in primitive.
return <primitive object={fbx} dispose={null} />
}
export default function App() {
return (
ReactDOM.render(
<Canvas>
<ambientLight />
<pointLight position={[10, 10, 10]} />
<OrbitControls />
<Sky/>
</Canvas>,
document.getElementById('root')
)
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});