‏3dsvg؛ اس‌وی‌جی‌هات رو سه‌بعدی کن

تو مخزن 3dsvg اومده که هدف پروژه ساده‌ست: راحت‌ترین راه برای سه‌بعدی و تعاملی کردن SVG. پروژه یه مونوریپو با دو پکیجه؛ یکی موتور رندر که به‌شکل کامپوننت ری‌اکت SVG3D روی npm با نام 3dsvg منتشر شده، و یکی ادیتور تحت وب. نکته‌ی مهم اینه که ادیتور دقیقاً همون کامپوننت موتور رو رندر می‌کنه، پس چیزی که تو ادیتور می‌بینی همونیه که تو سایت خودت هم می‌گیری.

استفاده‌ش چند خط بیشتر نیست؛ بعد از نصب پکیج، کامپوننت رو با پراپ‌هایی مثل متن، فایل SVG، متریال و نوع انیمیشن صدا می‌زنی:

import { SVG3D } from "3dsvg";

<SVG3D text="Hello" animate="spin" />
<SVG3D svg="/logo.svg" material="gold" />

ادیتور وب چهار راه ورودی داره — متن با ۱۰ فونت گوگل، ادیتور پیکسلی، کد SVG و آپلود فایل — و ۱۰ پریست متریال مثل شیشه، طلا، کروم و هولوگرافیک، به‌علاوه ۷ انیمیشن مثل چرخش و شناور شدن. نورپردازی، سایه و تکسچر هم قابل تنظیمه و بوم تعاملی با درگ چرخش، زوم با اسکرول و چرخش دنبال‌کننده‌ی نشانگر کار می‌کنه.

برای خروجی گرفتن دستت بازه: PNG تا کیفیت 4K با پس‌زمینه یا شفاف، ویدیو ۶۰ فریم بر ثانیه با خروجی MP4 (از طریق FFmpeg WASM) یا WebM، و مدل سه‌بعدی با فرمت‌های GLB، STL، OBJ و PLY. کد امبد آماده‌ی کامپوننت رو هم می‌تونی با همون تنظیمات فعلی ادیتور کپی کنی.

پشت صحنه Next.js 16، React Three Fiber و Three.js کار می‌کنن، فونت‌ها با opentype.js به مسیر برداری تبدیل می‌شن و رابط کاربری روی shadcn/ui و Tailwind CSS v4 سواره. پروژه با لایسنس MIT منتشر شده.

نکات کلیدی:

• تبدیل SVG یا متن به شیء سه‌بعدی تعاملی، هم با ادیتور آنلاین هم با کامپوننت ری‌اکت
• ۱۰ پریست متریال، ۷ انیمیشن، تکسچر و نورپردازی قابل تنظیم
• خروجی PNG تا 4K، ویدیو MP4/WebM و مدل سه‌بعدی GLB، STL، OBJ و PLY
• ساخته‌شده با Next.js 16، React Three Fiber، Three.js و opentype.js
• متن‌باز با لایسنس MIT