在 react js gltf model 中顯示白屏，沒有正確加載 react-three/fibre 和 drei 和 three.js

Question

我用@react-three/fiber、@react-three/drei、three.js和gltfjsx做了一個3d的渲染網站。 我想渲染一個 gltf 文件，我已經成功地完成了，但是有一個問題，那就是每當開發服務器啟動時屏幕閃爍並變為空白。 雖然如果我使用 drei 提供的網格，如立方體和球體，屏幕不會 go 空白，但一旦我想使用自定義 gltf model，屏幕就會變成空白，下面是我的 jsx 組件和 app.js 文件

MODEL 組件

/*
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')

應用程序.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>