three.js进阶之骨骼绑定

客官°小女子只卖身不卖艺 2024-03-30 14:16 42阅读 0赞

使用three.js也能实现3D模型的骨骼绑定，使用代码控制模型！参考[这里][Link 1]的呈现效果。  
![在这里插入图片描述][f70b3727b41344c3a99072adf03c5b0d.png]  
更加常见的应用场景应该是：给一个模型设置多套骨骼动画如唱、跳、Rap等，然后在浏览器中根据用户的输入选择执行不同的动画，这就需要对骨骼动画进行管理，本文先基于three.js官网提供的demo学习其实现机制。

### 源码解析 ###

这里参考官方提供的[demo应用][demo]的实现源码，关键代码片段，我已经在代码中作了详细的注释：

下面是`animate()`函数的代码：

function animate() {
        
    	// Render loop
    	requestAnimationFrame( animate );
    
    	for ( let i = 0; i !== numAnimations; ++ i ) {
        
    		const action = allActions[ i ];
    		const clip = action.getClip();
    		const settings = baseActions[ clip.name ] || additiveActions[ clip.name ];
    		settings.weight = action.getEffectiveWeight();
    	}
    	// Get the time elapsed since the last frame, used for mixer update
    	const mixerUpdateDelta = clock.getDelta();
    	// Update the animation mixer, the stats panel, and render this frame
    	mixer.update( mixerUpdateDelta );
    	stats.update();
    	renderer.render( scene, camera );
    }

### SkeletonHelper介绍 ###

通过阅读上面的源码， 发现SkeletonHelper是使得模型能够运动起来的关键，在three.js官网中也给出了简短的[介绍][Link 2]：

> A helper object to assist with visualizing a Skeleton. The helper is rendered using a LineBasicMaterial.  
> 翻译过来就是：这个辅助化工具能够使得骨骼可视化，使用LineBasicMaterial材质进行渲染。

#### 属性 ####

总而言之，这个工具类非常简单，只有如下三个属性：

*  bones : Array  
    当前模型的骨骼列表，这些骨骼将会以线性的形式渲染出来，如下图：  
    ![在这里插入图片描述][2eb6a35739644aafaf3aeabbde9be5b4.png]
 *  isSkeletonHelper : Boolean  
    这是一个只读的标志变量，用于检查传入的object是否为SkeletonHelper类型。
 *  root : Object3D  
    该属性保存的是构造函数中传入的模型。

#### 方法 ####

该工具类的方法和 LineSegments类的方法保持一致，说明是继承自 LineSegments类，而 LineSegments是继承自Line类，因此其基本方法就是和Line的绘制相关的方法，这一块直接查看[官方文档][Link 3]即可。

### AnimationMixer ###

AnimationMixer能够控制播放模型中包含的动画，如果一个场景中有多个模型存在动画，需要使用多个AnimationMixer分别控制。  
The AnimationMixer is a player for animations on a particular object in the scene. When multiple objects in the scene are animated independently, one AnimationMixer may be used for each object.

#### 方法 ####

*  `clipAction (clip : AnimationClip, optionalRoot : Object3D) : AnimationAction`  
    该方法将会返回一个AnimationAction对象。

### AnimationClip ###

动画剪辑（AnimationClip）是一个可重用的关键帧轨道集，它**表示一个对象的一个动作**。

### AnimationAction ###

AnimationActions 用来调度存储在 AnimationClips 中的动画，它可以管理单个动作，让这个动作开始暂停等。

[Link 1]: https://threejs.org/examples/#webgl_animation_skinning_ik
[f70b3727b41344c3a99072adf03c5b0d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/87acd57cc62b42c0b5029be211002ad2.png
[demo]: https://threejs.org/examples/#webgl_animation_skinning_additive_blending
[Link 2]: https://threejs.org/docs/index.html?q=SkeletonHelper#api/en/helpers/SkeletonHelper
[2eb6a35739644aafaf3aeabbde9be5b4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/b222cf2f7955402bb462827f0bf476b6.png
[Link 3]: https://threejs.org/docs/index.html#api/en/objects/Line