Three.js - 通过 morphTargetInfluence属性创建动画

morphTargetInfluences是Mesh对象的属性，其作用是从0-1开始的一组权重，指定了应用的变体数量，默认为undefined。
也就是说影响的范围是0-1，如果一个状态为1而另一个状态为0，则此时物体的形体状态是影响值为1的那个形态。

1、示例

https://ithanmang.gitee.io/threejs/home/201809/20180904/03-morphTargetInfluenc-eanimation.html
可以通过改变影响值得权重，来改变立方体的形态。

2、步骤

2.1、创建几何体和材质

let cubeGeometry = new THREE.BoxGeometry(10, 10, 10);
let cubeMaterial = new THREE.MeshNormalMaterial({
   morphTargets:true});

注意：材质的morphTargets属性，需要设置为true

2.2、创建两个目标顶点

 // 目标顶点
let cubeTarget1 = new THREE.BoxGeometry(5, 20, 2);
let cubeTarget2 = new THREE.BoxGeometry(8, 2, 0);

2.3、将目标顶点加入 几何体的变形目标数组

cubeGeometry.morphTargets[0] = {
   name: 't1', vertices: cubeTarget1.vertices};
cubeGeometry.morphTargets[1] = {
   name: 't2', vertices: cubeTarget2.vertices};
cubeGeometry.computeMorphNormals();

每个变形目标都是一个对象，加入完成后需要重新计算变形的法线cubeGeometry.computeMorphNormals();

2.4、将携带变形目标数组的对象加入到场景

此时的 cubeGeometry对象

然后创建网格并加入场景

cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
scene.add(cube);

2.5、通过gui进行调试

当然也可以使用补间动画来过渡

guiControls = new function () {
   
    this.influence1 = 0.01;
    this.influence2 = 0.01;
    this.update = function () {
   
        cube.morphTargetInfluences[0] = guiControls.influence1;
        cube.morphTargetInfluences[1] = guiControls.influence2;
    }
};

let gui = new dat.GUI();
gui.add(guiControls, 'influence1', 0, 1).onChange<