-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
87 lines (68 loc) · 2.83 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
<!DOCTYPE html>
<html>
<head>
<title>A-Start: MITT presentation</title>
<meta name="description" content="A-Frame Examples">
<script src="js/aframe.1.1.0.min.js"></script>
<script src="js/aframe-environment-component.min.js"></script>
<script src="js/a_star.js"></script>
<script src="js/ui_3d.js"></script>
<script>
window.onload = function () {
const aStar = new A_star_3d();
const ui = UI_3D();
aStar.setCode(ui.Object_3d.Start, 50, 36);
aStar.setCode(ui.Object_3d.Wall, 50, 43);
aStar.setCode(ui.Object_3d.Goal, 50, 59);
ui.initMap(aStar.getDate())
const buildPath_3d = ()=>{
const starts = aStar.findCode(ui.Object_3d.Start)
const goals = aStar.findCode(ui.Object_3d.Goal)
if(starts.length==1 && goals.length==1){
ui.removeLines()
const steps = aStar.findPath(starts[0], goals[0]);
ui.addLines(steps)
}
}
ui.addCaseListener((x, y) => {
console.log('addCase:', x, y)
aStar.setCode(ui.Object_3d.Wall, x, y);
buildPath_3d()
})
ui.removeCaseListener((x, y) => {
console.log('removeCase:', [x, y])
aStar.setCode(ui.Object_3d.Empty, x, y);
buildPath_3d()
})
ui.removeSphereListener((x, y, name) => {
console.log('removeSphere:', [x, y, name])
aStar.setCode(ui.Object_3d.Empty, x, y);
ui.removeLines()
})
ui.addSphereListener((x, y, name) => {
console.log('addSphere:', [x, y, name])
if (name === 'start') {
aStar.setCode(ui.Object_3d.Start, x, y);
buildPath_3d()
} else if (name === 'goal') {
aStar.setCode(ui.Object_3d.Goal, x, y);
buildPath_3d()
}
})
}
</script>
</head>
<body>
<a-scene cursor="rayOrigin: mouse">
<a-entity classname="map" environment="preset: default; groundColor: #445; grid: cross"></a-entity>
<a-assets>
<img id="crate" src="images/crate.jpg">
</a-assets>
<a-camera id="player" position="0 10 0" wasd-controls="fly:true" look-controls></a-camera>
<!-- <a-box classname='box' position="1 1 1" depth="2" height="2" width="2" material="src: #crate"></a-box>-->
<!-- <a-sphere classname='start' position="9 0.5 -5" radius="0.5" color="red"></a-sphere>-->
<!-- <a-sphere classname='goal' position="11 0.5 -5" radius="0.5" color="yellow"></a-sphere>-->
<!-- <a-entity classname='line' line="start: 9 0.5 -5; end: 11 0.5 -5; color: red"></a-entity>-->
</a-scene>
</body>
</html>