白色屏幕显示在react js gltf模型中，没有正确地装载react 3/纤维和drei以及三条js。

Question

我用@react-3/纤维，@react-3/drei，3 js和gltfjsx创建了一个3d渲染网站。我想呈现一个gltf文件，并且我已经可以成功地完成它了，但是问题是，每当dev服务器启动时，屏幕就会闪烁并变为空白。虽然如果我使用drei提供的网格(如多维数据集和球形)，屏幕不会变为空白，但只要我想使用自定义gltf模型，屏幕就会变为空白，下面是我的jsx组件和app.js文件。

模型构件

/*
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文件Google驱动器链接下面的gltf文件

Answer 1

这样试过吗？用悬念包裹整个场景，就在画布下面。

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