Graphics-Coursework/index.html at master · SChandarana/Graphics-Coursework · GitHub

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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Boat Club 3D Model</title>
  </head>

  <body onload="main()">
    <div style = "float:left;">
        <canvas id="webgl" width="600" height="600">
        Please use a browser that supports "canvas"
        </canvas>
    </div>
    <div style ="float:right; margin-right: 2%; margin-top: 2%">
      <h1> CG Coursework 3D Modelling </h1>
      <h2> I have modelled the Boat Club, Elvet Bridge and the river using WebGL </h2>
      <h2> Here are the controls for manipulating the model </h2>
      <ul>
        <li> Move Camera (Forward, Backward, left and right) - WASD </li>
        <li> Move Camera (Up and Down) - U/J </li>
        <li> Rotate model - Arrow Keys and I/K (for all 3 planes of rotation) </li>
        <li> Moving the boat - B/N (forwards and backwards) </li>
        <li> Moving the car - C/V (forwards and backwards, also cause the wheels of the car to rotate) </li>
      </ul>
    </div>
    <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.js"></script>
    <script src="Models/bridgeSection.js"></script>
    <script src="Models/boat.js"></script>
    <script src="Models/cube.js"></script>
    <script src="Models/boatClub.js"></script>
    <script src="Models/carFrame.js"></script>
    <script src="Models/wheel.js"></script>
    <script src="index.js"></script>

  </body>
</html>