[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-923":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":22,"hasPages":22,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":25,"readmeContent":26,"aiSummary":27,"trendingCount":15,"starSnapshotCount":15,"syncStatus":14,"lastSyncTime":28,"discoverSource":29},923,"3dsvg","renatoworks\u002F3dsvg","renatoworks","The easiest way to turn SVGs into interactive React 3D components","https:\u002F\u002F3dsvg.design",null,"TypeScript",647,98,2,0,19,26,102,57,9.99,"MIT License",false,"main",[],"2026-06-12 02:00:20","# 3dsvg\n\n![3dsvg](.github\u002Fassets\u002Fdemo.png)\n\nThe easiest way to turn SVGs into interactive 3D.\n\n[![License: MIT](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-MIT-blue.svg)](LICENSE)\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F3dsvg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F3dsvg)\n\n## Overview\n\nThis is a monorepo with two packages:\n\n| Package | Description |\n|---------|-------------|\n| [`packages\u002Fengine`](packages\u002Fengine\u002F) | Embeddable `\u003CSVG3D>` React component — published to npm as [`3dsvg`](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F3dsvg) |\n| [`packages\u002Fweb`](packages\u002Fweb\u002F) | Visual editor at [3dsvg.design](https:\u002F\u002F3dsvg.design) — design 3D objects and export as images, video, 3D models, or embed code |\n\nThe web editor renders the engine's `\u003CSVG3D>` component directly — what you see in the editor is exactly what you get with the embed.\n\n## Quick Start\n\n```bash\nnpm install\nnpm run build:engine\nnpm run dev:web\n```\n\nOpen [http:\u002F\u002Flocalhost:3000](http:\u002F\u002Flocalhost:3000).\n\n## Embed\n\n```bash\nnpm install 3dsvg\n```\n\n```tsx\nimport { SVG3D } from \"3dsvg\";\n\n\u003CSVG3D text=\"Hello\" animate=\"spin\" \u002F>\n\u003CSVG3D svg=\"\u002Flogo.svg\" material=\"gold\" \u002F>\n```\n\nSee the full [engine docs](packages\u002Fengine\u002FREADME.md) for all props.\n\n## Web Editor Features\n\n- **4 input methods** — Text (10 Google Fonts), Pixel Editor, SVG Code, File Upload\n- **10 material presets** — Default, Plastic, Metal, Glass, Rubber, Chrome, Gold, Clay, Emissive, Holographic\n- **7 animations** — Spin, Float, Pulse, Wobble, Swing, Spin+Float, or static\n- **Textures** — 10 procedural presets or upload your own\n- **Configurable lighting** — Key light position\u002Fintensity, ambient, shadows\n- **PNG export** — Transparent or with background, up to 4K resolution\n- **Video export** — 60fps capture with iOS-style trim UI, MP4 (via FFmpeg WASM) or WebM, quality control\n- **3D model export** — Download the scene as GLB (color + materials preserved), STL (3D printing), OBJ, or PLY\n- **Camera mode** — iPhone-style shutter button, aspect ratio picker, viewfinder overlay\n- **Interactive canvas** — Drag rotation with momentum, scroll zoom, cursor-follow orbit\n- **Responsive** — Auto-zooms on narrow\u002Fportrait viewports to keep the 3D object visible\n- **Embed code export** — Copy-ready `\u003CSVG3D>` JSX snippet with all props from the current editor state\n- **Drag & drop** — Drop SVG files anywhere on the page to load them\n\n## Project Structure\n\n```\n3dsvg\u002F\n├── packages\u002F\n│   ├── engine\u002F                 # npm package \"3dsvg\"\n│   │   └── src\u002F\n│   │       ├── index.tsx       # SVG3D component (public API)\n│   │       ├── scene.tsx       # 3D scene, ExtrudedSVG, Canvas\n│   │       ├── controls.tsx    # Animations, smooth controls\n│   │       ├── materials.ts    # 10 PBR material presets\n│   │       ├── types.ts        # SVG3DProps, defaults\n│   │       └── use-font.ts     # Google Font loading\n│   └── web\u002F                    # Next.js editor app\n│       └── src\u002F\n│           ├── app\u002F            # Pages\n│           ├── components\u002F     # Editor UI, export bar\n│           └── lib\u002F            # Textures, FFmpeg, utilities\n└── package.json                # npm workspaces root\n```\n\n## Tech Stack\n\n| Library | Purpose |\n|---------|---------|\n| [Next.js 16](https:\u002F\u002Fnextjs.org\u002F) | App framework (web) |\n| [React Three Fiber](https:\u002F\u002Fdocs.pmnd.rs\u002Freact-three-fiber) | Declarative Three.js |\n| [Three.js](https:\u002F\u002Fthreejs.org\u002F) | 3D rendering |\n| [tsup](https:\u002F\u002Ftsup.egoist.dev\u002F) | Engine bundler |\n| [opentype.js](https:\u002F\u002Fopentype.js.org\u002F) | Font to vector paths |\n| [FFmpeg WASM](https:\u002F\u002Fffmpegwasm.netlify.app\u002F) | Video conversion (web) |\n| [shadcn\u002Fui](https:\u002F\u002Fui.shadcn.com\u002F) | UI components (web) |\n| [Tailwind CSS v4](https:\u002F\u002Ftailwindcss.com\u002F) | Styling (web) |\n\n## License\n\nMIT — [Renato Costa](https:\u002F\u002Frenato.works)\n\nMade in [Blueberry](https:\u002F\u002Fmeetblueberry.com) 🫐\n","3dsvg 是一个将SVG转换为交互式React 3D组件的工具。它提供了一个可嵌入的`\u003CSVG3D>` React组件，支持多种输入方式（文本、像素编辑器、SVG代码和文件上传），并内置了10种材质预设和7种动画效果，允许用户自定义光照配置，并能导出PNG图像、视频或3D模型等多种格式。此外，还配备了一个可视化在线编辑器，使得从设计到嵌入整个流程变得简单直观。适用于需要快速创建和集成3D图形到Web应用中的开发者或设计师。","2026-06-11 02:40:19","CREATED_QUERY"]