ComputerGraphicsCMPS260/index.html at master · bluestar514/ComputerGraphicsCMPS260 · 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

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Silly Hats</title>
  <!--  Simple reset to delete the margins  -->
  <style>
    body { margin: 0; }
    canvas { width: 100%; height: 500px; }
    button { padding: 25px;}
    .head { background-color: CornflowerBlue}
    .hat { background-color: Salmon}
    .option {background-color: LightGreen}
    .glasses {background-color: Plum}
  </style>
  <!--  Three.js CDN  -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js"></script>
   <script src="https://three.js/examples/js/controls/OrbitControls.js"></script>
   <script src='https://mamboleoo.be/learnThree/demos/OBJLoader.js'></script>
   <script src="orbit.js"></script>
   <script src="MTLloader.js"></script>
</head>
<body>
  <button class="head" onclick="loadHead('models/bethhead3d.obj', 'models/bethhead3d.jpg', 'models/bethfaceLandmarks.obj')">Beth</button>
  <button class="head" onclick="loadHead('models/mirekHead3d.obj', 'models/mirekHead3d.jpg','models/mirekFaceLandmarks.obj')">Mirek</button>
  <button class="head" onclick="loadHead('models/mahikaHead3d.obj', 'models/mahikaHead3d.jpg','models/mahikaFaceLandmarks.obj')">Mahika</button>
  <button class="hat" onclick="loadHat('duckhat', .95)">Duck Hat</button>
  <button class="hat" onclick="loadHat('vikinghat', 1.1)">Viking Hat</button>
  <button class="hat" onclick="loadHat('dogears', 2)">Dog Ears</button>
  <button class="glasses" onclick="loadGlasses('glasses')">Glasses</button>
  <button class="option" onclick="toggleLandmarks()">Toggle Landmarks</button>
  <button class="option" onclick="toggleLights()">Toggle Lights</button>
  <br>

  <script src="script.js"></script>
</body>
</html>