本发明属于数字化3d建模及渲染，具体地说是涉及一种基于three.js的地下停车场三维地图建模及渲染系统。
背景技术：
1、随着全球汽车保有量的激增，“停车难”、“找车难”等制约各大城市方便快捷交通的核心难题日渐突出。作为缓解交通堵塞的关键环节，地下停车场内的人行、车行导航、反向寻车等刚性需求亟待解决。而地下停车场导航地图的快速构建技术则是地下停车场人行、车行等导航的基石，对地下停车场导航的效率具有决定性意义。同时，支持自定义渲染风格的停车场地图是提高用户交互及体验感的关键。此外，建图系统跨平台快速部署是实现停车场导航快速适配、广泛应用的一大难题。虽然百度、高德、腾讯等图商在道路及街道级地图建模方面已趋于成熟，但在地下停车场场景目前缺乏有效解决方案。地下停车场的立体、三维、易混淆等场景特性，决定了传统二维平面地图以无法满足高效、实时的导航需求。而地下停车场的三维地图则可以通过逼真的三维建模及渲染，能够更直观地展示地下停车场的布局和结构，使得用户在进入地下停车场前便能对其内部结构有一个全面的了解。通过点云、cad等不同方式获得的地下停车场的osm格式数据作为输入，然后利用三维建模及渲染技术将这些数据转化为可视化的三维模型。与传统的二维平面地图相比，三维地图不仅能显示地下停车场的平面布局，还能展示其高度信息，提供更加全面的导航体验。
2、目前，基于三维模型的地下停车场地图在许多场景中得到了广泛的应用。例如，在大型商场、办公楼、机场和火车站等地，三维地下停车场地图可以帮助用户快速找到空闲车位、规划最优的停车路径，并指引用户快速找到最近的出口或电梯。这不仅提高了用户的停车效率，还减少了因停车导致的拥堵。同时，三维地图还可以集成地下停车场的实时动态信息，如车位占用情况、车辆流动数据等，进一步提升用户体验和地下停车场管理效率。
3、然而，尽管地下停车场三维地图具有诸多优势，现有的地下停车场三维地图构建仍面临一些挑战和不足。首先，三维地图的渲染速度慢，响应时间长，影响了用户的实时体验。尤其是在复杂的大型地下停车场中，三维地图的加载和渲染时间可能会更长，导致用户等待时间增加，体验不佳；其次，现有的三维地图渲染风格单一，无法快速适配不同用户的需求。在实际应用中，不同的用户群体可能对地图的展示效果有不同的偏好和要求，单一的渲染风格难以满足多样化的需求；此外，现有的三维地图系统可移植性差，难以快速完成跨平台的部署任务。
4、本发明为克服上述不足，提供一种基于three.js的地下停车场三维地图建模及渲染系统。相较于blender、unity等大型三维建模渲染软件，three.js具有轻量化、易上手的特性，基于其构建的建模及渲染系统可以在任何支持webgl的现代浏览器中直接运行，无需安装额外的应用程序，便于快速开发和迭代。同时，本系统采用智能实体识别算法，根据实体的几何特征或者语义信息，对实体进行分类。利用batchedmesh渲染方式，同时对同类型实体采用相同的渲染规则进行渲染，大幅度减少停车场地图的渲染时间。此外，系统提供丰富的gui设置，用户可根据喜好自定义渲染风格。系统采用支持跨平台部署的uni-app框架进行开发，解决了地下停车场三维地图系统跨平台快速部署任务。系统弥补了百度、高德、腾讯等图商在地下停车场场景中无法快速出图的不足，为实现室内外无缝导航和构建智慧城市交通提供了有力支持。
技术实现思路
1、本发明提供一种基于three.js的地下停车场三维地图建模及渲染系统。three.js是一款运行在浏览器中的3d引擎，相较于其他大型三维建模渲染软件而言，具有轻量化、易上手等特点，无需安装额外的软件即可在浏览器中直接运行。采用three.js将输入的osm文件中的地下停车场元素信息转化为具有几何特征和语义信息的三维实体；采用智能实体识别算法对三维实体进行分类，使用batchedmesh渲染方式分别对同一类型的三维实体进行快速渲染；同时设置gui接口，允许修改模型颜色、高度、位置等渲染属性；最后，将地下停车场三维地图以gltf或obj文件导出。如果需要修改渲染风格，可通过系统中的gui接口进行相应设置，实现自定义的渲染风格。如果需要进行跨平台部署，可通过uni-app开发框架对项目文件进行打包，在不同平台上进行部署。
2、本发明的技术方案是：一种基于three.js的地下停车场三维地图建模及渲染系统，其特征在于，包括以下步骤：
3、s1、针对输入的osm文件中的各元素的坐标信息，根据元素类型采用three.js中不同的几何体进行三维实体的建模。例如，停车位采用planegeometry几何体建模，墙体和电梯采用extrudegeometry几何体建模，车道线采用line几何体建模等。
4、s2、对s1中构建的三维实体添加对应的语义信息。对于停车位号码信息，利用画布组件将停车位号码从文本格式转化为图像格式，并将转化后的图像数据作为纹理加载到对应停车位三维实体中；对于出入口、电梯等兴趣点(point of interest，poi)，通过html标签构建对应的文字和图标等语义信息，然后利用three.js中提供的css2drenderer渲染器，在三维场景中对应位置处进行显示。
5、s3、对三维实体进行渲染。根据实体的几何特征或者语义信息，采用智能实体识别算法对实体进行分类，，分别对不同类型的实体采用对应的渲染规则。同时，利用three.js中提供的batchedmesh机制，对相同渲染规则的实体同时渲染，大幅度降低渲染时间和内存占用。提供相应的渲染属性gui接口，采用监听事件对gui接口内的参数进行监听。当gui中参数因调整发生变化时，监听事件检测到变化后，将重新设置调整后的渲染属性。gui同时提供导出和导入配置按钮，将配置信息以json格式进行保存和读取。
6、s4、使用three.js中提供的exporters导出模块，将构建的三维地下停车场模型以gltf或obj文件导出。如果用户需要修改渲染风格，可通过系统中的gui接口进行相应设置，实现自定义的渲染风格。如果需要进行跨平台部署任务，可使用uni-app框架对项目进行打包，快速部署到web、android、ios、小程序等平台。
7、本发明的有益效果是：本发明应用three.js三维建模渲染库为基础，以uni-app为开发框架，将包含地下停车场场景元素信息的osm文件转化为三维模型，并对其渲染。采用batchedmesh对具有相同渲染材质的实体进行同时渲染，将渲染时间压缩至秒级，大大减少内存占用。提供渲染属性设置gui，方便用户根据自身喜好快速设置渲染属性。由于uni-app的跨平台部署特点，使得项目可快速的部署到不同的平台。本发明可快速适配用户需求，灵活应用于各种平台。
8、附图表说明
9、图1为本发明的流程图；
10、图2为本发明方法构建的地下停车场三维地图；
11、图3为采用batchedmesh渲染处理与未采用batchedmesh渲染处理的渲染时间对比图；
1.一种基于three.js的地下停车场三维地图建模及渲染系统，其特征在于：采用three.js将输入的osm文件中的地下停车场元素信息转化为具有几何特征和语义信息的三维实体；采用智能实体识别算法对三维实体进行分类，使用batchedmesh渲染方式分别对同一类型的三维实体进行快速渲染；设置gui接口，允许修改模型颜色、高度、位置等渲染属性；允许将地下停车场三维地图以gltf或obj文件导出；使用uni-app开发框架对项目文件进行打包，在不同平台上进行部署。
2.根据权利要求1所述的采用three.js将输入的osm文件中的地下停车场元素信息转化为具有几何特征和语义信息的三维实体，其特征在于：针对输入的osm文件中的各元素的坐标信息，根据元素类型采用three.js中不同的几何体进行三维实体的建模。对于停车位号码信息，利用画布组件将停车位号码从文本格式转化为图像格式，并将转化后的图像数据作为纹理加载到对应停车位三维实体中；对于出入口、电梯等兴趣点(point ofinterest，poi)，通过html标签构建对应的文字和图标等语义信息，然后利用three.js中提供的css2drenderer渲染器，在三维场景中对应位置处进行显示。
3.根据权利要求1所述的采用智能实体识别算法对三维实体进行分类，使用batchedmesh渲染方式分别对同一类型的三维实体进行快速渲染，其特征在于：根据实体的几何特征或者语义信息，采用智能实体识别算法对实体进行分类，分别对不同类型的实体采用对应的渲染规则。同时，利用three.js中提供的batchedmesh机制，对相同渲染规则的实体同时渲染，大幅度降低渲染时间和内存占用。
4.根据权利要求1所述的设置gui接口，允许修改模型颜色、高度、位置等渲染属性，其特征在于：提供相应的渲染属性gui接口，采用监听事件对gui接口内的参数进行监听。当gui中参数因调整发生变化时，监听事件检测到变化后，将重新设置调整后的渲染属性。gui同时提供导出和导入配置按钮，将配置信息以json格式进行保存和读取。
5.根据权利要求1所述的允许将地下停车场三维地图以gltf或obj文件导出，其特征在于：使用three.js中提供的exporters导出模块，将构建的三维地下停车场模型以gltf或obj文件导出。
6.根据权利要求1所述的使用uni-app开发框架对项目文件进行打包，在不同平台上进行部署，其特征在于：使用uni-app框架对项目进行打包，快速部署到web、android、ios、小程序等平台。
