一、实验目的和要求
在OpenGL观察实验的基础上，通过实现实验内容，掌握OpenGL中消隐和光照的设置，并验证课程中消隐和光照的内容。
二、实验内容和原理
使用WebGL完成已有代码，达到如下的效果（示意图是以GLUT完成）
模型尺寸参见WebGL观察实验。要求修改代码达到以下要求：
-
利用Three.js绘制桌子，读取teapot.obj并绘制茶壶
-
通过设置参数使得桌面和四条腿的颜色各不相同，分别为：(1, 0, 0), (0, 1, 0), (1, 1, 0), (0, 1, 1), (0, 0, 1)；
-
通过设置参数使得茶壶为金黄色；
-
添加按键处理，移动场景中的光源，并能改变光源的颜色；
-
修改茶壶的镜面反射系数，使之对光源呈现高光；
-
在场景中添加一个聚光光源，其照射区域正好覆盖茶壶，并能调整改聚光光源的照射角度和朝向。
三、主要仪器设备
WebGL
Three.js
浏览器
模板工程
四、操作方法和实验步骤
1、查看老师提供的three.js的版本，在github上下载这个版本的所有文件、文档等供备用。
2、根据老师给的框架进行修改、调整，最终完成后的代码如下：
<!--
Project Name: 实验五
Author:
Student ID:
Description: 实验5的WebGL版
Date: 2017.12.09
-->
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>WebGL实验5</title>
<scriptsrc="js/three.min.js"></script>
<scriptsrc="js/DDSLoader.js"></script>
<scriptsrc="js/MTLLoader.js"></script>
<scriptsrc="js/OBJMTLLoader.js"></script>
<scriptsrc="js/Detector.js"></script>
<scriptsrc="js/stats.min.js"></script>
<styletype="text/css">
div#canvas-frame {
font-family: Monospace;
background-color: #000;
color: #fff;
width: 100%;
height: 600px;
margin: 0px;
overflow: hidden;
}
</style>
<script>
var renderer;
var container;
var legDist=45;//桌腿之间的距离
var directionalLight;//直射光
var directionalLightColor=0xffeedd;
var globalShininess=30;//指定高光的亮度
var isDirectionalLightChanged=true;//是否改变直射光
var isSpotLightOn=false;//开启聚光光源
var directionLightPos=[0,0,1];//平行光位置
var spotLightPos=[0,200,100];//聚光灯位置
var spotLightAngel;//聚光灯角度
var mouseX=0,mouseY=0;
var windowHalfX=window.innerWidth/2;
var windowHalfY=window.innerHeight/2;
//初始化Three绘制canvas
function initThree(){
width = document.getElementById('canvas-frame').clientWidth;
height = document.getElementById('canvas-frame').clientHeight;
renderer =new THREE.WebGLRenderer({
antialias :true
});
renderer.setSize(width, height);
document.getEleme
最低0.47元/天 解锁文章
220
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
