1.demo效果
2.变形动画介绍变形动画就像老实的胶片电影，每一个动作有若干个分步帧，把这些帧串联起来，不断切换就实现动画效果，这里给每个分步起了一个名字叫关键帧或者变形目标，使用这种方法制作动画的好处是，可认为所有顶点指定每个关键位置，但同时会带来不足，对于大型网格制作的动画，模型文件会非常大，因为每个关键帧上所有的顶点都要保存下来
3.实现要点3.1加载模型文件这里需要说明一下，最新的.js没有加载器，这个demo需要用到，于是在目录下的.html文件中引入旧版.js
type="text/"src="./libs/.js"/
在当前vue文件中注释掉引入本地依赖的代码
然后就可以痛快的使用了
=.env.=new.().load(`${}/.js`,(,mat)={})3.2创建变形动画网格创建变形动画网格，这里需要注意几点
保证使用的材质中的属性为true，否则网格不会动创建对象前，一定要调用几何体的()方法，用来计算变形目标的法向量计算变形目标的颜色，使用辅助函数mat1=new.({:true,:.})THIS.().().().()THIS.=new.(,mat1)THIS..=1000THIS...x=200THIS...z=0this..add(THIS.)(){if(...){=.[0]for(leti=0;i..;i++){.[i].=.[i].[i]..(0.1,0.1,0)}}}3.3中更新动画(){this.(this...)if(this.){=this..()this..(*1000)this...y+=0.01}this..(this.,this.)(this.)}4.demo代码divdivid=""/div="-box"el-rowdivv-for="(item,key)in":key="key"divv-if=".name!="el-col:span="8"span="-span"{{item.name}}/span/el-colel-col:span="13"el-v-="item.":min="item.min":max="item.max":step="item.step":-=""//el-colel-col:span="3"span="-span"{{item.}}/span/el-col/div/div/el-row//div/div/{data(){{:{:{name:'',:0,min:0,max:15,step:1}},:new.(),:,:[],:,:,:,:}},(){this.init()},:{(val){val},init(){this.()this.()this.()this.()this.()this.()},(){this.=new.()},(){THIS=this=.env.=new.().load(`${}/.js`,(,mat)={mat1=new.({:true,:.})THIS.().().().()THIS.=new.(,mat1)THIS..=1000THIS...x=200THIS...z=0this..add(THIS.)mat2=new.({:,:.})mesh=new.Mesh(,mat1)mesh..x=-100THIS..push(mesh)THIS.=...(e={geom=new.()geom.=e..=.=new.Mesh(geom,mat2)THIS..push()..x=-100})this.(0)},`${}`)},(e){this..(this.)this..add(this.[e])this.=this.[e]},(){if(...){=.[0]for(leti=0;i..;i++){.[i].=.[i].[i]..(0.1,0.1,0)}}},(){=new.()this..add()=new.()..set(300,200,300).=1.5this..add()},(){=.('')=.=.k=/this.=new.(45,k,0.1,1000)this...set(450,450,450)this..(new.(100,50,0))this..add(this.)},(){=.('')this.=new.({:true,:true})this..(.,.)this..(,1).(this..)},(){this.(this...)if(this.){=this..()this..(*1000)this...y+=0.01}this..(this.,this.)(this.)}}}/#{:;:100%;:100%;}.-box{:;:5px;top:5px;:300px;:10px;-:#fff;:1px#;}.-span{line-:38px;:02px010px;}/