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 (let i = 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代码
divdiv id="" /div ="-box"el-rowdiv v-for="(item,key) in " :key="key"div v-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 .(),: null,: [],: null,: null,: null,: null}},() {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 (let i = 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;: 0 2px 0 10px;}/