Extrude Complex SVG with React Three Fiber

Questions
, , , ,
1

This question has a bounty on Stack Overflow as well.

By following this CodeSandbox example by rabelais88, it’s possible to extrude an SVG with React Three Fiber.

However, when I try doing it with the more complex tiger SVG Three.js has as an example, I get nothing back. No error message, and nothing on the screen. Does anyone know what’s going on? (Some tips on how to debug this would be useful as well, I guess…)

The only thing that’s different from rabelais88’s example seems to be that the tiger SVG has more groups (<g>), other than that, I don’t know why it doesn’t work. And the tiger SVG also has different colors, which I don’t think it’s something rabelais88’s code accounts for. However, shouldn’t then the tiger appear extruded with one color?

Here’s a copy of rabelais88’s code pretty much, just for reference — in order to reproduce it in the sandbox, just upload the tiger SVG and then change the file in the useLoader —:

import { useMemo } from "react";

import * as THREE from "three";
import { SVGLoader } from "three/examples/jsm/Addons.js";
import { Canvas, useLoader } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";

function Logo() {
  const svgData = useLoader(SVGLoader, "tiger.svg");
  const shapes = useMemo(() => {
    return svgData.paths.map((p) => p.toShapes(true));
  }, [svgData]);

  return (
    <mesh
      scale={0.05}
      rotation={[1 * Math.PI, 0, 0]}
      position={[-0.7, 0.5, 0]}
    >
      {shapes.map((s, i) => (
        <extrudeGeometry
          key={i}
          args={[
            s,
            {
              depth: 1,
              bevelEnabled: false,
              steps: 30,
            },
          ]}
        />
      ))}
      <meshPhongMaterial
        color="red"
        side={THREE.DoubleSide}
      />
    </mesh>
  );
}

export default function Svg() {
  return (
    <main style={{ width: "100vw", height: "100vh" }}>
      <Canvas>
        <OrbitControls />
        <ambientLight intensity={0.5} />
        <spotLight
          intensity={0.5}
          position={[300, 300, 4000]}
        />

        <Logo />
      </Canvas>
    </main>
  );
}