稀土。BufferGeometry.computeBoundingSphere（）：计算的半径为 NaN。“position”属性可能具有 NaN 值

问：

我正在使用 Reactjs 和 React Three Fiber 为 3d 组件创建一个投资组合，它是一个单页应用程序，展示了不同的部分，并包含 3 个 3D 组件。

虽然 3 个组件中有 2 个显示得很好，但下面的一个组件出现以下错误：

“三。BufferGeometry.computeBoundingSphere（）：计算的半径为 NaN。“position”属性可能具有 NaN 值。

现在是 2 天，我正在尝试解决这个问题，但不幸的是，我正在努力寻找解决方案。

我的组件代码：

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 (
    <>
      <mesh>
        <hemisphereLight intensity={0.15} groundColor="black" />
        <pointLight intensity={1} />
        <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]}
        />
      </mesh>
    </>
  );
};

const ComputersCanvas = () => {
  // Define a state variable named 'isMobile' and a function to update it named 'setIsMobile'
  const [isMobile, setIsMobile] = useState(false);

  // Use the useEffect hook to perform side effects in functional components
  useEffect(() => {
    // Create a media query that checks if the screen width is at most 500px
    const mediaQuery = window.matchMedia("(max-width: 500px)");

    // Set the initial value of the 'isMobile' state variable based on the media query result
    setIsMobile(mediaQuery.matches);

    // Define a callback function to handle changes to the media query
    const handleMediaQueryChange = (event) => {
      // Update the 'isMobile' state variable based on the new media query result
      setIsMobile(event.matches);
    };

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

    // Clean up function: this function will be called when the component is unmounted
    return () => {
      // Remove the 'handleMediaQueryChange' listener when the component is unmounted
      mediaQuery.removeEventListener("change", handleMediaQueryChange);
    };
  }, []); // An empty dependency array means this effect runs only after the initial render

  return (
    <>
      <Canvas
        frameloop="demand"
        shadows
        camera={{ position: [20, 2, 5], fov: 25 }}
        gl={{ preserveDrawingBuffer: true }}
      >
        <Suspense fallback={<CanvasLoader />}>
          <OrbitControls
            enableZoom={false}
            maxPolarAngle={Math.PI / 2}
            minPolarAngle={Math.PI / 2}
          />
          <Computers isMobile={isMobile} />
        </Suspense>
        <Preload all />
      </Canvas>
    </>
  );
};

export default ComputersCanvas;

提前感谢您的帮助。

我查看了其他堆栈溢出问题，虽然我能够解决其他 3D 组件问题（是的！），但我无法找到上述解决方案。 我也尝试隐藏该组件，一旦我这样做，代码就可以正常工作，但是一旦我取消注释它，页面就会看起来像空白，如下图所示。