IntroToComputerGraphics-CityGenerator/index.html at master · MHillier98/IntroToComputerGraphics-CityGenerator · 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
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
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#">

<head>
  <!-- HTML Meta Tags -->
  <title>Procedural City Generator</title>
  <meta name="description"
    content="A Procedural City Generator built in Three.JS - The Final Project for UTS 31264 Introduction To Computer Graphics">
  <link rel="image_src"
    href="https://mhillier98.github.io/IntroToComputerGraphics_CityGenerator/assets/img-preview/preview.png">

  <!-- set the favicon -->
  <link rel="icon" href="favicon.ico" type="image/x-icon" />
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

  <!-- set some meta tags -->
  <meta itemprop="name" content="Procedural City Generator">
  <meta itemprop="description" content="A Procedural City Generator built in Three.JS
  The Final Project for UTS 31264 Introduction To Computer Graphics">
  <meta itemprop="image"
    content="https://mhillier98.github.io/IntroToComputerGraphics_CityGenerator/assets/img-preview/preview.png">

  <meta property="og:url" content="https://mhillier98.github.io/IntroToComputerGraphics_CityGenerator">
  <meta property="og:type" content="website">
  <meta property="og:title" content="Procedural City Generator">
  <meta property="og:description"
    content="A Procedural City Generator built in Three.JS - The Final Project for UTS 31264 Introduction To Computer Graphics">
  <meta property="ogimage:"
    content="https://mhillier98.github.io/IntroToComputerGraphics_CityGenerator/assets/img-preview/preview.png">

  <meta name="twitter:card" content="summary_large_image">
  <meta property="twitter:url" content="https://mhillier98.github.io/IntroToComputerGraphics_CityGenerator/">
  <meta name="twitter:title" content="Procedural City Generator">
  <meta name="twitter:description"
    content="A Procedural City Generator built in Three.JS - The Final Project for UTS 31264 Introduction To Computer Graphics">
  <meta name="twitter:image"
    content="https://mhillier98.github.io/IntroToComputerGraphics_CityGenerator/assets/img-preview/preview.png">

  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="0" />

  <!-- the styling that our site uses -->
  <link rel="stylesheet" href="style.css">


  <!-- include the three.js library -->
  <script type="text/javascript" src="js/vendor/three.js"> </script>

  <!-- include the trackball code -->
  <script type="text/javascript" src="js/vendor/OrbitControls.js"> </script>

  <!-- include the model loader -->
  <script type="text/javascript" src="js/vendor/PLYLoader.js"></script>

  <!-- include the GUI -->
  <script type="text/javascript" src="js/vendor/dat.gui.min.js"></script>

  <!-- include performance stats -->
  <script type="text/javascript" src="js/vendor/stats.min.js"></script>

  <!-- include the first person controls -->
  <script type="text/javascript" src="js/vendor/PointerLockControls.js"></script>
</head>

<body>
  <!-- The main information panel, shown in the top-left -->
  <div id="info-panel">
    <h1>Procedural City Generator</h1>

    <div id="info-content">
      <h3>Press the '<i>Generate New</i>' button to start!</h3>
      <p>Built for <i>31264 Introduction to Computer Graphics</i> at UTS</p>

      <a href="https://www.youtube.com/watch?v=k7xkfOuArYo">Demonstration Video</a>

      <h4>Camera Controls</h4>
      <ul>
        <li>Left Click + Drag to Rotate</li>
        <li>Right Click + Drag to Pan</li>
        <li>Scroll Wheel to Zoom</li>
        <li>Space to move up</li>
        <li>Left shift to move down</li>
      </ul>

      <h4>First Person Mode Controls</h4>
      <ul>
        <li>Move mouse to rotate</li>
        <li>W to move forwards</li>
        <li>A to move left</li>
        <li>S to move backwards</li>
        <li>D to move right</li>
      </ul>

      <h4>Building Controls</h4>
      <ul>
        <li>Left Click to select</li>
        <li>Right Click to de-select</li>
        <li>Left Click again to move the building</li>
      </ul>

      <h4>Built By:</h4>
      <ul>
        <li>Matthew Hillier</li>
        <li>Alex Munoz</li>
        <li>Josh Masangcay</li>
        <li>Mitchell Sanderson</li>
        <li>Longyong Li</li>
      </ul>
    </div>

    <div id="info-btn" class="btn">[click panel anywhere to hide]</div>

  </div>

  <div id="info-bottom-right">
    <a href="https://github.com/MHillier98/IntroToComputerGraphics_CityGenerator">
      <img alt="View on Github"
        src="https://mhillier98.github.io/IntroToComputerGraphics_CityGenerator/assets/img-misc/ViewOnGitHub.png"
        height="32px"></a>
  </div>

  <!-- Setup the City Generator -->
  <script type="text/javascript" src="js/setup.js"></script>

  <!-- Handle user inputs -->
  <script type="text/javascript" src="js/inputController.js"></script>

  <!-- Generate the city -->
  <script type="text/javascript" src="js/cityGenerator.js"></script>

  <!-- Handle the Controls GUI -->
  <script type="text/javascript" src="js/gui.js"></script>

  <!-- Show some stats -->
  <script type="text/javascript" src="js/stats.js"></script>

  <!-- Add the main logic -->
  <script type="text/javascript" src="js/main.js"></script>
</body>

</html>