web-rendering/index.html at main · enerzilius/web-rendering · 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
<link rel="stylesheet" type="text/css" href="style.css">
<body>
  <h1>3D Rendering using HTML Canvas</h1>
  <p id="warning"><i>Only .obj files are supported</i></p>
  <div id="inputsBox">
    <div class="inputsRow">
      <label for="foregroundColor">Foreground Color:</label>
      <input type="color" id="foregroundColorInput" name="foregroundColor" value="#86cecb">
      <label for="backgroundColor">Background Color:</label>
      <input type="color" id="backgroundColorInput" name="backgroundColor" value="#111111">
      <label for="file">3D Model:</label>
      <input type="file" id="fileInput" name="file">
    </div>
    <div class="inputsRow">
      <label for="verticalRotationAngle">Vertical Rotation Angle: </label>
      <input type="range" min="-3.14866" max="3.14866" value="0" step="0.00001" id="vRotationAngleInput" name="verticalRotationAngle">
      <label for="zoom">Zoom: </label>
      <input type="range" min="-1" max="1" value="0" step="0.1" id="zoomInput" name="zoom">
    </div>
  </div>

  <canvas id="render"></canvas>
</body>


<script src="index.js"></script>