fxshelf
← 返回 Card Orbit

坐标演示动画原理

Card Orbit 的 3D 路径可视化

在 3D 坐标轴上查看 Card Orbit 的路径分段与示踪点。

R3F · KaTeX

3D 坐标轴上的轨道

拖拽旋转查看。路径与库内 samplePath 一致；ZZ 由 depth\mathrm{depth} 映射，靠近时点更大更靠前。

local∈[0,1]\mathrm{local}\in[0,1] — 单卡在窗口内的路径参数
phase=(i/n+progress) mod 1\mathrm{phase}=(i/n+\mathrm{progress})\bmod 1
depth=sin⁡(π⋅u(local))\mathrm{depth}=\sin(\pi\cdot u(\mathrm{local}))
local = 0.000 · depth = 0.00 · seg = rise
  • ① 上升
    竖直爬上来
  • ② 拐弯
    四分之一圆弧
  • ③ 退出
    水平滑出

拖拽旋转 · 滚轮缩放 · X 红橙轨迹 / Y 轴向上 / Z 景深