在react js gltf模型中显示白屏，无法使用react-三/纤维和drei和三个js正确加载

Question

我使用@react- Three / Fiber，@react- Three / drei，Three js和gltfjsx制作了一个3D渲染网站。我想渲染一个 gltf 文件，我已经成功地做到了这一点，但有一个问题，那就是每当开发服务器启动时，屏幕就会闪烁并变成空白。虽然如果我使用 drei 提供的网格（如立方体和球体），屏幕不会变成空白，但一旦我想使用自定义 gltf 模型，屏幕就会变成空白，下面是我的 jsx 组件和 app.js 文件

MODEL COMPONENT

/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
*/

import React, { useRef } from 'react'
import { useGLTF } from '@react-three/drei'

export default function Model({ ...props }) {
  const group = useRef()
  const { nodes, materials } = useGLTF('/linear_irl.gltf')
  return (
    <group ref={group} {...props} dispose={null} scale={10}>
      <mesh geometry={nodes.sphere.geometry} material={nodes.sphere.material} />
      <mesh geometry={nodes.sphere_1.geometry} material={nodes.sphere_1.material} />
      <mesh geometry={nodes.sphere_2.geometry} material={nodes.sphere_2.material} />
    </group>
  )
}

useGLTF.preload('/linear_irl.gltf')

App.js

<Canvas className="Canvas">
        <ambientLight intensity={0.5}/>
        <directionalLight position={[-2,5,2]}/>
        <Suspense fallback={null}></Suspense>
        <OrbitControls/>
          <Linear_irl/>
      </Canvas>

链接到下面的 gltf 文件 GLTF 文件 Google 云端硬盘链接

Answer 1

尝试过这个方法吗？用 Canvas 下方的 Suspense 包裹整个场景。

<Canvas className="Canvas">
  <Suspense fallback={null}>
    <ambientLight intensity={0.5}/>
    <directionalLight position={[-2,5,2]}/>
    <OrbitControls/>
    <Linear_irl/>
  </Suspense>
</Canvas>