npm install antd @ant-design/icons three @react-three/fiber @react-three/drei
npm run dev
然后打开浏览器访问localhost:5173
在观察模式下，可以观察模型，使用gizmo实现三轴旋转
在选择模式下，Ctrl+鼠标左键点击模型上的点可以选择锚定点，Alt+左键点击选择约束点
在变形模式下，拖动约束点进行变形
由于交互方式比较简单，所以选择锚定点和约束点需要一些技巧（以下内容来自LLM，仅供参考）
核心目标：通过手动选择的点，为变形提供充分、均衡且无冲突的几何约束，确保线性系统稳定且能反映用户意图。
1. 锚点 (固定点) 的选择技巧：
数量是基础：
绝对最小值： 至少需要 3个非共线的固定锚点 来固定模型的旋转和平移自由度。如果只有1个或2个固定点，模型会绕点旋转或沿固定点连线滑动/旋转，导致系统欠约束，极易崩溃。
实际需求： 3点只是全局固定，对于局部变形稳定性和形状保持远远不够！ 你需要显著多于变形点数量的固定锚点，并且它们必须分布在需要保持形状的关键区域。经验上，固定锚点的数量应该与变形区域的复杂度和期望的保形强度成正比。
分布是关键：
包围变形区域： 固定锚点必须充分包围住你打算变形的区域。想象变形区域是一个“孤岛”，固定锚点就是稳固的“海岸线”。如果“海岸线”缺口太大，“孤岛”就会在变形中漂移、扭曲甚至沉没（崩溃）。
覆盖关键特征： 在模型需要刚性保持的部分（如角色的躯干、机械的底座、家具的腿）以及变形区域的边界（如手臂连接肩膀的环、洞口边缘）密集放置固定锚点。这些地方是抵抗变形的“要塞”。
相对均匀： 在整个模型上（尤其是远离变形点的区域），固定锚点应保持相对均匀的分布。避免在某个方向（如X轴）上约束点密集，而在垂直方向（如Y轴）上稀疏，这会导致系统在该方向上约束不足，引起病态。
避免“孤岛”中的固定点： 不要在计划大范围变形的区域内部零星放置固定点，除非你有特殊目的（如钉住某个局部）。这会造成剧烈的局部扭曲，并可能将问题传播开。
几何构型：
绝对避免共线： 所有固定锚点绝不能近似位于一条直线上！否则系统在垂直于该直线的方向上完全缺乏约束，崩溃几乎是必然的。
尽量避免共面： 如果所有固定锚点近似位于一个平面上（例如都在模型的底部平面上），那么系统在垂直于该平面的方向（法线方向）上约束会非常弱。虽然可能不会像共线那样完全崩溃，但会导致模型在该方向上发生不期望的拉伸、压缩或扭曲。理想情况是固定锚点分布在三维空间中（例如模型的底部、顶部和一些侧面）。
选择位置：
高曲率/特征点： 优先选择网格上的角点、脊线、边界上的顶点。这些点对定义形状更为关键。
拓扑关键点： 选择顶点度数较高（连接边较多）的顶点，它们通常是网格的“枢纽”。
对称点： 如果模型对称，确保在对称位置选择对应的固定锚点，以保持对称性。
2. 移动点/手柄 (目标点) 的选择技巧：
清晰定义目标： 明确你要移动的是模型的哪个具体部位（如指尖、鼻子尖、桌角）。选择该部位最具代表性的顶点作为移动点。
避免孤立： 移动点不能是“孤岛”。它必须通过一条相对直接的路径（在网格上）连接到固定锚点区域，并且这条路径上最好有足够的约束（固定锚点或后续提到的引导点）来传递变形信息。如果移动点和固定点之间隔着大片无约束区域，变形会变得不稳定且不可预测。
数量与分布 (对于复杂变形)：
单个移动点： 适合简单的平移、拉伸（如拉长一个触角）。
多个移动点： 对于复杂变形（如弯曲手臂、扭曲身体），需要选择多个移动点来定义目标形状。例如弯曲手臂时，至少需要选择手腕点作为主要移动点，可能还需要选择肘部点作为次级移动点或引导点（见下一点）。
引导点： 在主要移动点和固定锚点区域之间的关键位置（如关节、形状过渡区）额外选择一些顶点作为移动点或具有较弱目标位置的约束点。这可以引导变形沿着期望的路径发生，防止中间区域过度扭曲或折叠。例如，弯曲手臂时，在肘关节附近添加一个引导点并稍微移动它，可以控制弯曲的弧度更自然。
目标位置合理性： 移动点的新位置不能过于极端（例如瞬间移动到离固定点非常遥远的位置），这会给系统带来巨大的求解压力，可能导致数值不稳定或物理上不合理的变形（如过度压缩/拉伸）。渐进式移动通常更稳定。
3. 通用约束点 (固定点 + 移动点 + 引导点) 的综合技巧：
“刚柔边界”强化： 变形区域和保持形状区域的交界处是重中之重！ 务必在这个边界环上放置一圈或多圈密集的约束点（主要是固定点）。这就像在布料边缘缝上一条加固带，防止变形向刚性区域渗透或导致边界崩溃。
层级约束： 想象约束强度从核心固定区域到移动点逐渐减弱。在核心刚性区密集固定点，在刚性区边缘稍少但仍固定，在变形区靠近固定区的地方可以有一些弱约束或引导点，最后才是主要的移动点。
对称性： 如果模型对称且期望对称变形，务必在对称位置选择对称的约束点（固定点和移动点），并施加对称的目标位置。
可视化与诊断：
高亮显示： 清晰区分固定点（如红色）、移动点（如绿色）、引导点（如黄色）。
检查分布： 拖动前，务必肉眼检查约束点的空间分布：
是否覆盖了所有关键刚性区域和边界？
是否相对均匀？（非变形区也要有）
是否存在大片空白区域？特别是移动点到固定点之间的区域。
是否存在明显的共线或共面倾向？
观察崩溃模式： 如果变形崩溃了，仔细观察崩溃发生在哪里：
在移动点和固定点之间大片区域崩溃？ -> 典型的约束不足，需要在该区域（特别是路径上）添加更多固定点或引导点。
在移动点附近剧烈扭曲崩溃？ -> 可能是移动点周围缺乏固定点/引导点来维持局部形状，或者移动点本身是孤立的。尝试在移动点附近添加一些固定点或引导点。
整个模型沿某个方向塌陷/拉伸？ -> 极有可能是固定点共面（塌陷方向是面的法线方向）或共线（塌陷方向是垂直于线的平面）。检查固定点几何构型，在缺失约束的方向上添加固定点。
迭代调整： 手动选点通常不是一次完成的。看到不理想变形后，需要根据崩溃或扭曲的模式，动态地添加或移除约束点，然后重新求解。这是一个调试过程。
最少必要原则 (但需足够)： 目标是使用最少数量的约束点达到期望的稳定变形效果。过多的约束点会增加计算负担，并可能使变形过于僵硬。但“最少”的前提是“足够”。在稳定性和效率之间，优先保证稳定性（足够的约束）。
总结关键口诀：
固定点要多（远多于移动点），分布要广（覆盖关键区域和整体），构型要稳（绝不共线，避免共面）。
移动点要准（代表目标位置），避免孤立（有路径连固定点），复杂变形需引导（中间加点）。
边界要强（刚柔交界处密集约束）。
分布要查（肉眼审视空间覆盖），崩溃要看（根据现象诊断缺哪），调试要调（动态增删点）。
遵循这些技巧能极大提高手动选点方式下ARAP变形的成功率。然而，正如之前提到的，对于复杂模型或非专业用户，实现区域选择（刚性区域+移动点） 或基于控制柄（骨骼/笼子） 的方法，能更直观、更鲁棒地解决约束问题，是更推荐的进阶方向。手动选点对用户经验和耐心要求较高。