【WebGL】茶壶和光照

一、实验目的和要求

 

在OpenGL观察实验的基础上，通过实现实验内容，掌握OpenGL中消隐和光照的设置，并验证课程中消隐和光照的内容。

 

二、实验内容和原理

 

使用WebGL完成已有代码，达到如下的效果（示意图是以GLUT完成）

模型尺寸参见WebGL观察实验。要求修改代码达到以下要求：

1. 利用Three.js绘制桌子，读取teapot.obj并绘制茶壶
2. 通过设置参数使得桌面和四条腿的颜色各不相同，分别为：(1, 0, 0), (0, 1, 0), (1, 1, 0), (0, 1, 1), (0, 0, 1)；
3. 通过设置参数使得茶壶为金黄色；
4. 添加按键处理，移动场景中的光源，并能改变光源的颜色；
5. 修改茶壶的镜面反射系数，使之对光源呈现高光；
6. 在场景中添加一个聚光光源，其照射区域正好覆盖茶壶，并能调整改聚光光源的照射角度和朝向。

 

三、主要仪器设备

 

WebGL

Three.js

浏览器

模板工程

 

四、操作方法和实验步骤

 

1、查看老师提供的three.js的版本，在github上下载这个版本的所有文件、文档等供备用。

2、根据老师给的框架进行修改、调整，最终完成后的代码如下：

charset="UTF-8">

src="js/three.min.js">

src="js/DDSLoader.js">

src="js/MTLLoader.js">

src="js/OBJMTLLoader.js">

src="js/Detector.js">

src="js/stats.min.js">

 

type="text/css">

div#canvas-frame {

font-family: Monospace;

background-color: #000;

color: #fff;

width: 100%;

height: 600px;

margin: 0px;

overflow: hidden;

}

 

 

onload="threeStart();">

id="canvas-frame">

 

在进行这步之前，需要把合适的js脚本添加到工程目录下，我添加的脚本如下：

3、运行，反复测试效果，期间需要调整光源的位置、颜色等，让画面看起来比较舒服。

4、如果没有问题，交给助教验收，验收通过即实验结束。

 

五、实验数据记录和处理

 

根据实验要求，记录了以下情况：

            （一开始的场景）                                （高光）

            （光源左移）                                    （光源右移）

            （光源上移）                                （光源下移）

            （光源前移）                                （光源后移）

            （改变光源颜色）                                （开启聚光灯，灯左移）

            （聚光灯右移）                                （聚光灯上移）

            （聚光灯下移）                                （聚光灯角度变大）

            （聚光灯角度变小）

 

六、实验结果与分析

 

 

七、讨论、心得

 

（1）如何加载obj

做实验之前去网上搜索了相关的方法，大家基本是用OBJLoader和MTLLoader两个函数配合实现的，但那时查看老师给的版本发现是r73后找到了一个更快捷的方法，叫做OBJMTLLoader，它可以一次性搞定obj和mtl的加载，这样就不用去调两个函数了。但是这个方法在最新版本r88中已经被移除了。

 

（2）键盘事件响应过慢

一开始发现这个问题还以为是WebGL自己的问题，后来发现是animate函数在处理键盘事件的函数中又被调用了一次，重复调用造成了按键卡顿，解决办法是删去多余的animate()。

 

（3）浏览器的支持问题

一开始我是在chrome上做的实验，用OBJMTLLoader的时候发现它给我报了这个错：

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

查资料以后找到了解决办法，需要自己去设置浏览器的某些选项，我嫌麻烦就直接换成了FireFox，问题也就顺利解决了。