How do I update the UV mapping for a shapeGeometry?

[wileyknight]

I have a shape geometry that I've added to my scene and everything works on that just fine until I try to texture the shape. The mapping is off. I found this snippet that should fix my problem but I have no idea how to get this to work within r3f.

var mesh = new THREE.Mesh(shapeGeom, new THREE.MeshBasicMaterial({
  //color: "red",
  map: texture,
  side: THREE.DoubleSide,
  wireframe: false
}));
console.log(mesh.geometry);

var box = new THREE.Box3().setFromObject(mesh);
var size = new THREE.Vector3();
box.getSize(size);
var vec3 = new THREE.Vector3(); // temp vector
var attPos = mesh.geometry.attributes.position;
var attUv = mesh.geometry.attributes.uv;
for (let i = 0; i < attPos.count; i++){
	vec3.fromBufferAttribute(attPos, i);
	attUv.setXY(i,
  	(vec3.x - box.min.x) / size.x,
    (vec3.y - box.min.y) / size.y
  );
}

// turn vectors' values to a typed array
var bufferPoints = [];
points.slice().forEach( p => {
	bufferPoints.push(p.x, p.y, p.z);
});
var F32A = new Float32Array(bufferPoints);
attPos.set(F32A, 0);

scene.add(mesh);

Here is the full example:
https://jsfiddle.net/prisoner849/yn2z0e1w/

Where and how do I attach this example's box UV to the geometry UV?

const shapePoints= useMemo(() => {
  const winX = window.innerWidth / 2;
  const winY = window.innerHeight / 2;
  const tmpPts= [];
  const hX = winX / 2;
  const hY = winY / 2;
  tmpPts.push(new THREE.Vector2(-hX, hY));
  tmpPts.push(new THREE.Vector2(hX, hY / 4 + hY));
  tmpPts.push(new THREE.Vector2(hX, -hY));
  tmpPts.push(new THREE.Vector2(hX / 2, -(hY / 2) - hY));
  tmpPts.push(new THREE.Vector2(-hX, -hY));
  tmpPts.push(new THREE.Vector2(-hX, hY));
  return new THREE.Shape(tmpPts);
}, [winX, winY]);

return (
  <mesh>
    <shapeGeometry args={[shapePoints]} />
    <meshBasicMaterial map={texture} attach="material" />
  </mesh>
)

[drcmda]

the example mutates the existing geom after creation but before rendering out. in react that is a layout effect. this will also be more efficient than usememo + args because you would be re-creating the geometry every time props change otherwise. args are literally constructor arguments: <thing args={[1, 2, 3]} /> is the same as new Thing(1, 2, 3), so when args change, the object needs to construct again.

const mesh = useRef()

useLayoutEffect(() => {
  mesh.current.geometry.attributes.uv.setXY(...
}, [x, y])

return (
  <mesh ref={mesh}>
    ...

• useMemo: for calculations and input data
• useFrame: for mutating something 60 frames per second
• useLayoutEffect: executes after react renders, but before commit to the screen (or threejs)
• useEffect: executes after commit to the screen