摘 要

随着科技的不断进步，计算机信息网络飞速发展，开发和研究与网络相关的虚拟系统逐渐成为社会的热点，越来越多的商家也将目光转向这里。其中，由普通车展衍生而来的虚拟汽车展示系统开始顺应市场需要，逐渐走向人们的视线。在实际应用中，它打破了时间和空间限制，节省了大量的车展活动经费,同时，也减少了选车者选车难的各种麻烦。就目前发展而言，市场上现有的虚拟汽车展示系统，在真实感、交互性和效果等方面还不能完全满足人民的需求。为了解决这一问题，一种新兴的网络三维技术Web 3D备受关注。

本课题紧紧围绕基于html5的可视化3D展台展开研究，并设计实现了基于html5 3D可视化展台。可视化3D展台是当今研究话题主要焦点之一，其包含多个分支，例如功能可视化展台、结构可视化展台、以及操作可视化展台等。可视化3D展台以其直观化、多态化、维度清晰等特点，在众多行业的销售以及日常数据分析中被广泛应用，成为可视化3D展台3D展台研究的热点之一。当前展台工具多种多样，功能范围很广，但其在满足通用性的同时，不能满足一些用户明确的、以3D形式呈现数据的个性化需求。 

本项目的开发采用的元素标签就对于html5来讲进行了深入优化和简洁，新的解析规则对于开发来讲无非是增加了编码灵活性和重用性，淘汰了冗余的就属性，信息传递也加强了许多从各个角度来讲已经实现了网页的动态“动态”让编码变得更加轻松。

关键词：html5； CSS3；3D 展台；可视化

3D booth system of HTML5 based on social platform

ABSTRACT

With the continuous progress of science and technology, the rapid development of computer information network, the development and research of network related virtual systems gradually become a hot spot of society, more and more businesses are turning their attention here. Among them, the virtual automobile exhibition system, derived from the ordinary auto show, began to meet the needs of the market and gradually moved towards the people's line of vision. In practice, it breaks the time and space constraints, saves a lot of auto show activities, and also reduces the difficulty of choosing the vehicle. As far as development is concerned, the existing virtual vehicle display system on the market can not fully meet the needs of the people in terms of reality, interactivity and effectiveness. In order to solve this problem, an emerging network 3D technology, Web 3D, has attracted much attention.

This topic focuses on the visualization of 3D booth based on HTML5, and designs and implements the visual booth based on HTML5 3D. Visual 3D booth is one of the main focuses of today's research. It includes many branches, such as functional visualization booth, structure visualization booth, visual display booth and so on. Visual 3D booth is widely used in many industry sales and daily data analysis because of its visualization, polymorphism and clear dimensions. It has become one of the focuses of visual 3D booth 3D booth research. At present, the booth tools are various and have a wide range of functions, but it can not meet the personalized requirements of some users in the form of 3D when they meet the versatility.

The element label the development of this project is used for HTML5 conducted in-depth optimization and simple analytical rules for the development of new terms are nothing more than an increase of encoding flexibility and reusability, eliminate redundant attributes, but also to strengthen the transmission of information from every perspective has many pages to achieve a dynamic "dynamic" encoding easier.

Key words：html5; CSS3; 3D booth; visualization

目 录

目 录 Ⅰ

1 引言 - 1 -

1.1 研究背景 - 1 -

1.2 国内外研究概况 - 1 -

1.3 研究内容及其意义 - 2 -

2 需求分析 - 3 -

2.1 需求定义 - 3 -

2.2 系统的运行环境 - 3 -

2.2.1开发环境 - 3 -

2.2.2运行环境 - 3 -

2.3开发工具和语言简介 - 4 -

2.3.1 Dreamweaver软件介绍 - 4 -

2.3.2 JavaScript及jQuery框架 - 4 -

2.3.3 CSS3技术 - 7 -

3 系统设计 - 11 -

3.1项目总体框架设计 - 11 -

3.2应用程序界面设计 - 11 -

3.2.1应用程序主界面设计 - 11 -

3.2.2操作按钮 - 11 -

3.2.3展示图片收集 - 12 -

3.2.2 分享按钮放置 - 12 -

4 系统实现 - 13 -

4.1 展示界面的实现 - 13 -

4.2 鼠标操作实现 - 14 -

4.3 按钮操作实现 - 15 -

4.4 自动播放 - 18 -

4.5 缩放算法 - 19 -

4.6 停止播放 - 20 -

4.7 添加分享按钮及窗口 - 20 -

5 项目测试与运行结果 - 22 -

5.1 程序运行界面 - 22 -

5.2 分享操作的界面 - 22 -

5.2.1 打开分享界面 - 22 -

5.2.2 分享功能测试 - 23 -

5.3 按钮操作 - 23 -

结 论 - 24 -

致 谢 - 25 -

参考文献 - 26 -

1 引言

1.1 研究背景

当前社会，互联网 时代从刚开始的大胆构想，到人们的不断探索、创新，到一点一点地成型，并且开始融入人们的日常生活，成为不可或缺的一部分。通过互联网 ，人们除了能够从网络中获取更多的信息，而且可以看新闻、看电视、点菜等互动操作。

当然当前耳熟能详的HTML编码标准的最后一个版本早在1999年的第二十一个世纪起草确定，随着网络技术的的不断扩展和发展，当前的html技术已不能满足当前的需求，那么HTML5的新方案应运而生。HTML5是一种未来HTML的重大修订和改进改善，伴随着以互联网行业商业和其它应用的迅速发展，当前的网络标准已经来满足不了网络时代的需求，在此发展阶段，为了减少对网络浏览器的需求，丰富网络应用程序的应用服务，提出了html5技术的新标准。

HTML5的出现和发展告诉我们，新的需求在当前的html技术已经满足不了编程的需求了，如果开发出要求的内容则花费太多的美工和UI设计，是不划算的，新的需求不断让技术人员深思，提出新的标准来适应新科技发展的浪潮。

1.2 国内外研究概况

随着网络技术的不断发展，3d展台也成为各个单位或者企业改变传统模式宣传自己的一个有效途径。通过网站使得单位的信息突破了时间和空间的限制，它的产生顺应了当前的形势的发展，不仅节省了人力物力，更体现了信息的时效性。