Three.js开发实现3D地图的实践过程总结-创新互联

前言

创新互联建站：自2013年起为各行业开拓出企业自己的“网站建设”服务，为成百上千家公司企业提供了专业的成都做网站、网站建设、网页设计和网站推广服务， 按需求定制设计由设计师亲自精心设计，设计的效果完全按照客户的要求，并适当的提出合理的建议，拥有的视觉效果，策划师分析客户的同行竞争对手，根据客户的实际情况给出合理的网站构架，制作客户同行业具有领先地位的。

本文主要介绍Three.js的开发基础和基本原理，以及如何实现3D全景图。想在web端实现3D全景图的效果，除了全景图片、WebGL外，还需要处理很多细节。据我所知，目前国外3D全景图比较好的是KrPano，国内很多3D全景服务是在使用krpano的工具。

前段时间连续上了一个月班，加班加点完成了一个3D攻坚项目。也算是由传统web转型到webgl图形学开发中，坑不少，做了一下总结分享。

Three.js

基于简化WebGL开发复杂度和降低入门难度的目的，mrdoob)在WebGL标准基础上封装了一个轻量级的JS 3D库—— Three.js。

在我看来，Three.js具有以下特点：

• 完备 具备3D开发所需完整功能，基本上使用WebGL能实现的效果，用Three.js都能更简单地实现
• 易用 架构设计比较清晰和合理，易于理解，扩展性较好，且开发效率高于WebGL
• 开源 项目开源，且有一批活跃的贡献者， 持续维护升级中

Three.js使WebGL更加好用，可以实现很棒的3D效果，比如：

• 游戏 hellorun
• 数据可视化 armsglobe

1、法向量问题

法线是垂直于我们想要照亮的物体表面的向量。法线代表表面的方向因此他们为光源和物体的交互建模中具有决定性作用。每一个顶点都有一个关联的法向量。

　　

如果一个顶点被多个三角形共享，共享顶点的法向量等于共享顶点在不同的三角形中的法向量的和。N=N1+N2；

　　

所以如果不做任何处理，直接将3维物体的点传递给BufferGeometry，那么由于法向量被合成，经过片元着色器插值后，就会得到这个黑不溜秋的效果

　　　　

我的处理方式使顶点的法向量保持唯一，那么就需要在共享顶点处，拷贝一份顶点，并重新计算索引，是的每个被多个面共享的顶点都有多份，每一份有一个单独的法向量，这样就可以使得每个面都有一个相同的颜色　　

2、光源与面块颜色　　

开发过程中设计给了一套配色，然而一旦有光源，面块的最终颜色就会与光源混合，颜色自然与最终设计的颜色大相径庭。下面是Lambert光照模型的混合算法。

　　

而且产品的要求是顶面保持设计的颜色，侧面需要加入光源变化效果，当对地图做操作时，侧面颜色需要根据视角发生变化。那么我的处理方式是将顶面与侧面分别绘制（创建两个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"]
 });

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

标题名称：Three.js开发实现3D地图的实践过程总结-创新互联
文章路径：http://cqcxhl.com/article/ijspd.html