web3D技术实验大纲

《web3D技术》实验教学大纲

课程总学时：64学时

学分：4学分

实验学时：48学时

实验个数：8个

实验学分：3学分

课程性质：专业方向课程

适用专业：数字媒体技术

教材及参考书：《WebGL入门指南》，Tony Parisi著，郝稼力译，人民邮电出版社，2013年版。

大纲执笔人：刘云安

大纲审定人：数字媒体学院学术委员会

一、实验课的性质与任务

本课程是数字媒体技术专业专业方向课之一，是《web3D技术》的同步实验课。让学生了解web3D领域的向光概念，掌握从坐标系统到投影矩阵这些数学基础知识；掌握纹理贴图、模型动画这些图形效果的设计实现方法。掌握将web3D技术整合到web应用当中的编程技巧。

二、实验目的与要求

1．实验目的

通过《web3D技术》实验课程的实践，使学生掌握如何挑选WebGL框架以及使用哪种3D 内容交换格式，并要求学生整合所学知识，制作了一个完整的基于WebGL的三维网页游戏，让学生能够基本了解WebGL这一新技术的开发流程，使其具备独立开发WebGL应用的能力。

2．实验要求

（1）掌握Tree.js图形引擎。

（2）整合所学知识完成三维图形Web应用

四、实验内容安排

实验一基于Three.js引擎的web3D基本几何体的绘制实验

（验证实验 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．实验内容

（1）创建一个基本的补间动画

（2）带缓动效果的补间动画

（3）为3D对象添加材质和光源动画、纹理动画、蒙皮动画和变形动画。

3．主要实验仪器设备

pc计算机；相应配套软件。

实验四利用镜头控制制作一个模型浏览器实验

（验证实验 4学时）

1. 目的要求

（1)熟悉模型浏览器的设计流程

（2)掌握三维空间变换的编码技巧

2．实验内容

（1）镜头的pitch yaw的变化

（2）模型的缓动roll设计

（3）模型的局部放大展示3．主要实验仪器设备

pc计算机、flash cs5.5软件。

实验五 WebGL中的整合实验

（验证实验 8学时）

1. 目的要求

掌握将三维虚拟场景对象画布整合到web页面的方法以及注意事项。2．实验内容

（1）整合动态HTML和WebGL

（2）创建DIV元素弹出层

（3）为3D场景添加背景图片

（4）使用视频作为纹理渲染。

3．主要实验仪器设备

pc计算机。

实验六 WebGL开发实践之三维模型、动作导入实验

（综合实验 8学时）

1. 目的要求

掌握将第三方工具创作的素材导入WebGL开发环境的方法。

2．实验内容

（1）创建3D内容。从Blender中导出3D内容；

（2）三维模型的预处理：把OBJ文件转换为Three.js JSON文件；（3）浏览器的向后兼容与平稳退化测试

3．主要实验仪器设备

pc计算机、flash cs5.5 软件。

实验七大场景虚拟漫游系统设计实验

（综合实验 8学时）

1. 目的要求

掌握基于web的虚拟漫游系统的设计实现方法。

2．实验内容

（1）虚拟场景三维模型的创作与导入

（2）在web中设计漫游界面

（3）自由摄像机设定、交互设定

3．主要实验仪器设备

计算机、chrome浏览器。

实验八web game开发实验

（综合实验 8学时）

1. 目的要求

掌握web game的开发方法

2．实验内容

（1）web game开发环境的搭配

（2）完成显示与动画编程

（3）处理三维空间的碰撞问题

（4）测试与优化。

3．主要实验仪器设备

计算机、chrome浏览器。

五、实验报告的格式（本部分要求各学院设计成表格作为教学大纲附件）

实验完毕，应用专门的实验报告本，根据预习和实验中的现象及数据记录等，及时而认真地写出实验报告。实验报告一般包括以下内容：

实验（序号）实验名称

（一）实验目的

（二）仪器工具及材料列出实验中所使用的主要仪器工具及材料。

（三）内容及程序应简明扼要地写出实验步骤流程。

（四）结果及分析应用文字、表格、图形等形式将数据表示出来。根据实验要求对数据进行分析和误差处理。

（五）问题讨论结合有关理论对实验中的现象、产生的误差等进行讨论和分析，以提高自己的分析问题、解决问题的能力，并提出应注意的事项，也为以后的科学研究打下一定的基础。

六、考核方式、方法及实验成绩评定方法

1.考核方式、方法：

web3D技术实验课程成绩单独按五级记分。凡实验成绩不及格者，该门课程必须重修。学生的实验成绩应以平时考查为主，一般应占总分的70%，其平时成绩又要以实验实际操作的优劣作为主要考核依据。在学期末或课程结束时，为复习和巩固实验教学内容，进一步对学生作补充了解，也可举行一定的实验操作考试，但无论采取何种方式进行考核，都必须按实验课的目的要求，以实际实验工作能力的强弱作为评定成绩的主要依据。因此，最终的集中考试结果只能占总成绩的30%。

2.实验成绩评定方法：

评定各级成绩时，可参考以下标准：

（一）优秀（很好）

能正确理解实验的目的要求，能独立、顺利而正确地完成各项实验操作，会分析和处理实验中遇到的问题，能掌握所学的各项实验技能，能较好地完成实验报告及其它各项实验作业，有一定创造精神和能力。有良好的实验工作作风和习惯。

（二）良好（较好）

能理解实验的目的和要求，能认真而正确地完成各项实验操作，能分析和处理实验中遇到的一些问题。能掌握所学实验技能的绝大部分，对难点较大的操作完成有困难。能一般完成实验报告和其它实验作业。有较好的实验习惯和工作作风。

（三）中等（一般）

能粗浅理解实验目的要求，能认真努力进行各项实验操作，但技巧较差。能分析和处理实验中一些较容易的问题，掌握实验技能的大部分。有30%掌握得不好。能一般完成各项实验作业和报告。处理问题缺乏条理。工作作风较好。能认真遵守各项规章制度。学习努力。

（四）及格（较差）

只能机械地了解实验内容，能一般性地按实验步骤完成实验操作，能完成60%所学的实验技能，有些虽作但不准确。遇到问题常常缺乏解决的办法，在别人启发下能作些简单处理，但效果不理想。能一般完成实验报告，能认真遵守实验室各项规章制度，工作中有小的习惯性毛病（如工作无计划，处理问题缺乏条理）。

（五）不及格（很差）

盲目地操作，只掌握50%的所学实验技能。有些实验虽能作，但一般效果不好，操作不

正确。工作忙乱无条理。一般能遵守实验室规章制度，但常有小的错误。实验报告较多的时候有结果，遇到问题时说不明原因，在教师指导下也较难完成各项实验作业。或有些小聪明但不努力，不求上进。

八、主要教材及参考书

[1]《WebGL入门指南》，（美）Tony Parisi著，郝稼力译，人民邮电出版社，2013年版。

[2]《WebGL高级编程--开发Web3D图形》, (美)阿尤鲁，吴文国译，清华大学出版社，2013年1月第1版。

[3]《3D数学基础：图形与游戏开发》，（美）邓恩（Dunn,F.），帕贝利（Parberry,I.）著，清华大学出版社，2005年版。

[4]《HTML5程序设计（第2版）》，（荷）Peter Lubbers等著，人民邮电出版社，2012年版。