-
Notifications
You must be signed in to change notification settings - Fork 0
/
HuangZhen_HongLei_ProjC.html
executable file
·133 lines (98 loc) · 4.47 KB
/
HuangZhen_HongLei_ProjC.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>City</title>
</head>
<!-- Create the HTML5 'canvas' element in which we will run WebGL
-->
<body onload="main()">
<h1>Welcome to the City of Chicago ~~ </h1>
<p> Chicago is famous for its city architecture, Last time we made it possible for you to discover with a 3-D camera that you can move around in the space, this time we add two lights source with two lighting (Phong lighting and Blinn-Phong lighting) and two shading(Gouraud Shading and Phong shading) modes for you to explore ! Also, you can change the material of the spinning Sphere in the middle, and observe the differnece of light effects on it! ~~<p>
<p>please follow the instructions below, and enjoy :)</p>
<p1>Instructions:</p1>
<p>- use "W,A,S,D" to move around in the space</p>
<p>- arrow keys to turn your head around</p>
<p>- use "I,J,K,L to adjust the world light position"</p>
<p>- press "Space Bar" to turn on/off the world light</p></p>
<p>- press "Enter" to turn on/ff the head light </p>
<p>- press "B" to change the material of the spinning sphere</p>
<p>- press "N" to switch between Gouraud Shading and Phong Shading</p>
<p>- press "M" to switch between Blinn-Phong lighting and Phong lighting</p>
<p>- use the inputs below to customize the lighting attibutes of world lights </p>
<canvas id="webgl" width="700" height="700">
Please use a browser that supports "canvas"
</canvas>
<!-- Make a 'div' element to hold changeable HTML made in our JavaScript file;
(where? look inside main(), inside its 'tick()' function, where we
display the 'current angle' value.
-->
<p>
<div id="stretcher">
<p style="display:inline">worldLight-AmbiR:<input id="lampAmbiR" size="5" value="1.0" /> worldLight-AmbiG:<input id="lampAmbiG" size="5" value="1.0" /> worldLight-AmbiB:<input id="lampAmbiB" size="5" value="1.0" /> worldLight-DiffR:
<input id="lampDiffR" size="5" value="1.0" /> worldLight-DiffG:<input id="lampDiffG" size="5" value="1.0" /> worldLight-DiffB:<input id="lampDiffB" size="5" value="1.0" /> worldLight-SpecR:
<input id="lampSpecR" size="5" value="1.0" /> worldLight-SpecG:<input id="lampSpecG" size="5" value="1.0" /> worldLight-SpecB:<input id="lampSpecB" size="5" value="1.0" /> </p>
</div>
</p>
<div id= current_mode></div>
<!-- Next, make a simple block of text
-->
<!-- Next, make an HTML 'input' box element, a text-box 10 chars wide where users
can type in text. Give it an ID name so that our JavaScript program
(e.g. ControlMulti.js, loaded near the end of this file) can access this
HTML element by name in the 'tick' function.
-->
<div id= EditBoxOut></div>
</p>
<hr> <!-- Draw a horizontal-line separator------------->
<!-- Mouse click/drag amounts. Look in 'console' for event reports;
the 'clear' button calls Javascript function 'clearDrag()'
whose sole purpose is to set global vars xMdragTot,yMdragTot ==0.0
Note we use these totals to rotate the triangle at upper left.
-->
<div id='Mouse'> </div>
<p>
<!--BUTTONS: commands below create HTML push-buttons with labels
Spin <<, runStop, and Spin >>.
When users click the button, HTML calls JavaScript functions
"spinDown()", "runStop()" and "spinUp()" -->
<button type="button" onclick="spinDown()">Spin << </button>
<button type="button" onclick="runStop()">Run/Stop</button>
<button type="button" onclick="spinUp()">Spin >> </button>
</p>
<!-- Load in the JavaScript libraries supplied by our textbook
(Matsuda et al., 2013 WebGL Programming Guide) that help us
with WebGL programming:
-->
<script src="lib/webgl-utils.js"></script>
<script src="lib/webgl-debug.js"></script>
<script src="lib/cuon-utils.js"></script>
<script src="lib/cuon-matrix-mod.js"></script>
<script src="lib/cuon-matrix-quat03.js"></script>
<!-- Finally, load in our own JavaScript program file.
-->
<script src="lights-JT.js"></script>
<script src="materials_Ayerdi.js"></script>
<script src="HuangZhen_HongLei_ProjC.js"></script>
</body>
</html>
<style type="text/css">
h1{
color: burlywood;
font-size: 50px;
}
p1{
color: cadetblue;
font-size: 35px;
}
.buttons{
border-radius: 10px;
font-size: 15px;
color: darkcyan;
}
body {
font-family:'Helvetica Neue';
font-size: 20px;
}
</style>