How to Make SVG Mesh 3D Work with React Three Fiber

Questions
, , ,
1

This question also has a bounty on Stack Overflow.

I’m trying to make the awesome package svg-mesh-3d work with React Three Fiber, but I just can’t quite seem to find a way. If this question finds a good answer I think I might try to create a package on top of it to abstract away some of its complexity.

The closest I’ve got so far was actually this CodeSandbox by robksawyer. But it seems to be broken. The error reads:

Cannot read properties of undefined (reading 'call')

Anyway, here is his code for reference:

import React, { Suspense } from "react"
import { createRoot } from "react-dom/client"
import { useEffect, useRef } from "react"
import { Canvas, useFrame } from "@react-three/fiber"
import loadSvg from "load-svg"
import { parse } from "extract-svg-path"
import svgMesh3d from "svg-mesh-3d"
import THREE from "three"
import "./styles.css"

import flame from "../public/flame.svg"

const container = document.getElementById("root")
const root = createRoot(container)

const createGeometry = require("three-simplicial-complex")(require("three"))

export function SvgButton() {
  const ref = useRef()

  useEffect(() => {
    loadSvg(flame, (err, svg) => {
      const svgPath = parse(svg)
      const meshComplex = svgMesh3d(svgPath, {
        delaunay: false,
        scale: 4
      })

      ref.current.geometry = createGeometry(meshComplex)
    })
  }, [])

  useFrame(({ pointer }) => {
    ref.current.rotation.y += Math.sin(pointer.x)
  })

  return (
    <>
      <mesh ref={ref} />
    </>
  )
}

function Content() {
  return (
    <Suspense fallback={null}>
      <SvgButton />
      <meshDepthMaterial />
    </Suspense>
  )
}

root.render(
  <Canvas style={{ background: "#0e0e0f" }} camera={{ position: [0, 0, 7.5] }}>
    <pointLight />
    <pointLight position={[10, 10, -10]} />
    <pointLight position={[-10, -10, 10]} />
    <Content />
  </Canvas>
)