-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
101 lines (89 loc) · 3.96 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
<!doctype html>
<html>
<head>
<title>A-Frame Switch Scenes</title>
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
<script src="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
<script src="js/aframe.js"></script>
</head>
<body>
<a-scene>
<!--The Assets-->
<a-assets>
<a-asset-item id="home-ply" src="models/home.ply"></a-asset-item>
<img id="sky" src="https://farm5.staticflickr.com/4465/37557293182_d84060aad7_k.jpg">
<img id="farm" src="img/farm.png">
<img id="store" src="img/store.png">
<img id="home" src="img/home.png">
<img id="meeting" src="img/meeting.png">
</a-assets>
<!--The placement of model-->
<a-entity camera position="2 1 10" look-controls wasd-controls>
<a-entity cursor="fuse: true; fuseTimeout: 1000"
position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
material="color: black; shader: flat">
<a-animation begin="click" easing="ease-in" attribute="scale"
fill="backwards" from="0.1 0.1 0.1" to="1 1 1"></a-animation>
<a-animation begin="cursor-fusing" easing="ease-in" attribute="scale"
fill="forwards" from="1 1 1" to="0.1 0.1 0.1"></a-animation>
</a-entity>
</a-entity>
<a-entity id="scene1">
<a-sky src="#sky"></a-sky>
<a-box color="red" position="-6 0 0" onclick="setSceneFarm()"> </a-box>
<a-box color="yellow" position="-2 0 0" onclick="setSceneStore()"> </a-box>
<a-box color="blue" position="2 0 0" onclick="setSceneMeeting()"> </a-box>
<a-box color="green" position="6 0 0" onclick="setSceneHome()"> </a-box>
<a-light id="ambient1" type="ambient" color="#4f6487" >
<a-animation attribute="intensity" begin="aaa" from="0" to="1" delay="100" dur="1000" fill="both"></a-animation>
</a-light>
</a-entity>
<a-entity id="sceneFarm" visible="false">
<a-sky src="#farm"></a-sky>
<a-box color="white" position="0 0 0" onclick="setScene1()"></a-box>
<a-light id="ambient1" type="ambient" color="#4f6487" >
</a-entity>
<a-entity id="sceneStore" visible="false">
<a-sky src="#store"></a-sky>
<a-box color="white" onclick="setScene1()"></a-box>
<a-light id="ambient1" type="ambient" color="#4f6487" >
</a-entity>
<a-entity id="sceneMeeting" visible="false">
<a-sky src="#meeting"></a-sky>
<a-box color="white" onclick="setScene1()"></a-box>
<a-light id="ambient1" type="ambient" color="#4f6487" >
</a-entity>
<a-entity id="sceneHome" visible="false">
<a-sky src="#home"></a-sky>
<a-box color="white" onclick="setScene1()"></a-box>
<a-light id="ambient1" type="ambient" color="#4f6487" >
</a-entity>
</a-scene>
<script type="text/javascript">
function setScene1() {
document.getElementById('scene1').setAttribute('visible', 'true')
document.getElementById('sceneFarm').setAttribute('visible', 'false')
document.getElementById('sceneStore').setAttribute('visible', 'false')
document.getElementById('sceneMeeting').setAttribute('visible', 'false')
document.getElementById('sceneHome').setAttribute('visible', 'false')
}
function setSceneFarm() {
document.getElementById('scene1').setAttribute('visible', 'false')
document.getElementById('sceneFarm').setAttribute('visible', 'true')
}
function setSceneStore() {
document.getElementById('scene1').setAttribute('visible', 'false')
document.getElementById('sceneStore').setAttribute('visible', 'true')
}
function setSceneMeeting() {
document.getElementById('scene1').setAttribute('visible', 'false')
document.getElementById('sceneMeeting').setAttribute('visible', 'true')
}
function setSceneHome() {
document.getElementById('scene1').setAttribute('visible', 'false')
document.getElementById('sceneHome').setAttribute('visible', 'true')
}
</script>
</body>
</html>