Three.js光纤/ Drei -如何加载fbx模型？

Question

亲爱的Stack Overflow朋友们：

我将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')。你不能在组件之外使用钩子。