React Three Fiber中GLTF模型加载后页面空白问题求助

我从Sketchfab下载了一个太空主题GLTF模型用于网站开发，但每次将其加载到React Three Fiber项目中时，画布内容全部消失。

首先我怀疑Canvas元素设置有误，于是用@react-three/drei的Stars组件做测试，代码如下：

import { Canvas } from "@react-three/fiber";
import { Suspense } from "react";
import { Stars } from '@react-three/drei';

function App() {
  return (
    <div className="App">
      <Canvas style={{ height: '100vh', width: '100vw' }}>
        <Suspense>
          <pointLight color="#f6f3ea" position={[10, 5, 10]} intensity={2} />
          <Stars />
        </Suspense>
      </Canvas>
    </div>
  )
}

测试结果正常，画布能正常显示星空背景和灯光效果。

之后我通过npx gltfjsx将GLTF模型转换为JSX组件Scene，代码如下：

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

export function Scene(props) {
  const { nodes, materials } = useGLTF('/scene.gltf')
  return (
    <group {...props} dispose={null}>
      <group rotation={[-Math.PI / 2, 0, 0]}>
        <group position={[0, 0.02, -6.33]} rotation={[0.24, -0.55, 0.56]} scale={7}>
          <mesh geometry={nodes.planet001_1.geometry} material={materials.scene} />
          <mesh geometry={nodes.planet001_2.geometry} material={materials.scene} />
        </group>
      </group>
    </group>
  )
}

useGLTF.preload('/scene.gltf')

但将Scene组件加载到Canvas后：

<Canvas style={{ height: '100vh', width: '100vw' }}>
  <Suspense>
    <pointLight color="#f6f3ea" position={[10, 5, 10]} intensity={2} />
    <Stars />
    <Scene />
  </Suspense>
</Canvas>

屏幕直接变为空白，既看不到模型也看不到Stars背景。我尝试修改模型组的z轴位置为2、5、10，也移除了旋转属性，但问题依旧。请问为何加载该GLTF模型会导致这种情况？

可能的原因及解决方向 #

• 模型尺寸与相机视锥体不匹配：你的模型初始缩放比例是7，且z轴位置为-6.33，可能模型过大或位置超出了默认相机的视锥体范围。默认相机的near值为0.1，far值为1000，但大尺寸模型可能被裁剪。可以先将模型scale改为1，position设为[0,0,0]，同时给Canvas设置相机位置：<Canvas camera={{ position: [0,0,5] }} ...>，再逐步调整模型参数。
• 模型资源加载失败：打开浏览器控制台检查是否有404错误，确认/scene.gltf的路径是否正确。如果模型放在public文件夹下路径没问题，若在src目录则需要通过import导入资源，或者调整静态资源路径。
• 材质渲染异常：模型自带的materials.scene可能存在配置问题，比如透明材质未开启alphaTest，或者depthWrite/depthTest设置导致渲染冲突。可以临时替换为基础材质测试：

  <mesh geometry={nodes.planet001_1.geometry} material={<meshBasicMaterial color="red" />} />
  

  如果能显示红色模型，说明是原材质的问题。
• Suspense加载状态问题：虽然你用了Suspense，但未设置fallback，若模型加载卡住可能导致画布空白。可以添加加载提示：<Suspense fallback={<div style={{position:'fixed',top:'50%',left:'50%'}}>加载中...</div>}>，判断是否是加载阻塞导致的问题。

内容的提问来源于stack exchange，提问作者Moon