ThreeJS入门（139）：THREE.PropertyMixer 知识详解，示例代码

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，webgl，ThreeJS，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

查看本专栏目录 - 本文是第 139篇入门文章

THREE.PropertyMixer 是一个用于处理动画的类，它可以将多个属性（如位置、旋转、缩放等）混合在一起，以便在动画过程中平滑地过渡。这个类主要用于 Three.js 中的骨骼动画和形状动画。

以下是 THREE.PropertyMixer 的一些主要方法和属性：

1. clips: 存储所有与该 mixer 关联的剪辑对象。
2. accuIndex: 累积索引，用于跟踪当前播放的位置。
3. accuBuffer: 累积缓冲区，用于存储每个剪辑的累积值。
4. valueSize: 值的大小，表示每个剪辑的属性值的数量。
5. getActiveClips(): 返回一个包含所有活动剪辑的数组。
6. update(delta): 更新 mixer 的状态，根据给定的时间增量（delta）来更新剪辑的位置。
7. setValue(name, value): 设置指定名称的属性值。
8. getValue(name): 获取指定名称的属性值。
9. uncache(name): 从缓存中移除指定名称的属性值。

使用 THREE.PropertyMixer 的基本步骤如下：

1. 创建一个 THREE.PropertyMixer 实例。
2. 为每个需要动画的属性创建一个 THREE.AnimationObjectGroup，并将其添加到 PropertyMixer 的 clips 数组中。
3. 调用 update 方法来更新动画状态。
4. 使用 getValue 方法获取当前动画的值。

以下是一个简单的示例：

// 创建一个 PropertyMixer 实例
var mixer = new THREE.PropertyMixer();

// 创建一个 AnimationObjectGroup 并添加到 mixer 的 clips 数组中
var group = new THREE.AnimationObjectGroup();
group.add(new THREE.AnimationNode('position', 'vec3'));
mixer.clips.push(group);

// 更新 mixer 的状态
mixer.update(0.01); // 假设每帧的时间间隔为 0.01 秒

// 获取当前动画的值
var position = mixer.getValue('position');
console.log(position);

注意：THREE.PropertyMixer 已经被弃用，建议使用 THREE.AnimationMixer 替代。