渲染时暂停,但是当我使用react-three-fiber的useLoader时未指定回退UI

问题描述

我正在尝试为我的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

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]} />
        </Canvas>
    )
}

解决方法

<Earth>调用useLoader()的组件需要包装在<Suspense>中,无法从组件内部指定暂挂回退。

Earth.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]} />
            </Suspense>
        </Canvas>
    )
}