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

Question

亲爱的 Stack Overflow 朋友们，

我将 drei 用于 React Native / three.js Fiber。我已按照 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

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

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

Three.js fiber / Drei - How to load an fbx model?

javascript

hook

three.js

react-native