Defer model rendering

Questions
, ,
1

Hi!

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?

Thanx

2

Never mind. The question is answered here:

3

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