3dsvg-interactive-react

$27

npm install three @react-three/fiber @react-three/drei

Quick Start

import { SVG3D } from "3dsvg";

// Spin text in 3D

<SVG3D text="Hello" animate="spin" />

// 3D logo from SVG file

<SVG3D svg="/logo.svg" material="gold" />

// Pixel editor input

<SVG3D svg="<svg>...</svg>" material="chrome" animate="float" />

SVG3DProps — Full API

import { SVG3D } from "3dsvg";

<SVG3D

  // Input (choose one)

  text="Hello World"          // Text string (uses Google Fonts)

  svg="/path/to/file.svg"     // URL to SVG file

  // svg="<svg>...</svg>"     // Raw SVG markup string

  // Font (when using text=)

  font="Inter"                // Google Font name (10 presets available)

  // Material preset

  material="default"          // "default" | "plastic" | "metal" | "glass"

                              // "rubber" | "chrome" | "gold" | "clay"

                              // "emissive" | "holographic"

  // Animation

  animate="spin"              // "spin" | "float" | "pulse" | "wobble"

                              // "swing" | "spin+float" | undefined (static)

  // Geometry

  depth={0.2}                 // Extrusion depth (default: 0.2)

  bevelEnabled={true}         // Enable bevel on edges

  bevelThickness={0.02}       // Bevel thickness

  bevelSize={0.02}            // Bevel size

  bevelSegments={3}           // Bevel smoothness

  // Lighting

  ambientIntensity={0.5}      // Ambient light (0–1)

  keyLightIntensity={1.0}     // Key light brightness

  keyLightX={5}               // Key light X position

  keyLightY={5}               // Key light Y position

  keyLightZ={5}               // Key light Z position

  shadows={true}              // Enable shadow casting

  // Camera

  zoom={1}                    // Initial zoom level

  autoRotate={false}          // Auto-rotate camera (overrides animate)

  // Texture

  texture="none"              // "none" or procedural preset name, or URL

/>

Common Patterns

Basic Logo Viewer

import { SVG3D } from "3dsvg";

export function LogoViewer() {

  return (

    <div style={{ width: 400, height: 400 }}>

      <SVG3D

        svg="/logo.svg"

        material="metal"

        animate="float"

        depth={0.3}

        bevelEnabled={true}

        bevelThickness={0.03}

      />

    </div>

  );

}

Interactive 3D Text Badge

import { SVG3D } from "3dsvg";

export function HeroBadge() {

  return (

    <SVG3D

      text="LAUNCH"

      font="Inter"

      material="chrome"

      animate="spin"

      depth={0.4}

      keyLightIntensity={1.5}

      ambientIntensity={0.3}

    />

  );

}

Static Product Icon (No Animation)

import { SVG3D } from "3dsvg";

export function ProductIcon({ svgUrl }: { svgUrl: string }) {

  return (

    <SVG3D

      svg={svgUrl}

      material="gold"

      depth={0.15}

      bevelEnabled={true}

      shadows={true}

      ambientIntensity={0.6}

      keyLightX={3}

      keyLightY={8}

      keyLightZ={3}

    />

  );

}

Holographic Animated Logo

import { SVG3D } from "3dsvg";

export function HolographicLogo() {

  return (

    <SVG3D

      svg="/brand.svg"

      material="holographic"

      animate="spin+float"

      depth={0.1}

      ambientIntensity={0.8}

    />

  );

}

Inline SVG String

import { SVG3D } from "3dsvg";

const starSvg = `

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">

  <polygon points="50,5 61,35 95,35 68,57 79,91 50,70 21,91 32,57 5,35 39,35"

    fill="#FFD700"/>

</svg>

`;

export function Star3D() {

  return (

    <SVG3D

      svg={starSvg}

      material="gold"

      animate="pulse"

      depth={0.25}

    />

  );

}

Material Presets Reference

Value

Description

"default"

Standard PBR material

"plastic"

Smooth, slightly shiny plastic

"metal"

Matte metallic surface

"glass"

Transparent glass look

"rubber"

Soft matte rubber

"chrome"

High-gloss mirror chrome

"gold"

Warm gold PBR

"clay"

Soft diffuse clay (great for screenshots)

"emissive"

Glowing emission effect

"holographic"

Iridescent rainbow foil

Animation Presets Reference

Value

Description

"spin"

Continuous Y-axis rotation

"float"

Gentle up/down bob

"pulse"

Breathing scale animation

"wobble"

Side-to-side wobble

"swing"

Pendulum swing

"spin+float"

Spin combined with float

undefined

Static, user-draggable only

Monorepo Development Setup

git clone https://github.com/renatoworks/3dsvg.git

cd 3dsvg

npm install

npm run build:engine   # Build the npm package

npm run dev:web        # Start the visual editor at localhost:3000

Engine package only

cd packages/engine

npm run build          # Outputs to dist/

npm run dev            # Watch mode

Project Structure

packages/

├── engine/src/

│   ├── index.tsx      # SVG3D public component

│   ├── scene.tsx      # Three.js scene, ExtrudedSVG mesh

│   ├── controls.tsx   # Animation logic, orbit controls

│   ├── materials.ts   # PBR material preset definitions

│   ├── types.ts       # SVG3DProps TypeScript types

│   └── use-font.ts    # Google Font → vector path loader

└── web/src/

    ├── app/           # Next.js pages

    ├── components/    # Editor UI panels, export bar

    └── lib/           # Texture generators, FFmpeg utils

TypeScript Types

import type { SVG3DProps } from "3dsvg";

const config: SVG3DProps = {

  svg: "/logo.svg",

  material: "chrome",

  animate: "float",

  depth: 0.3,

};

export function MyComponent() {

  return <SVG3D {...config} />;

}

Next.js Integration

Because SVG3D uses Three.js (browser-only), use dynamic import with ssr: false:

// components/Logo3D.tsx

"use client";

import dynamic from "next/dynamic";

const SVG3D = dynamic(

  () => import("3dsvg").then((m) => m.SVG3D),

  { ssr: false, loading: () => <div>Loading 3D...</div> }

);

export function Logo3D() {

  return (

    <SVG3D

      svg="/logo.svg"

      material="gold"

      animate="spin"

    />

  );

}

Vite / React Integration

// No special config needed — just import and use

import { SVG3D } from "3dsvg";

function App() {

  return (

    <div style={{ height: "100vh" }}>

      <SVG3D text="Vite + 3D" material="plastic" animate="float" />

    </div>

  );

}

Visual Editor Workflow

• Go to 3dsvg.design

• Choose an input method: Text, Pixel Editor, SVG Code, or File Upload

• Pick a material, animation, and lighting configuration

• Use the Embed export to copy a ready-to-paste <SVG3D> JSX snippet

• Export as PNG (up to 4K), Video (MP4/WebM), or 3D Model (GLB/STL/OBJ/PLY)

Drag and drop an SVG file anywhere on the editor to load it instantly.

Troubleshooting

Component renders blank / white screen

• Ensure three, @react-three/fiber, and @react-three/drei are installed

• In Next.js, confirm you're using dynamic with ssr: false

• Wrap in a container with explicit width and height

SVG not extruding correctly

• Use simple, closed SVG paths; complex compound paths may not extrude

• Inline fill attributes on paths are respected — avoid CSS-only fills

• Try increasing bevelSegments for smoother curves

Text not loading

• The font prop loads from Google Fonts — ensure network access or host fonts locally

• Supported fonts are the 10 presets defined in use-font.ts

Performance issues

• Reduce bevelSegments (try 1 or 2)

• Disable shadows for lower-end devices

• Use animate={undefined} for static display

FFmpeg/video export fails in dev

• Video export uses FFmpeg WASM and requires SharedArrayBuffer

• Add these headers to your dev server: Cross-Origin-Opener-Policy: same-origin and Cross-Origin-Embedder-Policy: require-corp

License

MIT — Renato Costa / Blueberry