ThreeJS——关键帧编辑及解析播放
在三维场景中最不可少的就是三维动画，ThreeJS提供了关键帧KeyframeTrack、剪辑AnimationClip、操作AnimationAction、混合器AnimationMixer帧动画API。
首先创建两个用于关键帧动画的网格模型。
/** 创建场景对象Scene* */let scene = new THREE.Scene();let group = new THREE.Group()// 立方体网格模型let Box = new THREE.BoxGeometry(100, 20, 20);let material1 = new THREE.MeshLambertMaterial({color: 0x0000ff}); // 材质对象Materiallet mesh1 = new THREE.Mesh(Box, material1); // 网格模型对象Meshmesh1.name = 'Box';group.add(mesh1); // 网格模型添加到场景中// 球体网格模型let Sphere = new THREE.SphereGeometry(60, 40, 40);let material2 = new THREE.MeshLambertMaterial({color: 0xff00ff});let mesh2 = new THREE.Mesh(Sphere, material2); // 网格模型对象Meshmesh2.name = 'Sphere';// mesh2.translateY(120); // 球体网格模型沿Y轴正方向平移120group.add(mesh2);scene.add(group);
其次编辑关键帧，编辑关键帧主要是通过KeyframeTrack和AnimationClip两个API来实现。
// 创建名为Box对象的关键帧数据let times = [0, 10]; // 关键帧时间数组，离散的时间点序列let values = [0, 0, 0, 250, 0, 0]; // 与时间点对应的值组成的数组// 创建位置关键帧对象：0时刻对应位置0, 0, 0 10时刻对应位置150, 0, 0let posTrack = new THREE.KeyframeTrack('Box.position', times, values);// 创建颜色关键帧对象：10时刻对应颜色1, 0, 0 20时刻对应颜色0, 0, 1let colorKF = new THREE.KeyframeTrack('Box.material.color', [10, 20], [1, 0, 0, 0, 0, 1]);// 创建名为Sphere对象的关键帧数据 从0~20时间段，尺寸scale缩放3倍let scaleTrack = new THREE.KeyframeTrack('Sphere.scale', [0, 20], [1, 1, 1, 3, 3, 3]);// duration决定了默认的播放时间，一般取所有帧动画的最大时间// duration偏小，帧动画数据无法播放完，偏大，播放完帧动画会继续空播放let duration = 20;// 多个帧动画作为元素创建一个剪辑clip对象，命名"default"，持续时间20let clip = new THREE.AnimationClip("default", duration, [posTrack, colorKF, scaleTrack]);
播放关键帧，通过AnimationAction和AnimationMixer两个API来实现对已有的帧动画数据进行播放。
// group作为混合器的参数，可以播放group中所有子对象的帧动画let mixer = new THREE.AnimationMixer(group);// 剪辑clip作为参数，通过混合器clipAction方法返回一个操作对象AnimationActionlet AnimationAction = mixer.clipAction(clip);//通过操作Action设置播放方式AnimationAction.timeScale = 20;//默认1，可以调节播放速度// AnimationAction.loop = THREE.LoopOnce; //不循环播放AnimationAction.play();//开始播放
在播放关键帧的时候，在渲染函数中执行mixer.update（渲染间隔时间）告诉ThreeJs两次渲染的时间间隔。
// 创建一个时钟对象Clocklet clock = new THREE.Clock();function renderModle() {requestAnimationFrame(renderModle)renderer.render(scene, camera)// clock.getDelta()方法获得两帧的时间间隔// 更新混合器相关的时间mixer.update(clock.getDelta());}renderModle ()
完整代码
<html lang="en"><head><meta charset="UTF-8"><title></title><style>body{margin: 0;overflow: hidden;}</style></head><body><script src="./../../js/three.js"></script><script>/** 创建场景对象Scene* */let scene = new THREE.Scene();let group = new THREE.Group()// 立方体网格模型let Box = new THREE.BoxGeometry(100, 20, 20);let material1 = new THREE.MeshLambertMaterial({color: 0x0000ff}); // 材质对象Materiallet mesh1 = new THREE.Mesh(Box, material1); // 网格模型对象Meshmesh1.name = 'Box';group.add(mesh1); // 网格模型添加到场景中// 球体网格模型let Sphere = new THREE.SphereGeometry(60, 40, 40);let material2 = new THREE.MeshLambertMaterial({color: 0xff00ff});let mesh2 = new THREE.Mesh(Sphere, material2); // 网格模型对象Meshmesh2.name = 'Sphere';// mesh2.translateY(120); // 球体网格模型沿Y轴正方向平移120group.add(mesh2);scene.add(group);/*** 编辑group子对象网格模型mesh1和mesh2的帧动画数据*/// 创建名为Box对象的关键帧数据let times = [0, 10]; // 关键帧时间数组，离散的时间点序列let values = [0, 0, 0, 250, 0, 0]; // 与时间点对应的值组成的数组// 创建位置关键帧对象：0时刻对应位置0, 0, 0 10时刻对应位置150, 0, 0let posTrack = new THREE.KeyframeTrack('Box.position', times, values);// 创建颜色关键帧对象：10时刻对应颜色1, 0, 0 20时刻对应颜色0, 0, 1let colorKF = new THREE.KeyframeTrack('Box.material.color', [10, 20], [1, 0, 0, 0, 0, 1]);// 创建名为Sphere对象的关键帧数据 从0~20时间段，尺寸scale缩放3倍let scaleTrack = new THREE.KeyframeTrack('Sphere.scale', [0, 20], [1, 1, 1, 3, 3, 3]);// duration决定了默认的播放时间，一般取所有帧动画的最大时间// duration偏小，帧动画数据无法播放完，偏大，播放完帧动画会继续空播放let duration = 20;// 多个帧动画作为元素创建一个剪辑clip对象，命名"default"，持续时间20let clip = new THREE.AnimationClip("default", duration, [posTrack, colorKF, scaleTrack]);/*** 播放编辑好的关键帧数据*/// group作为混合器的参数，可以播放group中所有子对象的帧动画let mixer = new THREE.AnimationMixer(group);// 剪辑clip作为参数，通过混合器clipAction方法返回一个操作对象AnimationActionlet AnimationAction = mixer.clipAction(clip);//通过操作Action设置播放方式AnimationAction.timeScale = 20;//默认1，可以调节播放速度// AnimationAction.loop = THREE.LoopOnce; //不循环播放AnimationAction.play();//开始播放/*** 光源设置*///点光源let point = new THREE.PointLight(0xffffff);point.position.set(400, 200, 200);scene.add(point);//环境光let ambient = new THREE.AmbientLight(0x444444);scene.add(ambient);/*** 相机设置*/let width = window.innerWidth; //窗口宽度let height = window.innerHeight;let k = width / height; //窗口宽高比let s = 200;// 创建相机对象let camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);camera.position.set(200, 300, 200); //设置相机位置camera.lookAt(scene.position); //设置相机方向(指向的场景对象)/*** 创建渲染器对象*/let renderer = new THREE.WebGLRenderer();renderer.setSize(width, height);//设置渲染区域尺寸renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色document.body.appendChild(renderer.domElement); // body元素中插入canvas对象//执行渲染操作 指定场景、相机作为参数// 创建一个时钟对象Clocklet clock = new THREE.Clock();function renderModle() {requestAnimationFrame(renderModle)renderer.render(scene, camera)// clock.getDelta()方法获得两帧的时间间隔// 更新混合器相关的时间mixer.update(clock.getDelta());}renderModle ()</script></body></html>
效果图