-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
103 lines (89 loc) · 5.84 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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ESC@PE</title>
<script src="js/aframe-v0.6.0.min.js"></script>
<script src="./js/change-color-on-hover"></script>
</head>
<body>
<a-scene>
<a-plane position="0 0 0" rotation="-90 0 0" width="16" height="16" color="#999"></a-plane>
<a-sky color="#DDDDDD"></a-sky>
<!-- <a-light type="directional" color="#FFF" intensity="0.5" position="-1 1 2"></a-light> -->
<a-light type="ambient" color="#FFF" position="0 0 0" intensity="0.4"></a-light>
<a-camera position="0 1 0" rotation="-5 0 0">
<a-entity id="cursor" cursor="fuse: true; fuseTimeout: 2500"
position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.04; radiusOuter: 0.05"
material="color: #018fff; shader: flat">
</a-entity>
</a-camera>
<a-assets>
<a-mixin id="light" geometry="primitive: sphere; radius: 0.1"
material="color: #FFF; shader: flat"
light="color: #DDDDFF; distance: 150; intensity: 0.4; type: point">
</a-mixin>
<a-mixin id="torus-knot" geometry="primitive: torusKnot"
material="color: red"></a-mixin>
</a-assets>
<a-box material="src:img/ceiling.jpg; repeat: 2 0.75;" rotation="0 0 0" position="0 4.5 -6" width="3" depth="0.1" height="1">
<a-text id="timer" color="#018fff" position="0 0.25 0.1" font="mozillavr" value="0:10" align="center" width="12"></a-text>
</a-box>
<a-box id="wall1" material="src:img/wall.jpg; repeat: 4 4;" position="-8 2.5 0" width="16" depth="0.1" height="5" rotation="0 90 0"></a-box>
<a-box id="door1" class="door" src="img/door.jpg" position="-7.9 2 0" width="3" depth="0.1" height="4" rotation="0 90 0">
<a-box class="symbol symbol1" id="symbol1" position="0 0.5 1" width="1.5" depth="0.1" height="0.8">
<a-animation begin="on-focus-start" attribute="scale" from="0.5 0.5 0.5" to="1 1 1" dur="2500"></a-animation>
</a-box>
</a-box>
<a-entity class="light" id="light1" mixin="light" position="-7 4.5 0"></a-entity>
<a-box id="wall2" material="src:img/wall.jpg; repeat: 4 4;" position="0 2.5 -8" width="16" depth="0.1" height="5"></a-box>
<a-box id="door2" class="door" src="img/door.jpg" position="0 2 -7.9" width="3" depth="0.1" height="4">
<a-box class="symbol symbol2" id="symbol2" position="0 0.5 1" width="1.5" depth="0.1" height="0.8">
<a-animation begin="on-focus-start" attribute="scale" from="0.5 0.5 0.5" to="1 1 1" dur="2500"></a-animation>
</a-box>
</a-box>
<a-entity class="light" id="light2" mixin="light" position="0 4.5 -7"></a-entity>
<a-box position="-6.5 2.3 -7.9" src="img/cables.jpg" width="0.2" height="6" depth="0.01"></a-box>
<a-box position="5.5 4 -7.9" src="img/vent-horizontal.jpg" width="2" height="0.75" depth="0.01"></a-box>
<a-box position="-2 2 -7.9" src="img/terminal.jpg" width="0.5" height="1" depth="0.1"></a-box>
<a-box position="7.9 4.3 0" src="img/buttons1.jpg" width="1" height="0.2" depth="0.1" rotation="0 -90 0"></a-box>
<a-box position="-7.9 4.3 0" src="img/buttons2.jpg" width="1" height="0.2" depth="0.1" rotation="0 90 0"></a-box>
<a-box position="-7.9 4 -3" src="img/vent-box.jpg" width="1" height="1" depth="0.1" rotation="0 90 0"></a-box>
<a-box position="7.9 1 -2.5" src="img/box.jpg" width="1" height="1" depth="0.01" rotation="0 -90 0"></a-box>
<a-box id="wall3" material="src:img/wall.jpg; repeat: 4 4;" position="8 2.5 0" width="16" depth="0.1" height="5" rotation="0 -90 0"></a-box>
<a-box id="door3" class="door" src="img/door.jpg" position="7.9 2 0" width="3" depth="0.1" height="4" rotation="0 -90 0">
<a-box class="symbol symbol3" id="symbol3" position="0 0.5 1" width="1.5" depth="0.1" height="0.8">
<a-animation begin="on-focus-start" attribute="scale" from="0.5 0.5 0.5" to="1 1 1" dur="2500"></a-animation>
</a-box>
</a-box>
<a-entity class="light" id="light3" mixin="light" position="7 4.5 0"></a-entity>
<a-box id="wall4" material="src:img/wall.jpg; repeat: 4 4;" position="0 2.5 8" width="16" depth="0.1" height="5"></a-box>
<a-box id="floor" material="src:img/floor.jpg; repeat: 10 10;" position="0 0 0" width="16" depth="0.1" height="16" rotation="90 -90 0"></a-box>
<!-- <a-box id="water" material="src:img/water.jpg; repeat: 10 10;" position="0 -0.2 0" width="16" depth="0.1" height="16" rotation="90 -90 0">
<a-animation attribute="position"end="dupa" dur="28000" delay="5000" easing="linear" from="0 -0.1 0" to="0 2 0"></a-animation>
</a-box> -->
<a-box id="roof" material="src:img/ceiling.jpg; repeat: 5 5;" position="0 5 0" width="16" depth="0.1" height="16" rotation="270 -90 0"></a-box>
<a-box id="overlay" color="#000" position="0 2.5 -1" width="10" height="5" depth="0.1" rotation="0 -5 0">
<a-animation begin="light-on" attribute="opacity" dur="2000" delay="2000" easing="linear" from="1" to="0"></a-animation>
<a-animation begin="light-off" attribute="opacity" dur="1000" easing="linear" from="0" to="1"></a-animation>
</a-box>
<a-box id="electricity-death" src="./img/electricity-death.jpg" position="0 2.5 -0.6" width="1.5" depth="0.1" height="0.8" opacity="0" rotation="-5 0 0">
</a-box>
<a-box id="drown-death" src="./img/drown-death.jpg" position="0 2.5 -0.6" width="1.5" depth="0.1" height="0.8" opacity="0" rotation="-5 0 0">
</a-box>
<a-box id="win" src="./img/win.jpg" position="0 2.5 -0.6" width="1.5" depth="0.1" height="0.8" opacity="0" rotation="-5 0 0">
</a-box>
</a-scene>
<script src="./js/setup.js" charset="utf-8"></script>
<script>
document.addEventListener('DOMContentLoaded', function(){
function render() {
requestAnimationFrame(render);
}
render();
setup(['./img/symbol-s1-v','./img/symbol-s2-v','./img/symbol-s3-v','./img/symbol-s4-v','./img/symbol-s5-v',], 3, 33);
})
</script>
</body>
</html>