而且产品的要求是顶面保持设计的颜色，侧面需要加入光源变化效果，当对地图做操作时，侧面颜色需要根据视角发生变化。那么我的处理方式是将顶面与侧面分别绘制（创建两个Mesh），顶面使用MeshLambertMaterial的emssive属性设置自发光颜色与设计颜色保持一致，也就不会有光照效果，侧面综合使用Emssive与color来应用光源效果。
var material1 = new __WEBPACK_IMPORTED_MODULE_0_three__["MeshLambertMaterial"]({
emissive: new __WEBPACK_IMPORTED_MODULE_0_three__["Color"](style.fillStyle[0], style.fillStyle[1], style.fillStyle[2]),
side: __WEBPACK_IMPORTED_MODULE_0_three__["DoubleSide"],
shading: __WEBPACK_IMPORTED_MODULE_0_three__["FlatShading"],
vertexColors: __WEBPACK_IMPORTED_MODULE_0_three__["VertexColors"]
});
var material2 = new __WEBPACK_IMPORTED_MODULE_0_three__["MeshLambertMaterial"]({
color: new __WEBPACK_IMPORTED_MODULE_0_three__["Color"](style.fillStyle[0] * 0.1, style.fillStyle[1] * 0.1, style.fillStyle[2] * 0.1),
emissive: new __WEBPACK_IMPORTED_MODULE_0_three__["Color"](style.fillStyle[0] * 0.9, style.fillStyle[1] * 0.9, style.fillStyle[2] * 0.9),
side: __WEBPACK_IMPORTED_MODULE_0_three__["DoubleSide"],
shading: __WEBPACK_IMPORTED_MODULE_0_three__["FlatShading"],
vertexColors: __WEBPACK_IMPORTED_MODULE_0_three__["VertexColors"]
});
3、POI标注
Three中创建始终朝向相机的POI可以使用Sprite类，同时可以将文字和图片绘制在canvas上，将canvas作为纹理贴图放到Sprite上。但这里的一个问题是canvas图像将会失真，原因是没有合理的设置sprite的scale，导致图片被拉伸或缩放失真。
问题的解决思路是要保证在3d世界中的缩放尺寸，经过一系列变换投影到相机屏幕后仍然与canvas在屏幕上的大小保持一致。这需要我们计算出屏幕像素与3d世界中的长度单位的比值，然后将sprite缩放到合适的3d长度。
4、点击拾取问题
webgl中3D物体绘制到屏幕将经过以下几个阶段
