web的三维航道动态展示系统
摘 要 网页上的三维图形展示以三维场景漫游为基本特征，并在此基础上实现交互设计，与二维页面互为补充，提高了网页的亲和力。随着HTML5技术的发展，一项基于Javascript和OpenGL2.0的技术WEBGL诞生了，它为HTML5提供硬件3D加速渲染，使得开发人员可以利用显卡加速渲染在浏览器里流畅的展示三维场景。而且在展示个过程中，提供的丰富的控制功能，是以成为三维网页游戏和三维场景展示的首选。 航道的三维动态展示是提高水运发展的重要部分。与传统的二维航道图展示相比，利用三维场景展示航道的场景和航道的相关数据可以给人更形象的感受，而且动态化的展示可控制性可以更深切的体会航道的轮船、水位等的变化。本文利用三维建模工具3dmax对航道进行切实的描绘，展现航道的基本信息，并使用webGL技术是之在网页上能够动态展示。利用第三方库three.js 可以实现场景的正常显示、轮船行驶、水位升降、闸门开关等功能。 本系统基于网页，浅显易懂，易操作。立体化的展示了轮船经过航道的整个过程。摘要 6
目 录
ABSTRACT 7
目 录 8
第1章 绪论 1
1.1 展示系统的提出及意义 10
1.1.1 展示系统的提出 10
1.1.2 展示系统的意义 10
1.2 本课题的研究内容 10
1.3 航道展示需要的工具 11
1.3.1 关于WEBGL的介绍 11
1.3.2 关于THREE.JS的介绍 11
1.3.3 开发工具介绍 12
航道展示系统的需求分析 13
2.1业务需求 13
2.2 功能需求 13
2.3 数据需求 14
2.4 运行环境 14
第 3章 系统的概要设计 15
3.1 系统设计原则与思想 15
3.2 系统结构设计 15
系统的详细设计 16
4.1 渲染器 16
4.2 设置摄像机CAMERA 17
4.3 设置光源LIGHT 17
4.4 航道模型的导入 18
*好棒文|www.hbsrm.com +Q: *351916072*
4.5 浏览器的页面的加载顺序 19
4.6 轮船的控制 20
4.7 水位的控制 20
4.8 闸门的旋转 20
第5 章 调试遇到的问题和解决办法...................................................23
第6章 总结与展望................................................................................26
6.1总结......................................................................................................................26
6.2 展望.....................................................................................................................26
致谢..............................................................................................................................27
参考文献......................................................................................................................................28
第1章 绪论
1.1 展示系统的提出及意义
1.1.1 展示系统的背景与问题的提出
背景：目前，大众使用的网页大多为2D的页面，如果以文字浏览为主，其实已经能够满足社会的需求。但是在一些新的需求比如3D页游、商品展示、虚拟旅游等方面不断产生的情况下，2D的网页显然已经不能满足这种需求。但是随着网页技术和图形图像学的发展，在网页上使用三维图形图像来展示商品已经成为大多数公司的不二选择，虽然技术尚在不成熟阶段，但是基于WEB的三维场景展示系统及三维游戏已经不断的涌出， 而此项技术也受到越来越多的开发人员的青睐。
提出问题：航道的展示系统对于航道的管理、控制等具有重要意义，而且在之前也有很多的展示系统大多是二维的展示，即便是三维的也大多是使用JAVA小程序、一些浏览器插件或者FLASH动画等方式来进行设计的，虽然达到了一定的展示需求，但是在系统的直接感官感受和控制方面并不能像三维场景那样给人以真实感，亲和力低下。所以基于WEBGL的航道展示系统的设计与实现迫在眉睫。
1.1.2 展示系统的意义
本系统将航道系统在网页上动态的展示出来，并且能够控制展示的视角，控制航道的动态变化，提高航道的真实感，增加网页的亲和力和用户好感度，对于航道的展示系统的发展和航道的控制具有非常重要的意义。同时，这也展示了网页技术的前瞻性，值得网页开发人员考虑和学习。
1.2 本课题的研究内容
基于WEB的三维航道展示系统的开发满足了目前航道展示系统的需求，能够动态的调整展示系统的视角，动态的控制水面的升降，动态的控制轮船的经过，动态的开关闸门，为航道的展示提供更多的轻便性，为航道的展示和研究工作提供便利。
在对三维航道展示系统进行开发之前，首先对系统进行了认真仔细的调研工作，确定了系统的相关需求，并根据需求，确定针对以下功能进行开发研究：
、模型的网页展示，该部分主要是利用three.js提供的py工具，将3dmax所建成的模型导入网页，使其能够正常展示出来。
、对于模型的控制，该部分主要包括摄像机的控制，渲染的控制，闸门的控制、水面水位的控制及轮船的控制。
1.3 航道展示系统需要的工具
1.3.1 关于WEBGL的介绍
WebGL是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。
WebGL完美地解决了现有的Web交互式三维动画的两个问题：第一，它通过HTML脚本本身实现Web交互式三维动画的制作，无需任何浏览器插件支持;第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的。
1.3.2 关于THREE.JS的介绍
three.js是用JavaScript编写的WebGL第三方库。提供了非常多的3D显示和控制功能。Three.js是使用于浏览器的三维网页引擎，用户可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。而且可以在它的主页上看到许多精彩的演示。不过，这款引擎目前还处在比较不成熟的 开发阶段，其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度（尤其是文档的匮乏）three.js的代码托管在github上面，同样的工具还有Blender，voodoojs等。
目 录
ABSTRACT 7
目 录 8
第1章 绪论 1
1.1 展示系统的提出及意义 10
1.1.1 展示系统的提出 10
1.1.2 展示系统的意义 10
1.2 本课题的研究内容 10
1.3 航道展示需要的工具 11
1.3.1 关于WEBGL的介绍 11
1.3.2 关于THREE.JS的介绍 11
1.3.3 开发工具介绍 12
航道展示系统的需求分析 13
2.1业务需求 13
2.2 功能需求 13
2.3 数据需求 14
2.4 运行环境 14
第 3章 系统的概要设计 15
3.1 系统设计原则与思想 15
3.2 系统结构设计 15
系统的详细设计 16
4.1 渲染器 16
4.2 设置摄像机CAMERA 17
4.3 设置光源LIGHT 17
4.4 航道模型的导入 18
*好棒文|www.hbsrm.com +Q: *351916072*
4.5 浏览器的页面的加载顺序 19
4.6 轮船的控制 20
4.7 水位的控制 20
4.8 闸门的旋转 20
第5 章 调试遇到的问题和解决办法...................................................23
第6章 总结与展望................................................................................26
6.1总结......................................................................................................................26
6.2 展望.....................................................................................................................26
致谢..............................................................................................................................27
参考文献......................................................................................................................................28
第1章 绪论
1.1 展示系统的提出及意义
1.1.1 展示系统的背景与问题的提出
背景：目前，大众使用的网页大多为2D的页面，如果以文字浏览为主，其实已经能够满足社会的需求。但是在一些新的需求比如3D页游、商品展示、虚拟旅游等方面不断产生的情况下，2D的网页显然已经不能满足这种需求。但是随着网页技术和图形图像学的发展，在网页上使用三维图形图像来展示商品已经成为大多数公司的不二选择，虽然技术尚在不成熟阶段，但是基于WEB的三维场景展示系统及三维游戏已经不断的涌出， 而此项技术也受到越来越多的开发人员的青睐。
提出问题：航道的展示系统对于航道的管理、控制等具有重要意义，而且在之前也有很多的展示系统大多是二维的展示，即便是三维的也大多是使用JAVA小程序、一些浏览器插件或者FLASH动画等方式来进行设计的，虽然达到了一定的展示需求，但是在系统的直接感官感受和控制方面并不能像三维场景那样给人以真实感，亲和力低下。所以基于WEBGL的航道展示系统的设计与实现迫在眉睫。
1.1.2 展示系统的意义
本系统将航道系统在网页上动态的展示出来，并且能够控制展示的视角，控制航道的动态变化，提高航道的真实感，增加网页的亲和力和用户好感度，对于航道的展示系统的发展和航道的控制具有非常重要的意义。同时，这也展示了网页技术的前瞻性，值得网页开发人员考虑和学习。
1.2 本课题的研究内容
基于WEB的三维航道展示系统的开发满足了目前航道展示系统的需求，能够动态的调整展示系统的视角，动态的控制水面的升降，动态的控制轮船的经过，动态的开关闸门，为航道的展示提供更多的轻便性，为航道的展示和研究工作提供便利。
在对三维航道展示系统进行开发之前，首先对系统进行了认真仔细的调研工作，确定了系统的相关需求，并根据需求，确定针对以下功能进行开发研究：
、模型的网页展示，该部分主要是利用three.js提供的py工具，将3dmax所建成的模型导入网页，使其能够正常展示出来。
、对于模型的控制，该部分主要包括摄像机的控制，渲染的控制，闸门的控制、水面水位的控制及轮船的控制。
1.3 航道展示系统需要的工具
1.3.1 关于WEBGL的介绍
WebGL是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。
WebGL完美地解决了现有的Web交互式三维动画的两个问题：第一，它通过HTML脚本本身实现Web交互式三维动画的制作，无需任何浏览器插件支持;第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的。
1.3.2 关于THREE.JS的介绍
three.js是用JavaScript编写的WebGL第三方库。提供了非常多的3D显示和控制功能。Three.js是使用于浏览器的三维网页引擎，用户可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。而且可以在它的主页上看到许多精彩的演示。不过，这款引擎目前还处在比较不成熟的 开发阶段，其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度（尤其是文档的匮乏）three.js的代码托管在github上面，同样的工具还有Blender，voodoojs等。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/dzxx/dzkxyjs/1724.html
