-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
118 lines (92 loc) · 3.01 KB
/
index.html
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
<!-- src https://github.com/BSolut/btech1 -->
<!DOCTYPE html>
<html lang="en-US" class="supports_custom_scrollbar">
<head>
<style>
* {margin: 0; padding: 0}
html, body {width: 100%; height: 100%; overflow: hidden;}
a {color: #fff;}
</style>
</head>
<body style="background-color:#000">
<canvas id="canvas" style="display: block; width: 800px; padding: 0; margin: auto;"></canvas>
</body>
<script type="text/javascript" src="./src/math.js"></script>
<script type="text/javascript" src="./src/surface.js"></script>
<script type="text/javascript" src="./src/mesh.js"></script>
<script type="text/javascript" src="./src/renderable.js"></script>
<script type="text/javascript" src="./src/scene.js"></script>
<script type="text/javascript" src="./src/light.js"></script>
<script type="text/javascript" src="./src/shader.js"></script>
<script type="text/javascript" src="./src/rasterizer.js"></script>
<script type="text/javascript" src="./src/renderer.js"></script>
<script>
var renderer = new Renderer(800, 600, new DomSurface(document.getElementById('canvas')) );
renderer.setPerspective(0.1, 100, 80*Math.PI/180);
renderer.shader = new GouraudShader();
var scene = new Scene();
//Setup lights
scene.addLight( new Light(Light.Type.Point, {
castShadow: false,
length: 5,
point: new Point(0, -5.5,2),
intensity: 0.002,
}) )
scene.addLight( new Light(Light.Type.Ambient, {
intensity: 0.002
}))
//Light cube
var cube = scene.add( new Renderable( new Mesh( Shapes.makeCube(80,80,80,255) ) ) );
cube.translate(0,-5,0);
//Plane cube
var plane = scene.add( new Renderable(new Mesh(Shapes.makePlane(100,100,100,255))) );
plane.translate(0,5,0).scale(10);
var img = new Image();
img.src = 'model/swift1.jpg';
img.onload = function(){
plane.mesh.subsets[0].material = new Material(img);
renderLoop();
}
//B Mrsh
var fMesh = new Mesh(),
renderMesh = new Renderable(fMesh);
fMesh.loadStl('model/b.stl', function(argument) {
renderLoop();
});
scene.add( renderMesh ).translate(0,0,0).rotx(-10*Math.PI/180);
var val = 0,
lightMatrix = new Matrix4(),
fps;
const
times = [];
function renderLoop() {
const now = performance.now();
while (times.length > 0 && times[0] <= now - 1000) {
times.shift();
}
times.push(now);
fps = times.length;
val += 0.01;
renderer.surface.clear();
scene.camera.set( Matrix4.IDENTITY );
scene.camera.translate(0, -2, -24);
scene.camera.rotx( 25 * Math.PI/180 );
scene.camera.roty( val/20 * Math.PI );
//scene.camera.roty( val/8 * Math.PI );
lightMatrix.set(Matrix4.IDENTITY);
lightMatrix.roty(val * Math.PI);
lightMatrix.translate(0, -2, 8);
Point.transform( scene.lights[0].point, Point.Zero, lightMatrix );
cube.setMatrix(lightMatrix);
cube.scale(0.25);
renderer.renderer(scene);
renderer.surface.flush();
renderer.surface.ctx.fillStyle = '#fff';
renderer.surface.ctx.fillText(fps, 5,10);
}
(function renderAni() {
renderLoop();
window.requestAnimationFrame(renderAni);
})();
</script>
</html>