# planeGeometry is flickering

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}
"https://threejs.org/examples/textures/uv_grid_opengl.jpg"
)}
// wireframe={true}
/>
</mesh>
</>
);
};

``````

And here is the link source of how it working.

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

and since you do this:

``````<meshBasicMaterial
``````const texture = useTexture("https://threejs.org/examples/textures/uv_grid_opengl.jpg")