[React Three Fiber] Canvas rerenders each time the window is resized, not responsive

Questions
, , ,
1

@drcmda I’ve created a React App using r3f. I have a scene set up with the scene background as a cubetexture. The issue I’m having is whenever I resize the window, the canvas seems to rerender, causing the screen to flicker exposing the background color.
Also, related to this, I have an intro camera animation set up in a component(in useFrame), and the component renders twice causing the animation to repeat from start again. This happens only twice. But when the window is being resized, along with the flicker, there is a rerender of components for each smalll resize.

According to the docs, r3f i thought was responsive out of the box, I’m not sure what the issue is. Could be great if you could help me out. Thanks!

2

flicker means you are re-creating objects, a texture for instance. you should not have side effects, if any of your code looks like this:

function Foo() {
  const texture = new THREE.Texture()
  return <material map={texture} />

and it doesn’t matter if that’s a texture, uniforms or whatever, you are essentially creating it every time the component renders. components can render if you resize the browser for instance. use useMemo, useState or useLoader to maintain state.

same for your animation, if any of your code looks like this:

let t = 0
useFrame(() => {
  ref.current.position.x = t++

then that’s essentially the same problem. every time the component renders t will be 0 again. it is better to rely on a THREE.Clock for animations. r3f makes you one by default:

useFrame(state => {
  ref.current.position.x = Math.sin(state.clock.elapsedTime) * 5

other than that i’d need to see a codesandbox.