AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

ThreeJS创建关键帧动画

2024-10-11 90
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 这篇文章讲解了如何在Three.js中利用关键帧轨道 (`KeyframeTrack`) 创建动画效果，并提供了详细的步骤和代码示例。

之前有说过两种创建动画的形式，一个是很粗的方式，直接在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

文章标签：
存储
JavaScript
baker_zhuang
目录
相关文章
南木元元
|
前端开发 JavaScript 定位技术
threejs绘制风羽
threejs绘制风羽
南木元元
272 0
baker_zhuang
|
2月前
Threejs实现动画
这篇文章讲解了如何使用Three.js实现动画效果，并介绍了如何控制动画的时间轴。
baker_zhuang
72 3
Threejs实现动画
baker_zhuang
|
2月前
ThreeJs创建球体
这篇文章讲解了如何在Three.js中创建并添加一个球体到场景中，包括定义球体的几何形状、赋予材质以及最终渲染球体的过程。
baker_zhuang
58 1
baker_zhuang
|
2月前
|
监控
ThreeJs限制模型拖动的范围
这篇文章讲解了在Three.js中如何限制模型拖动的范围，确保模型在特定边界内移动，提供了实现拖动限制的代码示例和技术细节。
baker_zhuang
75 1
ThreeJs限制模型拖动的范围
baker_zhuang
|
2月前
ThreeJs场景中添加视频
这篇文章详细说明了如何在Three.js场景中添加并播放视频，包括视频纹理的创建与应用，以及如何将视频流显示在3D模型的表面上。
baker_zhuang
49 2
ThreeJs场景中添加视频
baker_zhuang
|
2月前
ThreeJs使用tweenjs动画库制作动画
这篇文章介绍了如何在Three.js中使用Tween.js动画库来简化动画制作流程，并演示了如何通过简单的代码实现动画效果。
baker_zhuang
109 1
ThreeJs使用tweenjs动画库制作动画
baker_zhuang
|
2月前
ThreeJs创建圆环
这篇文章介绍了如何在Three.js中创建一个圆环（torus），包括设置圆环的几何形状、材质以及将其添加到场景中的具体步骤。
baker_zhuang
63 0
ThreeJs创建圆环
baker_zhuang
|
2月前
Threejs使用CubeCamera实现环境映射
这篇文章详细介绍了如何在Three.js中使用CubeCamera来实现环境映射，包括创建CubeCamera、设置反射材质以及实时更新渲染结果的具体步骤。
baker_zhuang
77 3
baker_zhuang
|
2月前
|
JavaScript API 图形学
ThreeJS入门-创建一个正方体
这篇文章介绍了如何使用Three.js创建一个基本的正方体模型，并提供了实现这一功能的详细步骤和代码示例。
baker_zhuang
50 0
ThreeJS入门-创建一个正方体
baker_zhuang
|
2月前
|
JavaScript
ThreeJs实现简单的动画
这篇文章介绍了如何使用Three.js实现简单的动画效果，并提供了利用requestAnimationFrame动态改变模型状态的代码示例。
baker_zhuang
64 0
ThreeJs实现简单的动画