ThreeJS创建关键帧动画-阿里云开发者社区

之前有说过两种创建动画的形式，一个是很粗的方式，直接在requestAnimationFrame中修改模型的属性，因为threejs本身就会不断刷新画面，利用不断刷新的时候修改模型属性就实现了每次刷新后修改模型的一些属性，另一种方式是用tweenJs，这个使用起来简单，但是缺点要另外引入tweenjs才可以使用，还有一种是threejs自带的动画实现效果，叫关键帧动画，这节补上。了解关键帧动画之前要了解其中几个重要的概念：

KeyframeTrack 关键帧轨道

关键帧轨道用来制作一组动画，用来在这组动画中动态修改模型某一个属性的值，最终形成动画，比如可以修改模型的位置，修改模型的材质颜色等，KeyframeTack的入参如下，KeyframeTrack( name : String, times : Array, values : Array, interpolation : Constant )

name - 关键帧轨道(KeyframeTrack)的标识符

times - 关键帧的时间数组, 被内部转化为 Float32Array

values - 与时间数组中的时间点相关的值组成的数组, 被内部转化为 Float32Array

interpolation - 使用的插值类型

同时，threejs提供多种KeyFrameTrack的子类，来展示各种不用的属性值改变，包括： VectorKeyframeTrack:向量类型的关键帧轨道，ColorKeyframeTrack:反应颜色变化的关键帧轨道，BooleanKeyframeTrack:布尔类型的关键帧轨道，NumberKeyframeTrack:数字类型的关键帧轨道，QuaternionKeyframeTrack:四元数类型的关键帧轨道，StringKeyframeTrack:字符串类型的关键帧轨道。

AnimationClip 动画剪辑

动画剪辑(AnimationClip)是一个可重用的关键帧轨道集，它用来定义动画，它的入参如下

AnimationClip( name : String, duration : Number, tracks : Array )

name - 此剪辑的名称

duration - 持续时间 (单位秒). 如果传入负数, 持续时间将会从传入的数组中计算得到。

tracks - 一个由关键帧轨道(KeyframeTracks)组成的数组。AnimationClip里面，每个动画属性的数据都存储在一个单独的KeyframeTrack中。

Animation Mixer 动画混合器

动画混合器是用于场景中特定对象的动画的播放器。当场景中的多个对象独立动画时，每个对象都可以使用同一个动画混合器，它的入参如下：AnimationMixer( rootObject : Object3D )

rootObject - 混合器播放的动画所属的对象。

AnimationAction 动画动作

AnimationActions 用来调控制存储在AnimationClips中的动画。通过配置AnimationAction，我们可以决定何时播放、暂停或停止其中一个混合器中的某个AnimationClip，这个AnimationClip是否需要重复播放以及重复的频率，是否需要使用淡入淡出或时间缩放，以及一些其他内容。它的入参如下：AnimationAction( mixer : AnimationMixer, clip : AnimationClip, localRoot : Object3D )

mixer - 被此动作控制的动画混合器

clip - 动画剪辑保存了此动作当中的动画数据

localRoot - 动作执行的根对象

好了，下面开始制作动画，首先还是需要先绘制一个threejs场景，在场景中防止一个正方体：

cubeGeo = new THREE.BoxBufferGeometry( 50, 50, 50 );
cubeMaterial = new THREE.MeshLambertMaterial( { color: 0x0000FF, map: new THREE.TextureLoader().load( './ThreeJs/images/box.png' ) } );
var mesh = new THREE.Mesh( cubeGeo, cubeMaterial );
mesh.name = "Box";
scene.add( mesh );

效果如下：

ThreeJs制作关键帧动画_初始化

下面添加动画效果，相关的作用都标注在代码上的注释中了，

//创建时间轴，并配置第一个动画效果，改变模型位置
        const times = [0, 3, 6]; //时间轴上，设置三个时刻0、3、6秒
        const values = [0, 0, 0, 100, 0, 0, 0, 100, 100];// times中三个不同时间点，物体分别对应values中的三个xyz坐标
        const posKF = new THREE.KeyframeTrack('Box.position', times, values);// 0~3秒，物体从(0,0,0)逐渐移动到(100,0,0),3~6秒逐渐从(100,0,0)移动到(0,0,100)

        //创建第二个动画效果，改变模型角度
        const xAxis = new THREE.Vector3(1,0,0) //三维向量，沿x轴
        const qInitial = new THREE.Quaternion().setFromAxisAngle(xAxis,0)//起点角度
        const qFinal = new THREE.Quaternion().setFromAxisAngle(xAxis,Math.PI)//终点角度
        const rotateValues = [ qInitial.x,qInitial.y,qInitial.z,qInitial.w, qFinal.x,qFinal.y,qFinal.z,qFinal.w,qInitial.x,qInitial.y,qInitial.z,qInitial.w];//设置三个关键帧的角度，
        const rotateKF = new THREE.QuaternionKeyframeTrack('Box.quaternion', times, rotateValues);

        //创建第三个动画效果，设置模型颜色
        const colorValues = [1, 0, 0, 0, 0, 1, 0, 1, 1];// times中三个不同时间点，分别设置三种不同的颜色
        const colorKF = new THREE.KeyframeTrack('Box.material.color', times, colorValues);// 0~3秒，颜色从[1,0,0]到[0,0,1]最后到[0,1,1]

        //将三个动画效果添加到AnimationClip中，名字，持续时间(与时间轴对应)，动画组
        const clip = new THREE.AnimationClip("test", 6, [posKF, rotateKF, colorKF]);

        //创建动画混合器
        mixer = new THREE.AnimationMixer(mesh);
        // 剪辑clip作为参数，通过混合器clipAction方法返回一个操作对象AnimationAction
        var AnimationAction = mixer.clipAction(clip);
        //通过操作Action设置播放方式
        AnimationAction.timeScale = 1;//默认1，可以调节播放速度
        // AnimationAction.loop = THREE.LoopOnce; //不循环播放
        AnimationAction.play();//开始播放

这里提供下完整代码，

<!DOCTYPE html>
<html>

<head includeDefault="true">
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <title>位置移动</title>
  <script src="./ThreeJs/js/three.js"></script>
  <script src="./ThreeJs/js/OrbitControls.js"></script>
</head>

<body>
  <div class="text"></div>
  <div id="container"></div>
  <script>
    var camera, scene, renderer, controls;
    var mixer;
    init();

      // 初始化场景
      function initScene() {
        scene = new THREE.Scene();
        scene.background = new THREE.Color( 0xf0f0f0 );
        scene.fog = new THREE.Fog(scene.background, 3000, 5000);
      }

      // 初始化相机
      function initCamera() {
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
        camera.position.set(150, 150, 150);
        camera.lookAt(new THREE.Vector3(0, 0, 0));
      }

      // 初始化灯光
      function initLight() {
        var directionalLight = new THREE.DirectionalLight(0xffffff, 0.3); //模拟远处类似太阳的光源
        directionalLight.color.setHSL(0.1, 1, 0.95);
        directionalLight.position.set(0, 200, 0).normalize();
        scene.add(directionalLight);

        var ambient = new THREE.AmbientLight(0xffffff, 1); //AmbientLight,影响整个场景的光源
        ambient.position.set(0, 0, 0);
        scene.add(ambient);
      }
      //创建模型以及实现动画效果
      function initCube(){
        clock = new THREE.Clock();
        cubeGeo = new THREE.BoxBufferGeometry( 50, 50, 50 );
        cubeMaterial = new THREE.MeshLambertMaterial( { color: 0xfeb74c, map: new THREE.TextureLoader().load( './ThreeJs/images/box.png' ) } );
        var mesh = new THREE.Mesh( cubeGeo, cubeMaterial );;
        scene.add( mesh );
        mesh.name = "Box";

        //创建时间轴，并配置第一个动画效果，改变模型位置
        const times = [0, 3, 6]; //时间轴上，设置三个时刻0、3、6秒
        const values = [0, 0, 0, 100, 0, 0, 0, 100, 100];// times中三个不同时间点，物体分别对应values中的三个xyz坐标
        const posKF = new THREE.KeyframeTrack('Box.position', times, values);// 0~3秒，物体从(0,0,0)逐渐移动到(100,0,0),3~6秒逐渐从(100,0,0)移动到(0,0,100)

        //创建第二个动画效果，改变模型角度
        const xAxis = new THREE.Vector3(1,0,0) //三维向量，沿x轴
        const qInitial = new THREE.Quaternion().setFromAxisAngle(xAxis,0)//起点角度
        const qFinal = new THREE.Quaternion().setFromAxisAngle(xAxis,Math.PI)//终点角度
        const rotateValues = [ qInitial.x,qInitial.y,qInitial.z,qInitial.w, qFinal.x,qFinal.y,qFinal.z,qFinal.w,qInitial.x,qInitial.y,qInitial.z,qInitial.w];//设置三个关键帧的角度，
        const rotateKF = new THREE.QuaternionKeyframeTrack('Box.quaternion', times, rotateValues);

        //创建第三个动画效果，设置模型颜色
        const colorValues = [1, 0, 0, 0, 0, 1, 0, 1, 1];// times中三个不同时间点，分别设置三种不同的颜色
        const colorKF = new THREE.KeyframeTrack('Box.material.color', times, colorValues);// 0~3秒，颜色从[1,0,0]到[0,0,1]最后到[0,1,1]

        //将三个动画效果添加到AnimationClip中，名字，持续时间(与时间轴对应)，动画组
        const clip = new THREE.AnimationClip("test", 6, [posKF, rotateKF, colorKF]);

        //创建动画混合器
        mixer = new THREE.AnimationMixer(mesh);
        // 剪辑clip作为参数，通过混合器clipAction方法返回一个操作对象AnimationAction
        var AnimationAction = mixer.clipAction(clip);
        //通过操作Action设置播放方式
        AnimationAction.timeScale = 1;//默认1，可以调节播放速度
        // AnimationAction.loop = THREE.LoopOnce; //不循环播放
        AnimationAction.play();//开始播放
      }

      // 初始化渲染器
      function initRenderer() {
        renderer = new THREE.WebGLRenderer({
          antialias: true
        });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor(0x4682B4, 1.0);
        document.body.appendChild(renderer.domElement);
      }

      // 初始化轨迹球控件
      function initControls() {
        controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        controls.dampingFactor = 0.5;
        // 视角最小距离
        controls.minDistance = 100;
        // 视角最远距离
        controls.maxDistance = 5000;
        // 最大角度
        controls.maxPolarAngle = Math.PI / 2.2;
      }

    //加载初始化
    function init() {
        initScene();
        initCamera();
        initLight();
        initCube();
        initRenderer();
        initControls();
        render();
    }

    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize( window.innerWidth, window.innerHeight );
    }

    function render() {
        renderer.render(scene, camera); //执行渲染操作
        mixer.update(0.0166666666);//这里给动画设置更新速度，因为默认是一秒钟渲染60次，所以这里设置为1/60的值，
        requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧    
     }
    // 更新控件
    function update() {
        controls.update();
    }

  </script>
</body>

</html>

需要注意的是，上面的js是引用的我本地的，如果大家使用的话需要替换成自己本地的或者在线的。

这里不能上传视频，我就用图片看下效果了：他是一个一边移动，一边旋转还一边改变颜色的动画效果，实际上就是覆盖了一个模型的一些基础属性。

ThreeJs制作关键帧动画_初始化_02