Javascript 渲染时挂起,但在使用react three fiber中的useLoader时未指定回退UI
我正在尝试为我的ThreeJS对象使用纹理。 我得到一个错误:Javascript 渲染时挂起,但在使用react three fiber中的useLoader时未指定回退UI,javascript,reactjs,react-three-fiber,react-suspense,Javascript,Reactjs,React Three Fiber,React Suspense,我正在尝试为我的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 Ea
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>
)
}
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]} />
<Earth position={[-1.2, 0, 0]} />
</Canvas>
)
}
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>
)
}
在这种情况下,从中调用的组件需要包装在中,不能从组件中指定暂挂回退
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>
)
}
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]} />
<Earth position={[-1.2, 0, 0]} />
</Canvas>
)
}
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>
)
}
需要从安装在虚拟DOM内部的组件调用useLoader。换句话说,需要包装,而不是从中返回。此外,fallback={Loading profile…无效。h1是一个dom元素。如果需要dom覆盖作为回退,请使用drei库Html组件,然后可以执行fallback={Loading}>