在页面最开始加载的时候没有任何问题 渲染完毕后无法显示图片

[Yuqing Jian 简宇卿]

我用的react写的个人网站 直接在index.html插入<script>语句，网页最开始加载的时候看板娘没有问题，等到网页全部加载出来后，看板娘的模型显示不出来了，但其他功能是正常的，求问！非常感谢

[Yuqing Jian 简宇卿]

`import React, { Suspense, useEffect, useState } from "react";
import { Canvas } from "@react-three/fiber";
import { OrbitControls, Preload, useGLTF } from "@react-three/drei";

import CanvasLoader from "../Loader";

const Computers = ({ isMobile }) => {
const computer = useGLTF("./desktop_pc/scene.gltf");

return (


<spotLight
position={[-20, 50, 10]}
angle={0.12}
penumbra={1}
intensity={1}
castShadow
shadow-mapSize={1024}
/>

<primitive
object={computer.scene}
scale={isMobile ? 0.7 : 0.75}
position={isMobile ? [0, -3, -2.2] : [0, -3.25, -1.5]}
rotation={[-0.01, -0.2, -0.1]}
/>

);
};

const ComputersCanvas = () => {
const [isMobile, setIsMobile] = useState(false);

useEffect(() => {
// Add a listener for changes to the screen size
const mediaQuery = window.matchMedia("(max-width: 500px)");

// Set the initial value of the `isMobile` state variable
setIsMobile(mediaQuery.matches);

// Define a callback function to handle changes to the media query
const handleMediaQueryChange = (event) => {
  setIsMobile(event.matches);
};

// Add the callback function as a listener for changes to the media query
mediaQuery.addEventListener("change", handleMediaQueryChange);

// Remove the listener when the component is unmounted
return () => {
  mediaQuery.removeEventListener("change", handleMediaQueryChange);
};

}, []);

return (
<Canvas
frameloop='demand'
shadows
dpr={[1, 2]}
camera={{ position: [20, 3, 5], fov: 25 }}
gl={{ preserveDrawingBuffer: true }}
>
<Suspense fallback={}>
<OrbitControls
enableZoom={false}
maxPolarAngle={Math.PI / 2}
minPolarAngle={Math.PI / 2}
/>

  <Preload all />
</Canvas>

);
};

export default ComputersCanvas;
`

问题出在这个组件上，我应该怎么修改呢？

[Mimi]

请提供一个能够复现这个问题的完整代码仓库，只有这个组件的代码并看不出来是什么问题

[Yuqing Jian 简宇卿]

嗯嗯我已经解决了，原因是加载的3D模型太大了

[Mimi]

问题解决了就好～