web3D技术实验大纲

《web3D技术实验大纲》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、《web3D技术》实验教学大纲课程总学时：64学时学分：4学分实验学时：48学时实验个数：8个实验学分：3学分课程性质：专业方向课程适用专业：数字媒体技术教材及参考书：《WebGL入门指南》，TonyParisi著，郝稼力译，人民邮电出版社，2013年版。大纲执笔人：刘云安大纲审定人：数字媒体学院学术委员会一、实验课的性质与任务本课程是数字媒体技术专业专业方向课之一，是《web3D技术》的同步实验课。让学生了解web3D领域的向光概念，掌握从坐标系统到投影矩阵这些数学基础知识；掌握纹理贴图、模型动画这些图形效果的设计实现方法。掌握将web3D技术整合到web应用当中的编程技巧。二、实

2、验目的与要求1．实验目的通过《web3D技术》实验课程的实践，使学生掌握如何挑选WebGL框架以及使用哪种3D内容交换格式，并要求学生整合所学知识，制作了一个完整的基于WebGL的三维网页游戏，让学生能够基本了解WebGL这一新技术的开发流程，使其具备独立开发WebGL应用的能力。2．实验要求（1）掌握Tree.js图形引擎。（2）整合所学知识完成三维图形Web应用三、实验项目及内容提要web3D技术实验（134079）序号实验编号实验名称学时必做选做实验类型内容提要基本操作验证综合设计1基于Three.js引擎的web3D基本几何体的绘制实验4√√（1）Three.js构建三维场景

3、（2）为场景着色，添加纹理映射（3）旋转场景对象并实时绘制到画布2Three.js中的着色器实验4√√（1）创建网格，使用材质、纹理和光源（2）顶点着色与像素着色编码（3）使用多重纹理创建更具真实感的场景3Tween.js补间动画实验4√√（1）创建一个基本的补间动画（2）带缓动效果的补间动画（3）为3D对象添加材质和光源动画、纹理动画、蒙皮动画和变形动画。4利用镜头控制制作一个模型浏览器实验4√√（1）镜头的pitchyaw的变化（2）模型的缓动roll设计（3）模型的局部放大展示5WebGL中的整合实验8√√（1）整合动态HTML和WebGL（2）创建DIV元素弹出层（3）为3D

4、场景添加背景图片（4）使用视频作为纹理渲染6WebGL开发实践之三维模型、动作导入实验8√√（1）创建3D内容。从Blender中导出3D内容；（2）三维模型的预处理：把OBJ文件转换为Three.jsJSON文件；（3）浏览器的向后兼容与平稳退化测试7大场景虚拟漫游系统设计实验8√√（1）虚拟场景三维模型的创作与导入（2）在web中设计漫游界面（3）自由摄像机设定交互设定8webgame开发实验8√√（1）webgame开发环境的搭配（2）完成显示与动画编程（3）处理三维空间的碰撞问题（4）测试与优化四、实验内容安排实验一基于Three.js引擎的web3D基本几何体的绘制实验（验

5、证实验4学时）1.目的要求了解Three.js引擎以及web3D基本几何体的绘制2．实验内容（1）Three.js构建三维场景（2）为场景着色，添加纹理映射（3）旋转场景对象并实时绘制到画布3．主要实验仪器设备pc机。实验二Three.js中的着色器实验（验证实验4学时）1.目的要求了解Three.JS库的着色器的设计原理。2．实验内容（1）创建网格，使用材质、纹理和光源（2）顶点着色与像素着色编码（3）使用多重纹理创建更具真实感的场景3．主要实验仪器设备pc机。实验三Tween.js补间动画实验（验证实验4学时）1.目的要求掌握补间动画的基本原理，掌握缓动动画的技术实现方法。2．实

6、验内容（1）创建一个基本的补间动画（2）带缓动效果的补间动画（3）为3D对象添加材质和光源动画、纹理动画、蒙皮动画和变形动画。3．主要实验仪器设备pc计算机；相应配套软件。实验四利用镜头控制制作一个模型浏览器实验（验证实验4学时）1.目的要求（1)熟悉模型浏览器的设计流程（2)掌握三维空间变换的编码技巧2．实验内容（1）镜头的pitchyaw的变化（2）模型的缓动roll设计（3）模型的局部放大展示3．主要实验仪器设备pc计算机、flashcs5.5软件。实验五WebGL中的整合实验（验证实验8学时）1.目的要求掌握将三维虚拟场景对象画布整合到web页面的方法以及注意事项。2．实验内

7、容（1）整合动态HTML和WebGL（2）创建DIV元素弹出层（3）为3D场景添加背景图片（4）使用视频作为纹理渲染。3．主要实验仪器设备pc计算机。实验六WebGL开发实践之三维模型、动作导入实验（综合实验8学时）1.目的要求掌握将第三方工具创作的素材导入WebGL开发环境的方法。2．实验内容（1）创建3D内容。从Blender中导出3D内容；（2）三维模型的预处理：把OBJ文件转换为Three.jsJSON文件；（3）浏览器的向后兼容与平稳退化测试3．