Defer model rendering


I’m creating a website that consists of multiple sections, only one of them includes r3f canvas.
The model I’m using seems to be a bit heavy and rendering it is making other sections a bit laggy.
Is there a standard way in r3f to make the model render only when it’s inside the viewport?


Never mind. The question is answered here:

the last one seems good

import { useInView } from 'react-intersection-observer'

function App() {
  const { ref, inView } = useInView()
  return (
    <div ref={ref} className="glContainer">
       <Canvas frameloop={inView ? 'always' : 'never'} />
1 Like