Threejs在室内地图中的应用

Posted 2021-04-21 giscoder

“ 近期公司需要做一个轻量级的三维地图，运用在室内地图渲染方面。通过一段时间的摸索，目前已基本完成。”

Threejs简介

GitHub上是这样介绍的：

“ javascript 3D library

The aim of the project is to create an easyto use, lightweight, 3D library with a default WebGL renderer. The library alsoprovides Canvas 2D, SVG and CSS3D renderers in the examples.

”

也就是说，threejs是一个JavaScript3D库，该项目的目的是创建一个易于使用的、轻量级的、带有默认WebGL渲染器的3D库，并且在示例中提供了Canvas 2D, SVG and CSS3D等渲染器。

官方示例：https://threejs.org/examples/

Threejs包含三大组件，这三大组件分别是相机（Camera）、渲染器（Renderer）和场景（Scene），这三个组件是创建3D图形的必备组件。其中：

• 场景用来容纳图形元素。

  场景相当于宇宙，而图形元素就是星星，图形元素只有添加到场景中，其坐标、大小等才有意义。

• 相机的作用是定义可视域，即确定哪些图形元素是可见的。

• 渲染器则负责用如何渲染出图像，是使用WegGL还是Canvas。

室内地图介绍

室内地图，是使用户通过移动设备在建筑物内仍能利用精确的定位功能找到要去的店铺、卫生间、电梯、休息区、出入口等，打通“人、位置、商家”间的关系。室内地图除了可以将场地的平面图在移动设备上展现出来，还能帮助用户随时了解各种资讯，对商品进行分类搜索，大大方便了用户对未知目的地的了解，并最快找到所需信息。 

Threejs在室内地图中的使用

GeoJSON数据

通过导入GeoJSON数据，根据高度，直接生成3D模型。

手工建模数据

热力图数据

室内地图应用

目前该项目已在以下中得到了应用

• 智慧园区

• 智慧监狱

• BI数据分析

• 商场导航