【作者】 朱颖；

【导师】 曾鹏；

【作者基本信息】 华东师范大学 ， 工程硕士（专业学位）， 2021， 硕士

【摘要】 随着现代科技的进步,软硬件技术不断发展,用户可以直接在网页上与三维图形进行交互。当前传统园区的二维平面技术表现形式单一、交互功能匮乏,已不适用于智慧园区的发展模式。WebGL技术的出现,让开发者可以直接使用JavaScript语言在HTML5中绘制三维图形,使得智慧园区的三维可视化得以实现,从而以更美观高效的方式将智慧园区的信息呈现出来,并且满足用户与园区之间便捷的交互操作。基于WebGL的三维可视化技术的应用,也代表着三维数据可视化时代的来临。论文首先介绍了 WebGL渲染流程,分析了 WebGL实体坐标点转换到屏幕坐标点的矩阵变换过程,并对三维空间数据模型的研究现状进行介绍。基于三维空间数据模型的现有成果,设计出园区数据模型与数据结构,并结合WebGL的渲染方式设计出三维园区呈现的算法。然后论文分析了用户与三维园区的交互需求,对三维园区实体点选操作、标记区域面、视野变化进行重点设计与实现。文章进一步对园区功能模块进行划分,以园区Map类为主,详细描述Map实例的创建流程以及如何为该实例添加控件,并简述该实例的生命周期与事件监听。在交互过程中,针对三维园区呈现的文字图层堆叠问题给出了碰撞检测分析算法,使文字在发生碰撞后进行显隐变换操作。最后对基于上海市第一人民医院、虹桥德必园区等真实地理信息构建的三维园区实例进行了展示,并从渲染、旋转、缩放的时长方面对三维园区进行功能与性能的测试分析。由测试结果得知,该三维园区实例可以解决人们到达一个陌生园区后快速了解该园区分布的需求,其动态查看室内楼层可以方便访客到园区拜访,体现三维园区交互的可用性。更多还原

【Abstract】 With the progress of modern science and technology and the continuous development of software and hardware technology,users can directly interact with 3D graphics on Web pages.At present,the two-dimensional plane technology of the traditional park has a single form and lack of interactive functions,which is no longer suitable for the development mode of the smart park.With the emergence of webgl technology,developers can directly use JavaScript language to draw three-dimensional graphics in HTML5,so that the three-dimensional visualization of the smart park can be realized,so as to present the information of the smart Park in a more beautiful and efficient way,and meet the convenient interactive operation between users and the park.The application of 3D visualization technology based on webgl also represents the advent of the era of 3D data visualization.The thesis first introduces the WebGL rendering process,analyzes the matrix transformation process from WebGL entity coordinate points to screen coordinate points,and introduces the research status of three-dimensional spatial data models.Based on the existing results of the three-dimensional spatial data model,the park data model and data structure are designed,and the algorithm for the three-dimensional park presentation is designed in combination with the rendering method of WebGL.Then the thesis analyzes the interaction needs of users and the 3D park,and focuses on the design and implementation of the 3D park entity’s point-selection operation,marking of the area and the change of the field of view.The thesis further divides the functional modules of the park,focusing on the park Map class,describes in detail the creation process of a Map instance and how to add controls to the instance,and briefly describes the life cycle and event monitoring of the instance.In the interactive process,a collision detection and analysis algorithm is given to solve the problem of text layer stacking in the 3D park,so that the text will be transformed after the collision occurs.Finally,an example of a three-dimensional park based on real geographic information such as Shanghai General Hospital and E-manor of Hongqiao was displayed,and the functions and performance of the three-dimensional park were tested and analyzed in terms of rendering,rotation,and zooming time.According to the test results,the example of the three-dimensional park can meet the needs of people to quickly understand the distribution of the park after arriving at a strange park.Its dynamic viewing of indoor floors can facilitate visitors to visit the park,reflecting the availability of three-dimensional Park interaction.更多还原