Computer_Graphics/hw_08_3.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
<html>
    <head>
		<meta charset='utf-8'>
		<input type="file" id="fileInput" multiple="false" onchange="readFile(this)"><br>
		<h5 id="coords"></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;
        let light_pos = new Vector(100,100,400);
		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.light_source.position = light_pos;
						scene.rotate(alpha,beta,gamma);
						scene.draw(ctx,300,300);
                        enable_rotation = true
					};

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

        function set_light_source_coordinates(e)
            {
                light_pos.set(e.pageX - e.target.offsetLeft - 300, e.pageY - e.target.offsetTop - 300, light_pos.z());
                scene.light_source.position = light_pos;
                document.getElementById("coords").innerHTML = "X : " + (e.clientX - e.target.offsetLeft) + ", Y : " + (e.clientY - e.target.offsetTop);
            }

		setInterval(function(){
				if (enable_rotation)
					{
                        ctx.clearRect(0,0,canvas.width, canvas.height);
                        scene.draw(ctx,300,300);
					}
			},17);
    </script>
    <body onmousemove="set_light_source_coordinates(event)"></body>
  </body>
</html>