Design And Research Of Panoramic Roaming System Production Platform Based On HTML5

Compared with the roaming system which is based on three-dimensional(3D) model, the panoramic roaming based on real scene is getting more and more application in areas, such as tourism, medical and military training. That is because it has many advantages, such as small amount of data and short development cycle. Panoramic roaming production platform can display the panorama with a series of mathematical calculations, and it can realize independent roaming between different scenes, combined with the computer multimedia elements and GIS. It can also really restore and locate the scene and enhance the interaction and immersive experience. With panoramic roaming system production platform, according to their own industry demand, ordinary users can quickly make virtual roaming system, using ordinary photographs or panorama. It has vital significance for the promotion of panoramic roaming technology in various industries.The traditional 3D panoramic roaming production platform based on real scene are mostly based on Flash or QuickTime plugins. It exists many problems, such as poor cross platform ability and strong dependency problems. HTML5 is the development trend of browser technology. It makes the web design become more integrated, especially multimedia elements show will no longer rely too much on Flash and Silverlight plugins. It not only brings great convenience for the developers but also makes users have no need to download the plugins. It makes browser’s loading speed improved and it can be used cross-platform and cross-browser.Through referencing to the relevant open source of HTML5 solutions, this thesis based on the traditional panoramic roaming production platform, designed and developed a set of platform which can quickly make a panoramic roaming system. According to the panoramic roaming system function, we have carried on the system function design mainly including the following four modules: panoramic scene module, map navigation module, menu navigation module and terminal panoramic push module. The panoramic scene module by using the open source of the Three.js library, we can realize the show of panoramic roaming scene. At the same time, we can also realize the control of the angle and zoom of the scene by using JavaScript. Map navigation module is realized by using JavaScript, CSS, and the <nav> and <map> label of HTML5. It can control the show and hiding of the map and also switching scene according to the hot the map navigation provided. Menu navigation can control the zoom in and zoom out on a scene, and also control the scene switching, full screen, etc. The terminal panoramic push module is according to the geographical position of the watching scene combined with GIS coordinates. It displays names of other panoramic scene near 10 kilometers. According to the scene name of panoramic scene pushed, the user is free to watch what they interest.This thesis uses the three.js library and HTML5 labels to solve the plugin problem and poor cross platform ability of traditional roaming. Meanwhile it imports terminal panoramic push function to make panoramic roaming more humane and reflects the advantages of HTML5. Through this platform, we created roaming system cases and tested them. The result shows that the platform has achieved the design goal and the made system has stronger browser compatibility and can smoothly browse panoramic roaming.