★ FEATURED ARTICLE 我自己在 Three.js 项目里做虚拟角色的时候最头疼的往往不是身体动画而是头发。身体可以靠骨骼动画、混合树、IK 系统解决头发一旦飘起来要么僵硬得像钢板要么直接穿进肩膀里。直到我接触到一个叫 Ponytail 的插件才把马尾辫这个具体又磨人的问题彻底理顺。Ponytail 这个插件不是给真实头发做造型的而是专门在 WebGL / Three.js 场景中给角色模型追加一条带物理模拟的马尾辫。它解决的核心问题非常明确用尽量少的代码和性能开销让马尾随着角色转头、跑动、被风吹动时自然摆动。这篇文章就围绕“Ponytail 插件如何使用”展开从设计思路到核心参数从接入流程到踩坑实录把我实际跑通的过程完整写下来。1. 内容整体设计与思路拆解1.1 Ponytail 是什么为什么需要它先说清楚一件事Ponytail 不是给图片加头发特效的美颜插件它更像是一条“马尾骨骼生成器 物理模拟器”。你只要告诉它角色头部骨骼在哪它会自动创建一段由多个骨骼节点组成的链条并把这条链条挂到头部骨骼上。之后每个骨骼节点都会按照物理规则运动而末端的模型网格会跟随这条骨骼链变形。听起来原理不复杂但为什么需要专门挑一个插件来做因为头发物理在传统游戏引擎里已经非常成熟放到 WebGL 生态里却很尴尬。原生 Three.js 没有现成的头发物理模块自己写一个弹簧约束系统很容易遇到数值发散、抖动、穿模三个问题。Ponytail 把这段逻辑封装成了独立插件意味着你可以只关心三个东西接入点、参数、更新时机。还有一个容易被忽略的点马尾辫是虚拟角色里“动态感”最强的部分之一。一个角色如果只有手臂和腿在动头顶的马尾直直地竖着整个画面就会显得假。引入一个轻量的马尾物理插件能明显提升角色的生动程度。这在头像系统、直播虚拟形象、Web 端数字人、独立游戏角色等场景里投资回报率极高。1.2 选择 Verlet 积分的理由Ponytail 这个插件在物理模拟上采用的是 Verlet 积分而不是传统游戏物理引擎那种基于速度的欧拉积分。很多人第一次看到时会觉得奇怪马尾辫不就是一个简单的摆锤系统吗直接用力学公式驱动不就行了实际操作过就会发现头发的运动是典型的长链柔性体如果把每一段骨骼节点当作刚体用转向力去驱动很容易出现“面条手”一样乱抖的结果。Verlet 积分的核心思路很朴素每个节点不直接记录速度而是记录当前帧位置和上一帧位置下一帧位置由这两个位置的差值推断出来。这个方法的天然优势是稳定即使时间步长有小幅波动也不容易爆炸。在 Ponytail 的源码里马尾的每个骨骼节点会被当作一个质量点节点之间用距离约束绑定。每一帧更新时插件会先按惯性把节点移动到新位置再通过若干次迭代修正节点间距离确保骨骼链不会被拉伸或压缩。最后把修正后的位置转成旋转信息驱动马尾骨骼的旋转量。整个过程可以看作把一条项链按物理方式抛在空中再让每一颗珠子之间的距离保持固定。这种方案的另一个好处是计算量可控。对一条 12 到 24 段的马尾链每帧迭代 3 到 5 次约束就够了JavaScript 单线程跑起来也毫无压力。相比之下如果用粒子系统和布料物理虽然效果更精细但复杂度会高很多还得处理碰撞贴图、法线修正明显不太适合一个轻量插件。1.3 插件架构的整体流程从使用角度看Ponytail 的架构分为三层第一层是“建模层”负责把马尾定义成骨骼链。你需要告诉插件马尾有多少段、每段多长、初始朝向是什么。如果模型是从 Blender 导出的插件也可能直接读取你预置好的马尾骨骼链。第二层是“模拟层”负责每帧物理计算。它接收时间步长、风力、重力、阻尼等参数输出每个骨骼节点的目标世界坐标。第三层是“绑定层”负责把模拟结果同步给渲染层。它会把节点坐标变化转换为骨骼的旋转增量驱动 SkinnedMesh 的骨骼矩阵更新。理解这三层关系以后使用插件的逻辑就非常清晰了先建模再模拟最后绑定。中间任何一步出错表现出的症状都不一样。比如角色转头时马尾没反应可能是建模层没有把马尾链挂到正确的头部骨骼马尾乱飞则大概率是模拟层参数有问题马尾骨骼动了但模型网格没动则是绑定层更新顺序出错。后面排查问题时会反复用到这个判断方法。2. 核心细节解析与实操要点2.1 核心 API 与关键参数我使用的 Ponytail 版本基础 API 大致是这样的不同版本会有差异但核心思想一致const ponytail new Ponytail(scene, { segments: 16, segmentLength: 0.08, stiffness: 0.35, damping: 0.85, wind: new THREE.Vector3(0, 0, 0), gravity: -2.5, collisionRadius: 0.12, autoUpdate: true }); ponytail.attach(headBone); ponytail.update(deltaTime);这里最重要的几个参数值得一个一个拆开讲segments是马尾骨骼链的分段数。段数越多摆动越细腻物理计算量也越大。实际测试下来用于普通虚拟角色时 12 到 16 段足够如果马尾很长想要波浪效果可以考虑 24 段。但超过 32 段后不仅性能下降反而因为约束迭代次数不足出现“抖动补偿”现象。segmentLength是每段骨骼的长度单位是场景单位。这个参数必须与模型比例匹配。如果角色身高 1.8 米马尾长 0.5 米使用 16 段那每段长度大概是 0.03 米。设太大或太小都会让马尾看起来被拉伸或挤压。stiffness控制马尾的刚硬程度。数值越大马尾越硬朗摆动幅度越小适合武士发髻那种挺拔感觉数值越小马尾越柔顺摆动幅度越大适合空气刘海那种轻盈感。从 0.2 到 0.6 是一个比较常用的区间我通常从 0.35 开始调试。damping是阻尼系数控制马尾摆动的衰减速度。阻尼过小马尾会像永动机一样一直晃阻尼过大马尾几乎不摆物理效果消失。0.8 到 0.95 是我常用的区间。collisionRadius是马尾节点和身体碰撞球的半径。这个值需要根据模型头部和脖子粗细来设定。如果设置太小马尾会穿进后颈设置太大马尾会被挤到很奇怪的位置。下面是我总结的参数速查表参数作用推荐起始值调试方向segments骨骼链段数16增加段数让波浪更细腻减少段数提升性能segmentLength每段长度0.08根据角色比例调整避免拉伸stiffness刚性0.35调小更柔顺调大更挺拔damping阻尼0.85调小摆动更久调大更快停止wind风力向量(0,0,0)只在需要风吹效果时启用gravity重力-2.5模拟不同环境重力突出全身collisionRadius碰撞半径0.12防止穿模的关键参数之一autoUpdate自动更新true手动控制时设为 false2.2 马尾骨骼链的建模与坐标约定使用 Ponytail 之前一个很容易被绕进去的问题就是坐标系统。马尾从后脑勺伸出来如果角色模型面朝 Z 轴正方向那么马尾的初始方向通常是 Z 轴负方向。但如果模型面朝 X 轴正方向马尾初始方向又不一样了。这导致很多人装上插件后马尾直接横在脑袋旁边看起来很怪异。正确做法是先在建模软件里把马尾骨骼链摆对。我用 Blender 时有个习惯给角色额外创建一排马尾骨骼从后脑勺的骨头开始延伸方向指向角色后下方与地面形成大约 30 到 45 度的夹角。每节骨骼都带一点点轻微的下垂旋转让初始姿态更自然。记住一个原则马尾的根骨骼要粘在头部骨骼上而不是脖子或肩部骨骼上。如果用脖子骨骼做挂点角色摇头时马尾根部不会跟着头一起转会出现头发和头皮分离的灵异画面。我在 PonyTail 的系统里一般是调用attach(headBone)并且确保 headBone 的世界矩阵已经更新过。另外一个容易被忽视的点马尾骨骼链初始姿态的坐标要和最终渲染时角色的坐标保持一致。如果角色在 GLTF 中已经是 T-Pose 或 A-Pose马尾骨骼链也要在这些姿态下摆放好因为插件会基于“相对位移”来计算物理运动。初始姿态不对后面无论怎么调参数都是错的。2.3 接入角色模型时的三个关键检查点这一步是 Ponytail 接入流程里最容易出状况的地方。我总结了三个检查点每次接入前都会依次核对第一头部骨骼名字是否映射正确。不同的 DCC 工具导出的骨骼命名差异很大常见的有 Head、Bip01 Head、mixamorigHead、CC_Base_Head 等。Ponytail 一般会让你传入一个骨骼对象而不是字符串所以必须先通过skeleton.getBoneByName(Head)拿到对应骨骼再传给插件。如果直接传入null或者错误骨骼插件会报错或者静默失效。第二模型的缩放是否已经归一化。很多 GLTF 模型加载进来之后 scale 不是 1。如果模型被放大了 100 倍马尾的segmentLength就必须乘 100。最好在加载后直接model.scale.set(1, 1, 1)或者手动调整所有参数否则会出现马尾长度和角色比例对不上的问题。我曾因为忽略一个 0.01 的缩放系数把马尾调成了一根 5 米长的巨型辫子。第三SkinnedMesh 的骨骼矩阵是否在模拟前更新。如果马尾跟随头部骨骼运动需要确保角色的骨骼矩阵已经由动画系统更新过再执行 Ponytail 的物理更新。否则物理模拟使用的是旧矩阵马尾始终会慢半拍。通常的处理方式是将更新顺序设置为mixer.update(deltaTime); // 动画更新 skeleton.update(); // 骨骼矩阵更新 ponytail.update(deltaTime); // 马尾物理更新这个顺序非常重要我后面会再次提到。3. 实操过程与核心环节实现3.1 环境准备与安装安装 Ponytail 的过程不复杂前提是你已经有一个现成的 Three.js 项目。我的项目基于 Vite依赖版本是 Three.js r160 以上使用 ESM 模块。npm install ponytail如果项目里已经有 Three.jsPonytail 一般不会重复打包而是直接从 peerDependencies 里读取。这里有个小提醒安装前最好看一眼 package.json 里的版本兼容范围避免因为 Three.js 版本过新导致插件内部某些 API 失效。安装完成后在代码里引入import * as THREE from three; import { Ponytail } from ponytail;如果你使用的是 CDN 方式也可以直接在 HTML 里加载script typemodule import { Ponytail } from https://unpkg.com/ponytaillatest/dist/ponytail.module.js; /script这个插件整体依赖很少不像一些重型物理引擎那样需要装一堆依赖。在 npm 依赖列表里通常只有three和少量数学工具库对项目体积非常友好。3.2 初始化角色模型假设你已经加载好了一个带骨骼的 GLTF 角色模型下面这段代码是基础流程const loader new THREE.GLTFLoader(); const model await loader.loadAsync(./assets/character.glb); const sceneRoot model.scene; scene.add(sceneRoot); const skeleton new THREE.Skeleton(model.scene); const headBone skeleton.getBoneByName(Head) || skeleton.getBoneByName(Bip01 Head);这里有个非常容易被忽略的问题GLTF 加载后动画混合器需要单独初始化而且最好使用model.animations找一个空闲动画来驱动角色。如果角色一直处于 T-Pose马尾物理效果再神奇也看不出来。我建议至少让它做一个原地转身或摇头的动画通过动画触发头骨位移马尾才会有反应。还有一点从model.scene里创建的Skeleton不一定和 SkinnedMesh 内部的skeleton是同一个对象。最稳妥的办法是从网格对象上取const skinnedMeshes []; model.scene.traverse((child) { if (child.isSkinnedMesh) { skinnedMeshes.push(child); skeleton child.skeleton; } });这个skeleton.bones数组里的骨骼才真正参与渲染。用这个数组去查找Head骨骼避免出现两套骨骼矩阵不同步的问题。3.3 创建马尾并接入头部节点拿到headBone之后就可以创建马尾实例了。我的推荐代码如下const ponytail new Ponytail(scene, { segments: 16, segmentLength: 0.06, stiffness: 0.35, damping: 0.85, gravity: -3.0, collisionRadius: 0.12, wind: new THREE.Vector3(0.5, 0, 0), autoUpdate: false }); ponytail.attach(headBone);注意我这里把autoUpdate设为了false因为我要手动控制每一帧的更新时机确保更新顺序不会乱。如果场景比较简单设置成true也可以但插件会在渲染循环内部自动调用update可能与你自己的循环冲突。创建完马尾之后需要把马尾的可见网格加入场景。大部分情况下Ponytail 插件会附带一个 MeshBuilder 或者类似工具用来生成马尾的网格形状。也可以用你自己的马尾模型但那样需要额外做骨骼权重绑定。我通常选择插件提供的简单圆柱体链然后在后期替换成真正的毛发网格。这样可以先验证物理表现再优化视觉效果。3.4 放入游戏循环并调参这一步最关键也是最容易翻车的。我强烈建议用一个独立函数封装物理更新逻辑function updatePonytail(deltaTime) { // 1. 动画系统更新 if (mixer) mixer.update(deltaTime); // 2. 遍历所有 SkinnedMesh更新骨骼矩阵 skinnedMeshes.forEach((mesh) { mesh.skeleton.update(); }); // 3. 更新马尾物理 ponytail.update(deltaTime); // 4. 强制更新马尾关联的骨骼矩阵 ponytail.updateSkeletonMatrix(); }在 render loop 里调用renderer.setAnimationLoop((time) { const delta clock.getDelta(); updatePonytail(delta); renderer.render(scene, camera); });调参时的经验法则是“一次只调一个参数”。先把segments和segmentLength固定住只调整stiffness和damping观察马尾的摆动状态。如果马尾摆动时末端有抖动的颗粒感说明segments太多或约束迭代不足如果马尾整个像一根棍子说明stiffness太大。如果马尾角色停下来后还在晃始终停不住说明damping太小。如果重力感不够马尾看起来轻飘飘的把gravity绝对值调大。我实测下来一个比较自然的参数组合是{ segments: 14, segmentLength: 0.07, stiffness: 0.28, damping: 0.88, gravity: -4.0, collisionRadius: 0.15 }这个配置下马尾会随角色转身有一个明显的延迟然后带着轻微的二次摆动收尾真实感很强。4. 常见问题与排查技巧实录4.1 马尾在角色转身时飞出去这是我最先遇到的问题。角色原地转了 180 度马尾直接甩到天上像被离心力抛出去一样。刚开始我以为是stiffness不够把数值调大反而更严重。最后排查下来问题在于物理更新和动画更新的顺序颠倒了。如果ponytail.update(deltaTime)在骨骼矩阵更新之前执行马尾读到的头部位置是上一帧的当角色快速转身时新旧位置之间的位移差值巨大Verlet 积分计算出错误的新惯性马尾自然就飞了。解决办法是严格按“动画更新 - 骨骼矩阵更新 - 马尾物理更新”的顺序执行并且在跨帧时不要把上一帧的物理结果传递给当前帧。简单说就是确保每次 update 都从最新位置开始模拟。4.2 马尾穿模进入身体马尾穿模是另一个高频问题主要表现为马尾根部或中段钻进脖子和后颈里。这里涉及两个层面的原因。第一层原因是collisionRadius设置太小。马尾节点的碰撞半径只是一个小球如果身体模型的后颈部分比这个小球更宽穿模无法避免。解决方案是把碰撞半径从 0.1 逐步提到 0.2同时观察下坠时的贴合程度。第二层原因是马尾的初始方向不对。如果马尾初始方向几乎平行于后颈方向那不管怎么调碰撞半径都会穿模。正确做法是让初始方向略向外倾斜与后颈表面形成 10 到 20 度的夹角让物理系统先从一个安全的初始姿态开始。我还会额外再加一层保护对马尾骨骼链的根节点做一次手动旋转修正让它在模拟前就避开脖子区域。4.3 不同帧率表现不一致同一个项目在 60Hz 屏幕上表现正常换到 144Hz 屏幕上马尾开始高频抖动。这几乎是所有物理模拟都躲不开的问题原因是 Verlet 积分对时间步长敏感。帧率越高deltaTime越小两次位移差值越小但约束迭代次数不变反而容易在微观尺度产生抖动。推荐使用固定时间步长来模拟马尾物理而不是每帧直接传入真实 deltaTime。最简单的方式是对 deltaTime 做 clamp 处理const fixedDelta Math.min(deltaTime, 1 / 60); ponytail.update(fixedDelta);如果希望更进一步可以设置一个固定步长累加器每 1/60 秒执行一次物理更新。这样在不同刷新率下马尾的运动状态完全一致只是视觉效果稍微平滑。这个方法非常值得采用。4.4 性能优化从 24 段降到 12 段以后最初我为了让马尾更细腻设了 24 段结果在移动端上一旦角色跑起来帧率直接掉到 40 帧。后来尝试降到 12 段后帧率稳定在 60 帧马尾的观感差异其实很小。原因在于马尾的视觉细节不仅靠段数还靠网格的插值平滑。即使只有 12 个骨骼节点Ponytail 内部也可以通过样条插值让网格看起来是连续的。降低段数的同时适当增加每帧约束迭代次数可以有效保持稳定性和平滑度。还有一个容易被忽略的性能点马尾骨骼更新时会对整个 SkinnedMesh 的骨骼矩阵做一次刷新。如果角色有多个 SkinnedMesh而且每个都包含马尾骨骼的权重那么所有网格都要参与更新。这时可以单独把马尾网格拆出来只在马尾受到风力和动画影响时更新减少不必要的计算。5. 我从 Ponytail 项目里学到的几件事5.1 先把物理参数抽成独立配置第一次接入 Ponytail 时我把全部参数直接写在初始化代码里结果调参时改一处就要刷新浏览器效率很低。后来我改成了独立配置文件export const ponytailConfig { segments: 14, segmentLength: 0.07, stiffness: 0.28, damping: 0.88, gravity: -4.0, collisionRadius: 0.15, wind: { x: 0, y: 0, z: 0 }, iterations: 4 };配合 dat.GUI 之类的调试面板我可以在运行时实时调整 stiffness 和 damping找到最舒服的手感后再把参数写死。这样不仅效率更高还能避免脑子一热把所有值都改了结果不知道是哪一步改坏的情况。5.2 用调试面板观察约束力的实际值Ponytail 的物理计算是隐含的它有意识的避开了过于复杂的调试 API。但我在实际调参时发现单纯靠肉眼观察马尾摆动并不能知道约束是否被正确满足。比如一段骨骼链明明整体看起来没问题中间某个点却有肉眼不可见的高速振动时间久了会积累成穿模或抖动。我采取的笨办法是在调参阶段把每个骨骼节点的世界坐标用THREE.Mesh小球标注出来。每个小球代表一个物理节点观察它们之间的距离是否始终一致以及是否有异常跳变。这个方法虽然丑但对排查问题极其有效。一旦发现某个节点的移动速度远超其他节点就知道是阻尼小了或者迭代次数不够。5.3 预留好扩展点多马尾与附加风力Ponytail 这个名字听上去像是只做一个马尾但我实际用下来它完全可以扩展成多条头发链。无论是双马尾、高马尾加刘海、还是发梢分叉思路都是一样的创建多个 Ponytail 实例分别挂到不同的头部骨骼点设置不同参数。比如左侧马尾可以稍微长一些碰撞半径大一些右侧马尾短一些刚度高一些。这样不仅能模拟不对称发型还能让角色在转身时呈现更丰富的动态层次。这个扩展点建议在项目初期就考虑好避免后面把所有马尾逻辑都写在同一个实例里导致维护困难。除此之外风力参数值得预留一个全局接口。我后来做了一个简单的风场系统根据角色与场景物件的位置关系动态修改ponytail.wind头发就能在路过风扇、窗口、甚至奔跑时产生微妙的变化整个画面立刻活了起来。使用 Ponytail 插件给我最大的体会是头发物理这种看似复杂的功能只要选对实现思路其实比想象中更容易上手。关键是理解模型、模拟、绑定三层的关系保持正确的更新顺序再把参数调参当成科学实验而不是碰运气。希望这篇手记能帮你少走一些弯路。如果你也正在给角色加马尾可以直接从文中的参数组合开始试然后再根据实际效果微调。
阅读完成 · 觉得有帮助？
