maptalk.three实例化尝试

    最近公司项目开始做三维的项目，出于易用性考虑选用了maptalks和maptalks.three。

    maptalks是一款国内开发者开发的开源webgis框架，maptalks.three是一个基于maptalks的三维插件，通过这个库魄爷我可以比较方便的使用three的方式来绘制想要的三维效果。开发过程中遇到不少问题，比较麻烦得是大量mesh绘制导致速度变慢和内存暴增，通常的解决问题做法就是使用实例化和合并几何图形的方式。

    本文主要介绍实例化的内容,实例化是个什么东西呢？实例化是一种只调用一次渲染函数却能绘制出很多物体的技术，它节省渲染一个物体时从CPU到GPU的通信时间。实例数组是这样的一个对象，使用它，可以把原来的的uniform变量转换成attribute变量，而且这个attribute变量对应的缓冲区可以被多个对象使用；这样在绘制的时候，可以减少webgl的调用次数。

let mesh = new THREE.InstancedMesh(geometry, material, length);
let transform = new THREE.Object3D();
const position = threeLayer.coordinateToVector3(center, 0);
let xoffset = position.x - defaultXY.x;
let yoffset = position.y - defaultXY.y;
transform.position.set(xoffset, yoffset, 0);
transform.scale.set(xscale,yscale,zscale);
transform.updateMatrix();
mesh.setMatrixAt(i, transform.matrix);
mesh.position.set(x,y,z)

    值得注意的是要事先准备一个几何体作为模板对象,，然后设置矩阵中相对于模板几何体的偏移量，最后设置一次绘制数据量，本文中使用的是几何中心转三维坐标后计算xyz偏移量以及缩放xyz比例，全部计算完毕后InstancedMesh这个要设置好位置xyz。
使用实例化过后，显著降低了内存，绘制八千个几何体仅需要10MB内存

参考资料：

https://threejs.org/examples/physics_cannon_instancing.html

https://cloud.tencent.com/developer/article/1438356