0

我的应用程序.jsx

import "./App.css";
import { Canvas } from "@react-three/fiber";
import React, { Suspense } from "react";
import { Html, useProgress } from "@react-three/drei";

const Scene = React.lazy(() => import('./components/Scene.jsx'));


function Loader() {
  const { progress } = useProgress();
  return <Html center>{progress} % loaded</Html>
}

function App() {

 
  return (
    <div id="canvas">
      <Canvas>
        <Suspense fallback={<Loader />}>
         <Scene />
        </Suspense>
      </Canvas>
    </div>
  );
}

export default App;

我的场景.jsx

    function Scene() {
      <>
          <ambientLight intensity={0.2} />
          <directionalLight />
          <GizmoHelper
            alignment="bottom-right"
            margin={[80, 80]} 

          >
           <GizmoViewport
             axisColors={["red", "green", "blue"]}
             labelColor="black"
           />
        
          </GizmoHelper>
          <Text
            position={[-3, 0, 0]}
            anchorX="center"
            anchorY="middle"
            fontSize="1.5"
            outLineBlur="5"
            outlineColor="red"
            curveRadius="2.9"
            font="db.onlinewebfonts.com/t/02654c5f87934978cd2129477ad40869.ttf">
            
            Hello world
            <meshStandardMaterial
              color="#ec2d2d"
              opacity="1"
              roughness="0"
              metalness="0.3"
              normalMap={normalMap}
            />
          </Text>
          <OrbitControls />
          <Environment preset="city" background="true" />
        </>
      );
    }

我的问题：

每次我启动应用程序时，环境都不会加载，并且出现以下错误：

Warning: Cannot update a component (`Loader`) while rendering a different component (`Environment`)

如果我在实时服务器运行时更​​改预设，环境会立即更新并显示。

我已经尝试编写一个函数并仅在加载窗口时渲染环境，但我仍然遇到相同的错误。

我在某处读过我可以使用 setTimeout 但不确定这是否是正确的方法。

如果有人能指出我正确的方向。

更新：

我没有包括我正在使用 GizmoHelper 组件的事实。从场景中移除 GizmoHelper 解决了这个问题。我在上面的代码中添加了 GizmoHelper，以防其他人遇到同样的问题。

进一步更新：

我注意到错误仍然记录在控制台中，但现在它不再影响环境的初始渲染。不过，可能仍然会导致进一步的问题。

4

0 回答 0