-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
116 lines (114 loc) · 3.79 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
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>See3D</title>
<!--<script type="text/javascript" src="release/See3D.min.js"></script>-->
<script type="text/javascript" src="src/index.js"></script>
<script type="text/javascript" src="src/math.js"></script>
<script type="text/javascript" src="src/item.js"></script>
<script type="text/javascript" src="src/pix.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
html, body {
width: 100%;
height: 100%;
}
canvas {
/*background-color: #333;*/
width: 100%;
height: 100%;
display: block;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript">
let game = new See3D(document.getElementById("canvas"));
let scene = new See3D.View.Scene();
let camera = new See3D.View.FreeCamera(new Point3D(0, 5, -50));
let cloth = new See3D.View.Cloth(new See3D.Math3D.Point3D(0, 0, 5), { w: 29, h: 58, acc: 1 });
// let cube = new See3D.View.Cube(new See3D.Math3D.Point3D(0, 0, 5), { w: 15, h: 0.1, d: 15 });
// cube.rotate(new See3D.Math3D.Point3D(Math.PI * 0.25, Math.PI * 0.25, Math.PI * 0.25));
cloth.rotate(new See3D.Math3D.Point3D(0, Math.PI * 0.5, 0));
game.width(window.innerWidth).height(window.innerHeight);
game.scene(scene);
scene.camera(camera);
window.onresize = () => {
game.width(window.innerWidth).height(window.innerHeight);
};
scene.push(cloth);
cloth.load("map.jpeg", 0.05);
// scene.push(cube);
// let radius = 2;
// let updateR = 0.05;
// for (let x = -radius; x <= radius; x += updateR) {
// for (let y = -radius; y <= radius; y += updateR) {
// let z2 = radius * radius - x * x - y * y;
// if (z2 < 0) continue;
// updateR -= 0.0001;
// console.log(x, y, Math.sqrt(z2));
// scene.push(new See3D.View.Cube(new See3D.Math3D.Point3D(x, y, Math.sqrt(z2)), { w: 0.1, h: 0.1, d: 0.1 }));
// scene.push(new See3D.View.Cube(new See3D.Math3D.Point3D(x, y, -Math.sqrt(z2)), { w: 0.1, h: 0.1, d: 0.1 }));
// }
// }
// camera.rotation.x = -Math.PI / 2;
// cloth.maxRadius = 0;
let xS = 0, yS = 0;
let left = false, back = false;
game.showFPS = true;
game.whileRender(function () {
if (xS > 0) xS -= 0.025;
if (yS > 0) yS -= 0.025;
if (back) camera.back(yS);
else camera.forward(yS);
if (left) camera.left(xS);
else camera.right(xS);
});
window.onkeydown = (e) => {
// console.log(e.keyCode);
left = back = false;
switch (e.keyCode) {
case 38:// up
camera.rotation.x += Math.PI / 90;
break;
case 40:// down
camera.rotation.x -= Math.PI / 90;
break;
case 37:// left
camera.rotation.y += Math.PI / 90;
break;
case 39:// right
camera.rotation.y -= Math.PI / 90;
break;
case 87:// w
yS = 1;
camera.forward(yS);
if (yS < 10) yS += 0.05;
break;
case 83:// s
back = true;
yS = 1;
camera.back(yS);
if (yS < 10) yS += 0.05;
break;
case 65:// a
xS = 1;
camera.left(xS);
left = true;
if (xS < 10) xS += 0.05;
break;
case 68:// d
xS = 1;
camera.right(xS);
if (xS < 10) xS += 0.05;
break;
}
};
</script>
</body>
</html>