gpt4 book ai didi

javascript - 渲染时暂停,但当我使用 react-three-fiber 中的 useLoader 时未指定后备 UI

转载 作者:行者123 更新时间:2023-12-05 01:10:23 31 4
gpt4 key购买 nike

我正在尝试为我的 ThreeJS 对象使用纹理。我收到错误:

index.js:1 Error: Earth suspended while rendering, but no fallback UI was specified.

Add a <Suspense fallback=...> component higher in the tree to provide a loading indicator or placeholder to display.
in Earth

地球.js:

export const Earth = () => {
const texture = useLoader(THREE.TextureLoader, earthImg)

return (
<Suspense fallback={<h1>Loading profile...</h1>}>
<mesh>
<sphereBufferGeometry attach="geometry" args={[5, 32, 32]} />
<meshStandardMaterial attach="material" roughness={1} fog={false} />
</mesh>
</Suspense>
)
}

index.js:

export default function App() {
return (
<Canvas
style={{height:'100vh',width:'100vw'}}
camera={{
position: [0, window.innerWidth / window.innerHeight, 5]
}}
>
<ambientLight intensity={0.5} />
<spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} />
<pointLight position={[-10, -10, -10]} />
<Earth position={[-1.2, 0, 0]} />
</Canvas>
)
}

最佳答案

useLoader() 的组件从(<Earth> 在这种情况下)调用需要包装在 <Suspense> 中,则无法从组件中指定 suspense 回退。

地球.js:

export const Earth = () => {
const texture = useLoader(THREE.TextureLoader, earthImg)

return (
<mesh>
<sphereBufferGeometry attach="geometry" args={[5, 32, 32]} />
<meshStandardMaterial attach="material" roughness={1} fog={false} />
</mesh>
)
}

index.js:

export default function App() {
return (
<Canvas
style={{height:'100vh',width:'100vw'}}
camera={{
position: [0, window.innerWidth / window.innerHeight, 5]
}}
>
<ambientLight intensity={0.5} />
<spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} />
<pointLight position={[-10, -10, -10]} />
<Suspense fallback={<h1>Loading profile...</h1>}>
<Earth position={[-1.2, 0, 0]} />
</Suspense>
</Canvas>
)
}

关于javascript - 渲染时暂停,但当我使用 react-three-fiber 中的 useLoader 时未指定后备 UI,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64106331/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com