3dsvg Interactive React

作者 reason-machines2384a003145a无许可证83 个星标收录于 2026年10月8日更新于 2026年10月8日仓库3个月前更新

Turn SVGs into interactive React 3D components using the 3dsvg library and visual editor

仅含说明Software Development Design & Creative

AI 生成的概览

指导开发者使用 3dsvg 库将 SVG 路径和文字转换为可交互的 React 3D 组件。

功能: 该技能说明如何使用 3dsvg npm 包，将 SVG 路径、形状和文字挤出为基于 Three.js 与 React Three Fiber 的可交互 React 3D 组件。内容涵盖安装方式、完整的 SVG3DProps API、材质与动画预设，以及 Next.js 和 Vite 的集成方式。它还介绍了可视化编辑器的工作流程，并针对渲染、字体、性能和视频导出等常见问题给出排查步骤。
适用场景: 当你希望在 React 应用中为 SVG 图形或文字添加 3D 效果时使用，例如旋转标志、动画徽章或立体图标。它也适用于配置 SVG3D 组件的材质、灯光、动画或相机行为，或排查画面空白与挤出异常等问题。
运行要求: 需要 Node.js 以及 npm、yarn 或 pnpm 来安装 3dsvg 包及其对等依赖 three、@react-three/fiber 和 @react-three/drei。文字渲染会从 Google Fonts 加载字体，因此需要网络访问或本地托管字体。视频导出使用 FFmpeg WASM，需要 SharedArrayBuffer 并配置特定的跨源响应头。该技能不包含脚本，仅为说明文档。

3dsvg — Interactive React 3D Components from SVGs

Skill by ara.so — Daily 2026 Skills collection.

3dsvg extrudes SVG paths, text, and shapes into fully interactive 3D React components powered by Three.js and React Three Fiber. It ships as an embeddable <SVG3D> component (npm) plus a visual editor at 3dsvg.design.

Installation

Peer dependencies (install if not already present):

Quick Start

tsx

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" />

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

tsx

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/>

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

tsx

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>  );}

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

tsx

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}    />  );}

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)

tsx

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}    />  );}

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

tsx

import { SVG3D } from "3dsvg";
export function HolographicLogo() {  return (    <SVG3D      svg="/brand.svg"      material="holographic"      animate="spin+float"      depth={0.1}      ambientIntensity={0.8}    />  );}

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

tsx

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}    />  );}

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

bash

git clone https://github.com/renatoworks/3dsvg.gitcd 3dsvgnpm installnpm run build:engine   # Build the npm packagenpm run dev:web        # Start the visual editor at localhost:3000

git clone https://github.com/renatoworks/3dsvg.gitcd 3dsvgnpm installnpm run build:engine   # Build the npm packagenpm run dev:web        # Start the visual editor at localhost:3000

Engine package only

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

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

tsx

import type { SVG3DProps } from "3dsvg";
const config: SVG3DProps = {  svg: "/logo.svg",  material: "chrome",  animate: "float",  depth: 0.3,};
export function MyComponent() {  return <SVG3D {...config} />;}

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:

tsx

// 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"    />  );}

// 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

tsx

// No special config needed — just import and useimport { SVG3D } from "3dsvg";
function App() {  return (    <div style={{ height: "100vh" }}>      <SVG3D text="Vite + 3D" material="plastic" animate="float" />    </div>  );}

// No special config needed — just import and useimport { 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

来源与署名

来源：reason-machines/trending-skills位于skills/3dsvg-interactive-react提交2384a00

许可证：无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

3dsvg Interactive React

3dsvg — Interactive React 3D Components from SVGs

Installation

Quick Start

SVG3DProps — Full API

Common Patterns

Basic Logo Viewer

Interactive 3D Text Badge

Static Product Icon (No Animation)

Holographic Animated Logo

Inline SVG String

Material Presets Reference

Animation Presets Reference

Monorepo Development Setup

Engine package only

Project Structure

TypeScript Types

Next.js Integration

Vite / React Integration

Visual Editor Workflow

Troubleshooting

License

来源与署名

更多来自 reason-machines/trending-skills 的技能

Yourvpndead Vpn Detection

X Mentor Skill Nuwa

Wildworld Dataset

Understand Anything Knowledge Graph

Webphysics Avbd Engine

Ui Ux Pro Max Skill

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices