‏PolyCSS؛ رندر مدل سه‌بعدی فقط با DOM و CSS

تو این پروژه اومده که PolyCSS مدل‌های سه‌بعدیِ بافت‌دار رو مستقیم داخل DOM رندر می‌کنه و برای این کار اصلاً به WebGL یا تگ نیازی نداره. ایده‌ی اصلی اینه که هر چندضلعی (polygon) مدل، به یه المنت واقعی DOM تبدیل می‌شه؛ یعنی کل صحنه یه درخت از المنت‌های استاندارد HTML‌ـه، نه یه بومِ گرافیکیِ یکپارچه.

از نظر فنی، هر چندضلعی با transform: matrix3d(...) تو فضای سه‌بعدی جای‌گذاری می‌شه. مثلث‌هایی که بافت UV دارن، تو اسپرایت‌های atlas که خودِ کتابخونه می‌سازه بسته‌بندی می‌شن و با موقعیت‌دهیِ background تو CSS نمایش داده می‌شن. لایه‌چینیِ سه‌بعدی رو هم کامپوزیتورِ خودِ مرورگر مدیریت می‌کنه.

مزیتی که از این رویکرد به دست میاد اینه که هر چندضلعی جداگانه آدرس‌پذیره: می‌تونی بهش کلیک‌هندلر وصل کنی، کلاس CSS بدی و با ترنزیشن‌های CSS انیمیتش کنی. اینجا خبری از shadow DOM، کانتکست WebGL یا canvas نیست و همه چی با همون ابزارهای آشنای وب کنترل می‌شه.

از نظر فرمت، PolyCSS فایل‌های OBJ، glTF، GLB و MagicaVoxel VOX رو لود می‌کنه و بافت‌های UV و رنگ‌های متریال رو هم پشتیبانی می‌کنه. برای استفاده هم چند مسیر داره: المنت‌های سفارشی مثل ، و ، یه API دستوری با createPolyCamera و createPolyScene، و باندینگ‌های اختیاری برای React و Vue. هر کدوم به استک خودت می‌خوره رو برمی‌داری.

نمونه‌ی ساده‌ش با المنت‌های سفارشی این شکلیه: یه دوربین، یه صحنه و یه شکل سه‌بعدی رو مثل تگ‌های معمولیِ HTML کنار هم می‌چینی.

<poly-camera rot-x="65" rot-y="45">
  <poly-scene>
    <poly-orbit-controls drag wheel animate-speed="0.3"></poly-orbit-controls>
    <poly-icosahedron size="100" color="#ff6644"></poly-icosahedron>
  </poly-scene>
</poly-camera>

نکات کلیدی:

• مدل سه‌بعدی بافت‌دار رو مستقیم تو DOM و با CSS رندر می‌کنه، بدون WebGL و canvas
• هر چندضلعی یه المنت واقعی DOM‌ـه که می‌شه روش کلیک‌هندلر، کلاس CSS و انیمیشن گذاشت
• هر چندضلعی با transform: matrix3d(...) جای‌گذاری می‌شه و بافت‌های UV تو اسپرایت atlas بسته‌بندی می‌شن
• فرمت‌های OBJ، glTF، GLB و VOX رو پشتیبانی می‌کنه
• با JS خام، React و Vue کار می‌کنه و المنت سفارشی، API دستوری و باندینگ فریم‌ورک داره