Displaying SVG with react-three-fiber

[oskarsh]

Hey THREE.js community,
for a upcoming project I would like to embed svg's into my Canvas. I tried to use this gist to load and draw svg's. However the svg's are not getting rendered properly while the shapes are still added to the canvas. I can log the component and also inspect the created meshes with the THREE.js dev tools however they do not get rendered.

Inspecting the children of the group it seems like all the refs are null. Does that make a difference?

I've attached a simplified version of the code that I am using with the essentials. Can someone help me out here and explain what is going on? Thanks alot in advance!

function SvgShape({ shape, index }) {
  const mesh = useRef();
  return (
    <mesh ref={mesh}>
      <meshBasicMaterial
        attach="material"
        color={new THREE.Color("skyblue")}
        opacity={1}
        side={THREE.DoubleSide}
        polygonOffset
        polygonOffsetFactor={index}
      />
      <shapeBufferGeometry attach="geometry" args={[shape]} />
    </mesh>
  );
}

const svgResource = new Promise((resolve) =>
  new loader().load(SVG_URL, (shapes) => {
    resolve(
      flatten(
        shapes.paths.map((group, index) => {
          return group.toShapes(true).map((shape) => {
            const fillColor = group.userData.style.fill;
            return { shape, color: fillColor, index };
          });
        })
      )
    );
  })
);

const Scene = () => {
  const [shapes, set] = useState([]);
  useEffect(() => svgResource.then(set), []);
    <group scale={1}>
      {shapes.map((item) => (
        <SvgShape key={item.shape.uuid} {...item} />
      ))}
    </group>
  );
  return (
          <group scale={1}>
            {shapes.map((item) => (
              <SvgShape key={item.shape.uuid} {...item} />
            ))}
          </group>
  );
};

const App = () => {
  return (
    <div className="App">
      <Canvas>
        <Scene />
      </Canvas>
    </div>
  );
};

export default App;

[drcmda]

threejs has examples for sure, i would much rather want to stick to them, it won't be any different in react than in three. i only found this example but it animates a bit odd: https://codesandbox.io/s/wonderful-chandrasekhar-8l9rrj36j0?file=/src/App.js