-
Notifications
You must be signed in to change notification settings - Fork 1
/
index_3d.html
106 lines (95 loc) · 2.85 KB
/
index_3d.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3D</title>
<style>
canvas {
outline: 1px dashed lightskyblue;
position: fixed;
top: 40px;
}
</style>
<!-- 引入所有用到的文件 -->
<script src='utils.js'></script>
<script src='object.js'></script>
<script src='vector.js'></script>
<script src='color.js'></script>
<script src='vertex.js'></script>
<script src='matrix.js'></script>
<script src='texture.js'></script>
<script src='mesh.js'></script>
<script src='canvas.js'></script>
</head>
<body>
<canvas id="id-canvas" width="400" height="300"></canvas>
<script>
const __main = function () {
// let canvas = Canvas.new('#id-canvas')
// part 1
// let v1 = Vertex.new(Vector.new(150, 10), Color.red())
// let v2 = Vertex.new(Vector.new(10, 100), Color.blue())
// let v3 = Vertex.new(Vector.new(300, 200), Color.green())
// canvas.drawScanline(v1, v2)
// canvas.drawTriangle(v1, v2, v3)
// let mesh = Mesh.cube()
// canvas.drawMesh(mesh)
// //
// canvas.render()
// setInterval(function() {
// canvas.clear()
//// mesh.rotation.x += 0.1
// mesh.rotation.y += 0.1
// canvas.drawMesh(mesh)
// //
// canvas.render()
// }, 200)
// let tm = new TestMatrix()
// tm.test()
loadMaterials()
window.addEventListener('materials_loaded', (e) => {
let {image3d, image} = e.detail
render(image3d, image)
})
}
const render = (image3d, image) => {
let canvas = Canvas.new('#id-canvas')
let mesh = Mesh.from3D(image3d, image)
canvas.drawMesh(mesh)
canvas.render()
setInterval(() => {
canvas.clear()
// mesh.rotation.x += 0.1
mesh.rotation.y += 0.1
canvas.drawMesh(mesh)
canvas.render()
}, 200)
}
const ajaxGet = function (url, callback) {
let r = new XMLHttpRequest()
r.open('GET', url, true)
r.onreadystatechange = function () {
if (r.readyState === 4) {
callback(r.response)
}
}
r.send()
}
const loadMaterials = function () {
let imageUrl = 'https://raw.githubusercontent.com/AC-YoY/JS_Renderer/master/illidan.image'
let image3dUrl = 'https://raw.githubusercontent.com/AC-YoY/JS_Renderer/master/illidan.3d'
ajaxGet(image3dUrl, (image3d) => {
ajaxGet(imageUrl, (image) => {
let d = {
image3d: image3d,
image: image,
}
let e = new CustomEvent('materials_loaded', {detail: d})
window.dispatchEvent(e)
})
})
}
__main()
</script>
</body>
</html>