@xingwangzhe/tags-cloud: موتور ابر برچسب سه‌بعدی چندحالته ساخته‌شده بر ریاضیات محض

GitHub: xingwangzhe/tags-cloud · دمو: tagscloud.needhelp.icu · npm: @xingwangzhe/tags-cloud · MIT

ابر برچسب برای بیش از دو دهه جزء اصلی تجسم وب بوده. @xingwangzhe/tags-cloud بازتعریف کاملی از مفهوم ابر برچسب سه‌بعدی است که از پایه بازسازی شده.

بنیاد ریاضی: سه ستون رندرینگ سه‌بعدی

توزیع کره فیبوناچی

الگوریتم کره فیبوناچی توزیعی از نقاط تولید می‌کند که به طور قابل توجهی یکنواخت در سطح کره است. از نسبت طلایی $\varphi \approx 1.618$ استفاده می‌کند. برای کره به شعاع $R$ با $N$ نقطه:

$$\phi_i = \arccos\left(-1 + \frac{2i + 1}{N}\right), \quad \theta_i = \sqrt{N\pi} \cdot \phi_i$$

چرخش سه‌بعدی: ضرب ماتریس

$R_y(\alpha)$ و $R_x(\beta)$ برای چرخش به ترتیب حول محورهای Y و X:

$$\begin{pmatrix} x' \ y' \ z' \end{pmatrix} = R_y(\alpha) \begin{pmatrix} x \ y \ z \end{pmatrix}$$

طرح‌ریزی پرسپکتیو

نسبت مقیاس: $\text{per} = \frac{2 \cdot \text{depth}}{2 \cdot \text{depth} + z}$، کدورت: $\text{alpha} = \min(1, \max(0, \text{per}^2 - 0.25))$

شش نوع برچسب

متن، تصویر، SVG، HTML، ویدئو، Element—همگی با هم در یک فضای سه‌بعدی می‌چرخند.

نوع	فرمت ورودی	رندرر
متن	string	Canvas 2D
تصویر	{ type:“image”, src }	Canvas 2D
SVG	{ type:“svg”, content }	DOM
HTML	{ type:“html”, html }	DOM

اندازه بسته

فرمت	اندازه
ESM	~۱۲KB
Gzip	~۳KB