多媒体技术应用与实践第6章_Web3D三维网页制作.pptVIP

* * * * * 多媒体技术应用与实践 第六章：Web3D三维网页制作 6.1 三维网页制作基础知识 6.1.1 三维网页的概念 三维网页是相对于二维网页而言的，传统的二维网页以平面的文字和图像来表述内容，通过超链接形成内容有机地交织。三维网页是指三维立体的交互式网页，或能够在线实时访问的三维虚拟环境。 从表现形式来看，无论网页的形式是二维还是三维，都是显示在电脑屏幕上的，只不过三维网页利用了眼睛的视觉效果来达到三维的效果，是在网络上模拟三维空间，具有比二维网页更强的交互性和娱乐性。从技术层面来看，二维网页是基于HTML的网页形式，三维网页是基于Web3D技术的网页形式。 6.1.2 三维网页的特征 1、三维网页以实现三维场景漫游为基本特征 2、三维网页需要在场景漫游的基础上实现互动设计 3、三维页面需要与二维页面互为补充 4、声音、影像和动画成为交互性的多媒体因素 5、三维网页更加强调艺术设计的重要性 6.1.3 Web3D技术 没有人对Web3D技术做过明确的定义，我们可以理解为是基于网络的3D图形渲染技术。 1．Web3D技术的发展 Web3D技术的竞争一直在进行着，目前国内外 较流行的Web3D技术加起来仍有十来种左右。 如Unity3D，Virtools，Java3D，Quest3D， Flash3D，TurnTool，Webmax，Converse3D ，VRP，Cult3D，VRML（X3D），WebGL 等。随着时间的推移，有的逐渐淘汰，而且随 时有新的成员加入，至今始终没有一个统一的 技术标准。 2．Web3D技术的应用 1）对企业和电子商务 2）对教育业 3）对娱乐游戏业 4）对虚拟现实展示与虚拟社区 6.2 常用Web3D技术介绍 1．Viewpoint 2．Cult3D 3．Java3D 4．Virtools 5． Unity3D 6．WebGL 6.3 WebGL三维网页制作 6.3.1 WebGL基础 1．WebGL技术依赖 HTML5 Javascript OpenGL 我们可以说WebGL是这样的一门技术，它在HTML5的canvas元素里、使用和OpenGL同样的API、利用Javascript来绘制出高精度的三维图像。 2．WebGL定义 WebGL is a royalty-free, cross-platform API that brings OpenGL ES 2.0 to the web as a 3D drawing context within HTML, exposed as low-level Document Object Model interfaces. It uses the OpenGL shading language, GLSL ES, and can be cleanly combined with other web content that is layered on top or underneath the 3D content. It is ideally suited for dynamic 3D web applications in the JavaScript programming language, and will be fully integrated in leading web browsers. 3．WebGL开发方法 原生WebGL开发：精通OpenGL API，较难。 第三方Javascript库：可以隐藏大量WebGL的底层操作，使用方便。如“Three.js” 4．3D绘图基础 三维坐标系统 网格、多边形和顶点 材料、纹理和亮光 变换和矩阵 镜头、透视图、视点和投影 着色器 6.3.2 WebGL开发环境搭建 1．文本编辑器。 WebGL提供的API是用Javascript来调用的，Javascript是一种脚本语言，可以用任何纯文本编辑器来编写，如记事本等，推荐使用支持Javascript语法，能够对其中关键字等特殊显示的高级编辑器，如EditPlus、UltraEdit等。 2．运行WebGL的浏览器。 现在几乎所有的主流浏览器都支持WebGL，注意IE用户需要使用最新的版本IE11，其它浏览器最好也使用比较新的版本，毕竟WebGL是一门很新的技术，在2011年才发布首个标准版本，过旧版本的浏览器肯定不支持。 3．WebGL 工具库。 “Three.js”、“glMatrix.js”、“SceneJS”、“gl.enchant.js”、“J3D” 6.3.3 Three.js绘制三维物体 1．画布的准备 (0) body 标签中添加 id 为「canvas3d」的 div 元素。 (1) st