84 Three.js 使用AnimationMixer实现变形动画
前言
这几天一直在做一个小游戏案例。来巩固一下之前学到的东西。想看我制作出来的案例特效可以查看网址：http://www.wjceo.com/blog/demo/2018-04-09/144.html 下面开始这一节的内容。
简介
当我们使用外部软件（如 Blender）创建动画时，通常会有两种主要的动画定义方式：
变形动画和骨骼动画。这一节，我们先了解变形动画。
使用变形动画，你需要定义网格变形之后的状态，或者说是关键位置。对于变形目标，所有的顶点位置都会被存储下来。你所需要做的是将所有的顶点从一个位置移动到另一个定义好的关键位置，并重复该过程。
变形动画优点是能够得到更好的效果，因为它将每一个动作每一个顶点的位置都存储了下来，这样相应的缺点是会造成文件变大。
实现案例
案例查看地址：http://www.wjceo.com/blog/threejs/2018-04-13/145.html
- 首先，我们引入了一个JSON格式的模型，添加纹理，并导入到scene：
//加载模型
var loader = new THREE.JSONLoader();
loader.load("/lib/models/animated/horse.js", function (geometry) {
mesh = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({
vertexColors: THREE.FaceColors,
morphTargets: true
}));
mesh.scale.set(0.1, 0.1, 0.1);
scene.add(mesh);
});- 接着，我们开始处理动画，通过
mesh获取到AnimationMixer对象：
//AnimationMixer是场景中特定对象的动画播放器。当场景中的多个对象独立动画时，可以为每个对象使用一个AnimationMixer
mixer = new THREE.AnimationMixer(mesh);AnimationMixer对象是场景中特定对象的动画播放器。当场景中的多个对象独立动画时，可以为每个对象使用一个AnimationMixer。我们需要透过这个对象实现动画。
- 然后，我们通过
AnimationClip的静态方法CreateFromMorphTargetSequence获取到需要执行的动画片段：
//CreateFromMorphTargetSequence 通过geometry.morphTargets创建一个AnimationClip对象，其中包含每帧的内容和总帧数
var clip = THREE.AnimationClip.CreateFromMorphTargetSequence('run', geometry.morphTargets, 30);- 再用
AnimationMixer对象的clipAction方法生成可以控制执行动画的实例。
action = mixer.clipAction(clip);- 最后，先使用
setDuration设置好一个循环时间，然后调用play方法开始动画即可：
action.setDuration(1).play();案例代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style type="text/css">
html, body {
margin: 0;
height: 100%;
}
canvas {
display: block;
}
style>
head>
<body onload="draw();">
body>
<script src="/lib/three.js">script>
<script src="/lib/js/controls/OrbitControls.js">script>
<script src="/lib/js/libs/stats.min.js">script>
<script src="/lib/js/libs/dat.gui.min.js">script>
<script src="/lib/js/Detector.js">script>
<script>
var renderer, camera, scene, gui, light, stats, controls, mesh, mixer, action;
var clock = new THREE.Clock();
function initRender() {
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xeeeeee);
//告诉渲染器需要阴影效果
document.body.appendChild(renderer.domElement);
}
function initCamera() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 40, 50);
}
function initScene() {
scene = new THREE.Scene();
}
//初始化dat.GUI简化试验流程
function initGui() {
//声明一个保存需求修改的相关数据的对象
gui = {
animation: true
};
var datGui = new dat.GUI();
//将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）
datGui.add(gui, "animation").onChange(function (e) {
if (e) {
action.play();
}
else {
action.stop();
}
});
}
function initLight() {
scene.add(new THREE.AmbientLight(0x444444));
light = new THREE.PointLight(0xffffff);
light.position.set(0, 50, 0);
//告诉平行光需要开启阴影投射
light.castShadow = true;
scene.add(light);
}
function initModel() {
//辅助工具
var helper = new THREE.AxesHelper(50);
scene.add(helper);
//加载模型
var loader = new THREE.JSONLoader();
loader.load("/lib/models/animated/horse.js", function (geometry) {
console.log(geometry);
mesh = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({
vertexColors: THREE.FaceColors,
morphTargets: true
}));
mesh.scale.set(0.1, 0.1, 0.1);
scene.add(mesh);
//AnimationMixer是场景中特定对象的动画播放器。当场景中的多个对象独立动画时，可以为每个对象使用一个AnimationMixer
mixer = new THREE.AnimationMixer(mesh);
//CreateFromMorphTargetSequence 通过geometry.morphTargets创建一个AnimationClip对象，其中包含每帧的内容和总帧数
var clip = THREE.AnimationClip.CreateFromMorphTargetSequence('run', geometry.morphTargets, 30);
//mixer.clipAction 返回一个可以控制动画的AnimationAction对象 参数需要一个AnimationClip 对象
//AnimationAction.setDuration 设置一个循环所需要的时间，当前设置了一秒
//告诉AnimationAction启动该动作
action = mixer.clipAction(clip);
action.setDuration(1).play();
});
}
//初始化性能插件
function initStats() {
stats = new Stats();
document.body.appendChild(stats.dom);
}
function initControls() {
controls = new THREE.OrbitControls(camera, renderer.domElement);
// 如果使用animate方法时，将此函数删除
//controls.addEventListener( 'change', render );
// 使动画循环使用时阻尼或自转 意思是否有惯性
controls.enableDamping = true;
//动态阻尼系数 就是鼠标拖拽旋转灵敏度
//controls.dampingFactor = 0.25;
//是否可以缩放
controls.enableZoom = true;
//是否自动旋转
controls.autoRotate = true;
controls.autoRotateSpeed = 0.5;
//设置相机距离原点的最远距离
controls.minDistance = 1;
//设置相机距离原点的最远距离
controls.maxDistance = 2000;
//是否开启右键拖拽
controls.enablePan = true;
}
function render() {
var time = clock.getDelta();
if (mixer) {
mixer.update(time);
}
controls.update();
}
//窗口变动触发的函数
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
render();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
//更新控制器
render();
//更新性能插件
stats.update();
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
function draw() {
//兼容性判断
if (!Detector.webgl) Detector.addGetWebGLMessage();
initGui();
initRender();
initScene();
initCamera();
initLight();
initModel();
initControls();
initStats();
animate();
window.onresize = onWindowResize;
}
script>
html>