Three.js fiber/Drei-如何加载fbx模型

Question

亲爱的堆栈溢出人员，

我将drei用于react native/three.js光纤。我已按照https://github.com/pmndrs/drei关于如何加载fbx但由于"；错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一："；。

有人能给我指个正确的方向吗。

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',
},
}); ```

Answer 1

您在全局空间中调用useFBX('test/test1.fbx'(。不能在组件之外使用钩子。