logo标签列表

使用react-three-fiber的useLoader时，渲染时出现了挂起，但没有指定回退UI。

javascriptreactjsreact-three-fiberreact-suspense
3

我正在尝试为我的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, 0]} />
        </Canvas>
    )
}
2
useLoader（）需要从已在虚拟DOM中的<Suspense>组件内部调用。换句话说，<Suspense>需要包装<Earth />，而不是从中返回。 - Patrick Roberts
同时，fallback={<h1>Loading profile...</h1>} 是无效的。h1是一个dom元素。如果你需要dom覆盖作为备选方案，请使用drei库（特别是Html组件）https://github.com/pmndrs/drei，然后你可以这样做：`fallback={<Html><h1>loading</h1></Html>}` - hpalu
1个回答
7

useLoader() 函数被调用的组件（在这种情况下是 <Earth>）需要包装在一个 <Suspense> 中，不能从组件内部指定 suspense fallback。

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, 0]} />
            </Suspense>
        </Canvas>
    )
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接