planeGeometry is flickering

Questions
, , ,
1

My planeGeometry is flickering and I don’t understand why.

Can anyone tell me where the error of it?

Here is the code.

const PlaneGeometryImage = () => {
  const planeRef = useRef<any>(null);

  useLayoutEffect(() => {
    if (planeRef.current) {
      let g = planeRef.current;
      let z = 4;
      let p = g.parameters;
      let hw = p.width * 0.5;

      let a = new THREE.Vector2(-hw, 0);
      let b = new THREE.Vector2(0, z);
      let c = new THREE.Vector2(hw, 0);

      let ab = new THREE.Vector2().subVectors(a, b);
      let bc = new THREE.Vector2().subVectors(b, c);
      let ac = new THREE.Vector2().subVectors(a, c);

      let r =
        (ab.length() * bc.length() * ac.length()) /
        (2 * Math.abs(ab.cross(ac)));

      let center = new THREE.Vector2(0, z - r);
      let baseV = new THREE.Vector2().subVectors(a, center);
      let baseAngle = baseV.angle() - Math.PI * 0.5;
      let arc = baseAngle * 2;

      let uv = g.attributes.uv;
      let pos = g.attributes.position;
      let mainV = new THREE.Vector2();
      for (let i = 0; i < uv.count; i++) {
        let uvRatio = 1 - uv.getX(i);
        let y = pos.getY(i);
        mainV.copy(c).rotateAround(center, arc * uvRatio);
        pos.setXYZ(i, mainV.x, y, -mainV.y);
      }

      pos.needsUpdate = true;
    }
  }, []);

  return (
    <>
      <mesh position={[0, -2, -10]}>
        <planeGeometry
          ref={planeRef}
          args={[20, 10, 30, 30]}
        ></planeGeometry>
        <meshBasicMaterial
          side={THREE.DoubleSide}
          map={new THREE.TextureLoader().load(
            "https://threejs.org/examples/textures/uv_grid_opengl.jpg"
          )}
          // wireframe={true}
        />
      </mesh>
    </>
  );
};

And here is the link source of how it working.

2

it re-renders, thousands of times, something in there triggers setState in a loop.

and since you do this:

<meshBasicMaterial
  map={new THREE.TextureLoader().load(
    "https://threejs.org/examples/textures/uv_grid_opengl.jpg"
  )}

you’re basically giving it a new texture every render, hence the flicker.

  1. fix the infinite loop, use console.log to see if something renders
  2. React Three Fiber Documentation
const texture = useTexture("https://threejs.org/examples/textures/uv_grid_opengl.jpg")
...
<meshBasicMaterial map={texture} />
2 Likes