ThreeJS学习（一）-----模型生长

  刚接触threejs的时候有个任务是写出模型增长的效果，当时经验不足，没有想到合适的方法，只能在模型上方增加一个个小模型堆积而成。这种方法很不科学，不仅视觉效果不好，而且消耗性能。
  昨晚从一次公开课有了灵感，可以通过改变物体的scale来实现物体一个或多个方向的增长。

1.两端增长

  以改变长方体的x方向为例，代码如下，可以实现模型两边增长。

         var geometry = new THREE.BoxGeometry(1, 1, 1);
            var material = new THREE.MeshBasicMaterial({ color: 0xff0000, side: THREE.DoubleSide, transparent: true, opacity: 1.0 });
            var mesh = new THREE.Mesh(geometry, material);
            mesh.position.set(10, 4, 60);
            scene.add(mesh);
            console.log(mesh)
            setInterval(() => {
                mesh.scale.x+=0.1
            }, 30);

2.单方向增长

  控制物体的scale变化实际上是在底层控制vertices的变化，scale是对有关面的vertice同时控制。因此可以直接改变单侧面的vertices来实现模型单向生长的视觉效果，代码如下。

            var geometry = new THREE.BoxGeometry(1, 1, 1);
            var material = new THREE.MeshBasicMaterial({ color: 0xff0000, side: THREE.DoubleSide, transparent: true, opacity: 1.0 });
            var mesh = new THREE.Mesh(geometry, material);
            mesh.position.set(10, 4, 60);
            scene.add(mesh);
            console.log(mesh)
            setInterval(() => {
                if (mesh.geometry.vertices[0].x < 100) {
                    for (var i = 0; i < 4; i++) {
                        mesh.geometry.vertices[i].x += 0.3;
                        mesh.geometry.verticesNeedUpdate = true;  //控制物体单向增长
                    }
                }
            }, 30);

  记得更新相关的矩阵，在threejs中改变顶点位置需要将verticesNeedUpdate的值改为true,需要在每一次改变时赋值。其官方说明如下图：

ivertices变化.png

3.小结

  从上面的例子可以知道，很多时候要改变思维模式，多去挖掘变化的底层是怎样实现的，这样有助于解决问题，不应该只会改变物体的position、rotation。加油^ - ^.........