-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html~
300 lines (230 loc) · 9.49 KB
/
index.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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
<!doctype html>
<html lang="en">
<head>
<title>Ship</title>
<meta charset="utf-8">
</head>
<body style="margin: 0;">
<canvas id="radar" height="230" width="230" style="position: absolute; bottom: 0px;"> Your Browser doesn't support canvas </canvas>
<script src="three.js-master/build/three.min.js"></script>
<script src="js/radar.js"></script>
<script src="three.js-master/src/loaders/ObjectLoader.js"></script>
<script src="three.js-master/src/loaders/JSONLoader.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="ship.js"></script>
<script src="arwing.js"></script>
<script src="asteroid.js"></script>
<script src="asteroidClone.js"></script>
<script src="medAsteroidClone.js"></script>
<script src="smallAsteroidClone.js"></script>
<script src="particle_explosion.js"></script>
<script src="laser.js"></script>
<script src="bolt.js"></script>
<script src="draw.js"></script>
<script src="advance.js"></script>
<script src="control.js"></script>
<script src="velocity.js"></script>
<script src="js/shaderCode.js"></script>
<script src="js/keyboardstate.js"></script>
<script src="OBJLoader.js"></script>
<script src="MTLLoader.js"></script>
<script>
// Set up the scene, camera, and renderer as global variables.
var scene, camera, camera2, renderer;
// 1-4 players?
var numPlayers = 1;
// Hack for switching from 2 player to 1
var refreshPageOnChange = false;
// Controls
var pads;
// variables for loaded objects
var tieBomber, xwing, arwing, asteroid, laser, laser2, bullet, temp, skyBox, skyBoxSpace, skyBoxLand, medRock = null;
// speed of asteroids and ships
var ROCKSPEED = 2;
var HALFSPEED = 1;
var maxShipSpeed = 1;
var WORLDSPACE = 500;
var HALFWORLD = 250;
// array for cloned objects
var asteroids = [];
// flag for cloning asteroids once parent has loaded
var needToClone = orientLaser2 = true;
// for sound
var audio = null;
var goodLuck = false;
var music = false;
// https://stemkoski.github.io/Three.js/Keyboard.html
var keyboard = new KeyboardState();
var clock = new THREE.Clock();
// set up radar
var canvas = document.getElementById("radar");
var ctx = canvas.getContext("2d");
var maxBounds = 350.0;
var radius = 100;
var counter = 0;
init();
gameLoop();
// Sets up the scene.
function init() {
// Create the scene and set the scene size.
scene = new THREE.Scene();
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
// Create a renderer and add it to the DOM.
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(WIDTH, HEIGHT);
renderer.autoClear = false;
document.body.appendChild(renderer.domElement);
// Create a camera, zoom it out from the model a bit, and add it to the scene.
camera = new THREE.PerspectiveCamera(45, WIDTH / HEIGHT, 0.1, 20000);
camera.position.set(0,6,0);
scene.add(camera);
camera2 = new THREE.PerspectiveCamera(45, WIDTH / HEIGHT, 0.1, 20000);
camera.position.set(0, 6, 0);
scene.add(camera2);
// Create an event listener that resizes the renderer with the browser window.
window.addEventListener('resize', function() {
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
renderer.setSize(WIDTH, HEIGHT);
camera.aspect = WIDTH / HEIGHT;
camera.updateProjectionMatrix();
});
// Set the background color of the scene.
renderer.setClearColor(0x333F47, 1);
// Create a light, set its position, and add it to the scene.
var light = new THREE.PointLight(0xffffff);
light.position.set(-100,200,100);
scene.add(light);
tieBomber = new Ship("models/tie_fighter.json", scene);
asteroid = new Asteroid("models/Asteroid.obj", scene);
laser = new Laser("models/lasers.json", scene);
arwing = new Arwing("models/arwing.json", scene);
laser2 = new Laser("models/lasers.json", scene);
var geo = new THREE.SphereGeometry(.1, 10, 8);
var mesh = new THREE.MeshLambertMaterial({color: 0xff0000});
temp = new THREE.Mesh(geo, mesh);
temp.material.visible = false;
scene.add(temp);
var loader = new THREE.ObjectLoader();
loader.load("models/bullet.json", function ( obj ) {
obj.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
child.material.color.setHex(0xff0000);
}
});
obj.scale.set(.1, .1, .1);
bullet = obj;
});
// build the skybox Mesh
var imagePrefix = "images/nebula_";
var directions = ["right1", "left2", "top3", "bottom4", "front5", "back6" ]; // Use this for skybox with dif side images
var imageSuffix = ".png";
var skyGeometry = new THREE.CubeGeometry( 5000, 5000, 5000 );
var materialArray = [];
for (var i = 0; i < 6; i++)
materialArray.push( new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture( imagePrefix + directions[i] + imageSuffix ), // Use this for skybox with dif side images
side: THREE.BackSide
}));
var skyMaterial = new THREE.MeshFaceMaterial( materialArray );
skyBox = new THREE.Mesh( skyGeometry, skyMaterial );
// scene.add( skyBox );
// build the skybox Mesh for Land
imagePrefix = "images/land_";
var directions = ["right1", "left2", "top3", "bottom4", "front5", "back6" ]; // Use this for skybox with dif side images
skyGeometry = new THREE.CubeGeometry( 1500, 1500, 1500 );
materialArray = [];
for (var i = 0; i < 6; i++)
materialArray.push( new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture( imagePrefix + directions[i] + imageSuffix ), // Use this for skybox with dif side images
side: THREE.BackSide
}));
var skyMaterial = new THREE.MeshFaceMaterial( materialArray );
skyBoxLand = new THREE.Mesh( skyGeometry, skyMaterial );
scene.add( skyBoxLand );
skyBox = skyBoxLand;
// Add OrbitControls so that we can pan around with the mouse.
controls = new THREE.OrbitControls(camera, renderer.domElement);
}
// Renders the scene and updates the render as needed.
function gameLoop() {
// Read more about requestAnimationFrame at http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
requestAnimationFrame(gameLoop);
draw();
control();
advance();
// Render the scene. These lines will mess things up if put in a different function
if (numPlayers == 2) {
// radar
var x = tieBomber.model.position.x;
var y = -tieBomber.model.position.z;
var x2 = arwing.model.position.x;
var y2 = -arwing.model.position.z;
x *= 100.0/maxBounds;
y *= 100.0/maxBounds;
x2 *= 100.0/maxBounds;
y2 *= 100.0/maxBounds;
counter = counter % radius;
twoRadar(x, y, x2, y2, ctx, canvas, counter, radius);
counter++;
if (refreshPageOnChange == false)
scene.add(arwing.model);
//Hack to refresh page
refreshPageOnChange = true;
// rez the dead ships if killed
if (arwing.alive == false && (Math.floor(Math.random() * 300)) == 1 ) {
scene.add(arwing.model);
arwing.alive = true;
}
if (tieBomber.alive == false && (Math.floor(Math.random() * 300)) == 1 ) {
scene.add(tieBomber.model);
tieBomber.alive = true;
}
renderer.autoClear = false;
var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
camera.aspect = 0.5 * SCREEN_WIDTH / SCREEN_HEIGHT;
camera2.aspect = 0.5 * SCREEN_WIDTH / SCREEN_HEIGHT;
camera.updateProjectionMatrix();
camera2.updateProjectionMatrix();
renderer.setViewport( 0, 0, SCREEN_WIDTH, SCREEN_HEIGHT );
renderer.clear();
// left side
renderer.setViewport( 1, 1, 0.5 * SCREEN_WIDTH - 2, SCREEN_HEIGHT - 2 );
renderer.render( scene, camera );
// right side
renderer.setViewport( 0.5 * SCREEN_WIDTH + 1, 1, 0.5 * SCREEN_WIDTH - 2, SCREEN_HEIGHT - 2 );
renderer.render( scene, camera2 );
}
else {
var x = tieBomber.model.position.x;
var y = -tieBomber.model.position.z;
x *= 100.0/maxBounds;
y *= 100.0/maxBounds;
counter = counter % radius;
radar(x, y, ctx, canvas, counter, radius);
counter++;
// rez the ship if it dies
if (tieBomber.alive == false && (Math.floor(Math.random() * 300)) == 1 ) {
scene.add(tieBomber.model);
laser.model.position.set(tieBomber.model.position.x, tieBomber.model.position.y, tieBomber.model.position.z);
laser.model.rotation.set(tieBomber.model.rotation.x, tieBomber.model.rotation.y, tieBomber.model.rotation.z)
tieBomber.alive = true;
}
// Hacks :P
if (refreshPageOnChange == true) {
location.reload();
}
// scene.remove(arwing.model);
renderer.autoClear = true;
renderer.render(scene, camera);
}
controls.update();
}
</script>
<!-- A little background music... -->
<audio autoplay id="good_luck">
<source src="goodLuck.mp3" type="audio/mpeg">
</audio>
</body>
</html>