Update Edges from react-three/drei when shape changes

Questions
, , ,
1

Hi there,

i am trying to create different shapes based on what a user picks.
I discovered <Edges /> from react-three/drei that works just as i want it. The only thing that does not work is when i update the shape the <Edges /> component does not update so the lines disappear.
Here is a codesandbox showing the issue:
https://codesandbox.io/p/sandbox/animationtest-hmdl8s

I tried different approaches to update the <Edges /> component but it did not work…
My current solution is to create my own edges like this:

  const shapeGeom = useMemo(() => {
  const creator = getShapeCreator(shape);

  return creator();
}, [shape]);

const edgeShape = useMemo(() => {
  return new THREE.EdgesGeometry(new THREE.ShapeGeometry(shapeGeom));
}, [shapeGeom]);

return (
  <>
    <mesh>
      <shapeGeometry args={[shapeGeom]} />
    </mesh>
    <line>
      <lineSegments geometry={edgeShape} />
      <lineBasicMaterial color={'#000'} />
    </line>
  </>
);

the problem with this approach is that i cannot change the lineWidth because it is based on Line and it does not support it (read this in the docu).

Basically i am searching for a way to create outlines for dynamic shapes i am creating. The linewidth should also be adjustable

Any advice would be great!