Computer_Graphics/lab_08.html at master · capsidimit/Computer_Graphics · 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
<html>
    <head>
		<meta charset='utf-8'>
		<input type="file" id="fileInput" multiple="false" onchange="readFile(this)"><br>
		<h5 id="angles"></h5>
		<script type="text/javascript" src="./graphics.js"></script>
     </head>
  <body>
	<canvas width="1000", height="1000", id="canvas"></canvas>
    <script>
		var canvas = document.getElementById("canvas");
		let angles = document.getElementById("angles");
        var ctx = canvas.getContext("2d");
		let scale = 2;
		let step = 1;
		let enable_rotation = false;
		let scene = new Scene();

		let alpha = 0*Math.PI/180;
		let beta = 0*Math.PI/180;
		let gamma = 0*Math.PI/180;

		scene.scale(3);
		scene.light_source.diffuse_coef = 0.2;
        scene.light_source.position.set(-200,-200,500);

		function readFile(input)
			{
				let file = input.files[0];

				let reader = new FileReader();

				reader.readAsText(file);

				reader.onload = function() {
						scene.object = obj_parse(reader.result);
						ctx.clearRect(0,0,canvas.width, canvas.height);

						scene.rotate(alpha,beta,gamma);
						scene.draw(ctx,300,300);
						enable_rotation = true
					};

				reader.onerror = function() {
					console.log(reader.error);
				};
			}


		setInterval(function(){
				if (enable_rotation)
					{
						ctx.clearRect(0,0,canvas.width, canvas.height);
						gamma += step/100;
						alpha += step/10;
						if (alpha > 360 || alpha < 0)
							{
								alpha = Math.abs(alpha - 360)
							}
						if (beta > 360 || beta < 0)
							{
								beta = Math.abs(beta - 360)
							}
						if (gamma > 360 || gamma < 0)
							{
								gamma = Math.abs(gamma - 360)
							}
						angles.innerHTML = "[ " + alpha + " | " + beta + " | "+ gamma + " ]";
						scene.rotate(alpha,beta,gamma);
						scene.draw(ctx,300,300);
					}
			},17);
	</script>
  </body>
</html>