Question

亲爱的堆栈溢出人员，

我正在使用drei来响应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'）。您不能在组件外部使用挂钩。

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

1 个答案: