js室内地图开发_用 Three.js 作画笔，他用一周的时间开发了 3D H5 交互新闻地图

本文链接：https://blog.csdn.net/weixin_34276402/article/details/112383136

开发者Whales利用Three.js和Mapbox开发了一个3D H5新闻地图，展示了粤港澳大湾区未来领军企业的数据。该项目融合了语音合成、Web 3D和地图技术，克服了坐标转换和性能优化的难点。Whales将在12月23日进行线上技术直播，分享在Mapbox中添加复杂3D场景的经验。

摘要由CSDN通过智能技术生成

Three.js + H5 Story Map | Developer Story
上周末，开发者黄俐分享过 Mapbox GL JS 可视化的内容后，有很多朋友在询问：动态的地图 3D 数据可视化，比如结合 Three.js，应该如何来做，有什么案例可以分享呢？
那就一定不要错过这篇开发者故事。
故事的主角 Whales 来自广州，最近计录科技（Whales 所在的公司）和广东经视南方财经报道发布了一个由“机器评选”的榜单，他利用工作的碎片时间，和团队的算法工程师 Eva，为榜单特别开发了一个 3D H5 新闻地图——交互榜单，作为一种新科技形式榜单，展现了粤港澳大湾区未来领军企业 500 强的各项数据。

您可以点击【阅读原文】访问这个 H5。Whales 将会在 2019 年 12 月 23 日晚上 7:30 为大家带来线上技术直播，倾囊相授自己在 Mapbox 中加入复杂的 3D 场景的方法！详情见文末！关于团队
整个开发团队是由两个人构成 —— Eva 和 Whales ，分别负责数据制作和前端开发，我们联系到的 Whales，主要负责的就是前端开发。

左：Eva 右：Whales
由于 Whales 本职还有其他产品的任务，H5 是利用主线任务之余的时间做的，总共加起来一周左右，各种技术的融合相对有一些挑战，加上测试调优，大概两周的时间。关于项目
到年底了，各大媒体都会出一些年度榜单，你看到的大部分榜单可能就是一张设计精美的图片，但是 Whales 和 Eva 想要尝试一些不一样的。
简单来说，这是一个基于地图的数据可视化项目，融合了语音合成、Web 3D和地图技术，全面地展现了「粤港澳大湾区未来领军企业 500 强」榜单。
它给人的第一印象是非常直观，不仅仅是因为 H5 本身具备的动态效果，与地图的结合，让读者瞬间可以 Get 到地图视角所传达的榜单专业价值 —— 这是一个富有信息量的地域性排行榜。
Whales：“为什么要在 H5 中结合地图？因为榜单既有地域属性，也有很浓厚的科技属性，我们想要用有趣、时尚的技术来突出表现它。”
H5 不结合地图，就会没有空间感、没有实感，没有探索感。
其实，这个项目不仅仅是 H5 和地图的结合，它涉及到了多种可视化编程新技术的融合：Javascript，语音合成，Web 3D，Mapbox，Three.js...
Whales：“我们希望用这样的方式，给观众一种科技感和时尚感的融合，从多个感觉角度体会到大湾区的企业风貌。”
这个项目甚至让人感觉到，地图本身是苍白的，没有数据没有交互没有声音的话，完全无法传达地图所承载的情感。技术难点
地图作为最重要的构成，当时 Whales 也是经过了反复的调研和探索，最后选择了 Mapbox。他认为开源的 Mapbox 有着丰富自由度，并且经过多年的发展，是一款逻辑完备的工具，更重要的是，它与其他技术的结合比别的地图更自然和顺畅。
比如项目的技术难点，就是地图上 3D 图表的呈现。
Whales 采用的方案是使用 Three.js，根据官方的案例，可以很方便地将模型嵌入进去。可是这看似简单的思路，在实际开发的过程中，需要考虑一些问题：

官方模型只提供嵌入的方法，但是自己的模型和坐标系问题会带来一系列的数学计算。
有很多动画需要遍历所有元素，会产生很多队列，需要实时处理那些“爆仓“的内存。

“Three.js 虽然很好用，但是需要自己解决性能优化的问题。”
对于这两个难点，Whales 通过参考开源的工具并结合自己的算法修改进行了大量的优化。他也慷慨地分享了自己所参考的开源工具 Threebox：https://github.com/peterqliu/threebox

Threebox 是 Mapbox GL JS 中的一款 Three.js 插件，可以十分方便地实现在嵌入 3D 模型的过程中出现的坐标和相机同步问题等。帮助 Whales 解决了这个项目中模型的直角坐标系和 Mapbox 经纬度坐标融合的问题。
但其实使用 Threebox 之后，还需要考虑较多的内存处理问题。开发时候的趣事
选声优是一个很头疼的事情，同事一直在犹豫用更像人类的声音，还是用更像机器的声音，虽然多数同事选择了人类。
但作为开发者的小小特权，身为科幻爱好者的 Whales 还是选择了更加笨拙的机器，理由是现在选用的声音有《攻壳机动队》里面塔奇克马的感觉。

一些地图的未来畅想
未来，我们希望看到出现更多，类似这样的地图新闻。美国的华盛顿邮报、纽约时报等已经将地图新闻可视化用到了每日的报道中，中国的数据新闻现在也在崛起，将来可能会有更多优秀的作品出现。
Whales 还畅想了地图在 VR 应用中的使用，会让虚拟更接近现实。⏲️直播预告
Whales 将会在 2019 年 12 月 23 日晚上 7:30 为大家带来线上技术直播，倾囊相授自己在 Mapbox 中加入复杂的 3D 场景的方法！
纯技术流，适合每位想要进阶 Mapbox 开发的朋友！
席位有限哦！立即抢线上直播席位
br/>https://live.vhall.com/549347162
想要到广州直播现场一起交流的朋友，请联系 Max（微信号：Mapbox_max）报名噢！