My App.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组件的事实。从场景中删除Gizmo辅助对象解决了问题。我在上面的代码中添加了GizmoHelper，以防其他人有同样的问题。
进一步更新：
我注意到这个错误仍然记录在控制台中，但现在它不再影响环境的初始渲染。不过，今后可能还会引发问题。
我找到了一个消除错误的解决方案：
将Loader组件内容移动到父级，如下所示：
function App() {
const { progress } = useProgress();
return (
<div id="canvas">
<Canvas>
<Suspense fallback={<Html center>{progress} % loaded</Html>}>
<Scene />
</Suspense>
</Canvas>
</div>
);
}
export default App;