3dsvg Interactive React

reason-machines/trending-skills/skills/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