刚接触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。加油^ - ^.........
