Three.js Fiber / Drei - 如何加载 fbx 模型？答案

【问题标题】：Three.js fiber / Drei - How to load an fbx model?Three.js Fiber / Drei - 如何加载 fbx 模型？
【发布时间】：2020-11-11 23:29:44
【问题描述】：

亲爱的 Stack Overflow 人，

我正在使用 drei 来响应原生 /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',
  },
}); ```

【问题讨论】：

标签： javascript react-native three.js hook

【解决方案1】：

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

【讨论】：