Fibonacci球面晶格正交投影thinking-orbs点阵动画做到真3D的数学原理【免费下载链接】thinking-orbsDotted thought-orb loading indicators for AI agent UIs, 9 tuned types, two sizes, auto dark/light项目地址: https://gitcode.com/gh_mirrors/th/thinking-orbsthinking-orbs是一套为 AI Agent 界面打造的点阵加载动画思考指示器9 种思考中状态、两种尺寸、自动适配深色/浅色。它只用普通 2D Canvas 就能画出真 3D的旋转球体——没有 WebGL、没有滤镜靠的只是两把数学钥匙Fibonacci 球面晶格负责在球面上均匀撒点正交投影负责把旋转后的 3D 点压回 2D 画面。下面拆解这套原理帮你理解为什么它转起来像真的。为什么假 3D的加载动画一眼就假 常见的假 3D spinner 套路CSS 椭圆、模糊光斑、渐变色块。问题在于——它们根本没有第三维。thinking-orbs 的做法是反过来的先在三维空间里确定每个点的真实坐标每帧对整颗球做一次 3D 旋转投影到 2D 平面并用点的大小和颜色深浅表达前后距离。深度不是画出来的是算出来的。这正是它真的根源。Fibonacci 球面晶格让 N 个点均匀铺满球面先想清楚要解决什么问题往球面上撒 N 个点怎么才不扎堆最直觉的经纬线画法会翻车极点附近挤成疙瘩赤道一带却稀疏。thinking-orbs 的解法是经典的天文/数学工具——Fibonacci 晶格核心就三步见 fibDir高度均匀第 i 个点的纵向坐标 y 等间距分布y 1 − 2(i0.5)/n保证从北极到南极均匀黄金角扭转每多一个点水平角度就比上一个多转黄金角 ≈ 137.5°Math.PI * (3 − √5)。这个角度是最不像整数比的角度让新点永远落在旧点之间的空隙里——和向日葵种子、菠萝表皮的排列是同一个原理回到球面由 y 反推水平半径rad √(1 − y²)就得到一个单位球面上的方向向量。const golden Math.PI * (3 - Math.sqrt(5)); // 黄金角 ≈ 137.5° const y 1 - (2 * (i 0.5)) / n; const rad Math.sqrt(1 - y * y); const a i * golden; return [rad * Math.cos(a), y, rad * Math.sin(a)];这套晶格在多处登场weaving编织状态的三股螺旋就缠绕在一个 150 点的 Fibonacci 幽灵球上braid.tscomposing/breathing的缎带同样衬着它ribbon.tsconnecting星座的节点也由此均匀布点再叠加噪声漂移web.ts。正交投影把旋转后的 3D 点压成 2D 画面有了球面上每个点的三维坐标接下来是相机。thinking-orbs 的相机只做两件事见 makeProjYaw 旋转——绕竖直轴转模拟球自己在自转Tilt 倾斜——把相机抬高一个俯角让球看起来更有立体感而不是正对赤道。然后就是正交投影的定义性一步直接丢掉 z 坐标只留下 x、y 作为屏幕坐标y 取负号因为屏幕 y 轴朝下return [cx x1 * scale, cy - y1 * scale, z2]; // 丢z即正交投影z2留作深度为什么选正交而不是透视投影三个很实在的理由剪影永远是完美的圆正交投影下球体的轮廓严格是圆不会随旋转变形更便宜透视投影要对每个点做一次除法正交投影是纯粹的加减乘对每秒 60 帧的加载动画来说省下的都是真金白银spinner 尺寸下二者几乎无差20~64px 的小球透视畸变肉眼不可见。注意返回值里z2没有被丢掉——它是下一节的深度密码。深度感三件套大小 × 墨色 × 画家算法 投影后所有点都平躺在画布上深度感靠三招恢复全部写在 core.ts 里手段做法效果点大小r (base k × depth) × scaledepth (z1)/2近处点大、远处点小墨色深浅white far − span × depth近处墨更浓、远处更淡暗色主题自动镜像画家算法finalizeFrame 按 z 从远到近排序近处点最后画遮挡关系正确近点盖远点searching状态的扫描子午线还多叠了一层被扫到的点按高斯脉冲放大、增亮lattice.ts于是球面上一道亮纹缓缓滚动——这就是扫描的体感来源。同一套数学9 种思考姿态 晶格 投影 深度着色只是地基9 种状态各盖了不同的建筑searching经纬点阵 扫描子午线lattice.tssolving魔方——14 层 90° 带区旋转乱序后倒放复原lattice.tsconnectingFibonacci 节点 值噪声漂移 距离成边 脉冲信号web.tsweaving三股螺旋 径向呼吸织出上下穿插感braid.ts️working12 条倾斜轨道幽灵轨迹 运行粒子orbits.ts️composing / breathing同一套缎带渲染器一个倾斜翻涌、一个正对镜头呼吸ribbon.tslistening双频波沿纬圈滚动lattice.ts⬢shaping弧长参数化混合圆→三角→方形morph.ts每种状态在 64px 与 20px 下的点密度、点径、速度都被单独调参汇总在 presets.ts完整数值规格见 spec/orbs-spec.json。正因为一帧 一份完整的绘制指令清单排序、裁切都在几何步完成这套输出被原样移植到 React Native 和 SwiftUI——见 PORT_PLAN.mdspec/orbs-golden.json 里的黄金向量则让各端可以逐数值比对而不是对像素。新手上手3 行代码跑起来 npm install thinking-orbsimport { ThinkingOrb } from thinking-orbs; TinkingOrb statesearching size{64} /注上面示例为示意拼写实际以 README 为准ThinkingOrb statesearching size{64} /。想读源码克隆仓库浏览即可只读使用git clone https://gitcode.com/gh_mirrors/th/thinking-orbs小结thinking-orbs 的真 3D没有秘密武器只有三笔干净的账黄金角撒点、正交投影丢 z、按深度调大小与墨色。数学上毫不含糊工程上却便宜到能在低端设备上流畅跑 60 帧——这或许正是加载动画这个小需求最值得抄的思路。✨【免费下载链接】thinking-orbsDotted thought-orb loading indicators for AI agent UIs, 9 tuned types, two sizes, auto dark/light项目地址: https://gitcode.com/gh_mirrors/th/thinking-orbs创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考