Three.js的人物动画与交互

程序员的很多工作是在数据处理和优化以及交互上，这种人物动画的数据是由专业的三维模型人员用三维软件做好了的，不是程序员做的。就是人物的模型和动作都是事先做好了的，程序员做的是载入场景并且能够调用某一动作达到交互要求。这里讲一个three.js自带的案例,机器人动画，稍稍修改了下为了下面的几节做铺垫。运行效果：http://www.b2bdmp.com/examples/robotannimate.html

这里，事先做好了机器人的模型，以及几个动画，格式为glb,我们做了交互，按某键时调用机器人某一动作。
我们一般会用到three.js提供三个类，AnimationMixer，AnimationClip，AnimationAction几个类。第一个类是动画混合器，控制所有动画的更新,并且绑定一个对象，这里绑定了机器人，对他的动画进行管理。第二个类是存储了某一个动画的数据，动画帧数据，叫可重用的关键帧轨道集，这里机器人有几个动作就有几个clip。第三个类是用来调度存储在AnimationClips中的动画，比如播放，还有停止等，还有切换动画时淡入淡出的效果,是用来切换每一个clip时的效果。
在初始化时，加载了机器人模型，并且把他的动画数据保存起来，这里用的GLTFLoader类来加载glb模型。然后调用了createAnimation函数将动画数据保存在变量animations中，就是clip动画帧数据的数组，代码如下：

const loader = new GLTFLoader();
				loader.load( 'models/gltf/RobotExpressive/RobotExpressive.glb', function ( gltf ) {
   

					model = gltf.