forked from 321C4/aframe-link-demo
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
113 lines (103 loc) · 6.4 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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
html, body { background: #000; }
a-scene { transition: 1s opacity ease-in-out, 1s visibility ease-in-out; }
a-scene:not([data-is-loaded="true"]) { opacity: 0; pointer-events: none; transition: none; visibility: visible; }
a-scene[data-is-loaded="true"] { opacity: 1; pointer-events: auto; visibility: visible; }
</style>
<script src="sw-load.js" data-service-worker="sw.js" data-service-worker-scope="./"></script>
<!-- preload is currently supported in only Chrome -->
<link rel="preload" href="pages/desert.html">
<link rel="preload" href="pages/link-vending-machine.html">
<link rel="preload" href="pages/office1-mountain.html">
<link rel="preload" href="pages/office2-floating.html">
<!-- prefetch is currently supported in Chrome, Edge, Firefox -->
<link rel="prefetch" href="pages/desert.html">
<link rel="prefetch" href="pages/link-vending-machine.html">
<link rel="prefetch" href="pages/office1-mountain.html">
<link rel="prefetch" href="pages/office2-floating.html">
<title>Lobby | A-Frame Link Demo</title>
<script src="js/vendor/aframe.min.js"></script>
<script src="js/vendor/aframe-bmfont-text-component.min.js"></script>
<script src="js/aframe-hyperlink.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<!--asset-item can include geometry, models, and materials-->
<a-asset-item id="lobby-courtyard" src="models/lobby-courtyard-2.dae"></a-asset-item>
<a-asset-item id="mesquite-tree" src="models/mesquite.dae"></a-asset-item>
<a-mixin id="link-shape" geometry="primitive: sphere"></a-mixin>
<a-mixin id="hover-color" material="color: blue"></a-mixin>
<a-mixin id="link-color" material="color: #8A8A8"></a-mixin>
<img id="desert-orbicon" src="img/desert-orbicon.png">
<img id="mt-office-orbicon" src="img/mt-office-orbicon.png">
<img id="floating-office-orbicon" src="img/floating-office-orbicon.png">
<img id="vending-machine-orbicon" src="img/vending-machine-orbicon.png">
<img id="skymap" src="img/skybox-night1.png">
</a-assets>
<!--..............................................................-->
<a-entity>
<a-camera id="camera" look-controls wasd-controls>
<!-- <a-cursor color="#4CC3D9"></a-cursor> -->
<a-ring radius-outer="0.03" radius-inner="0.02"
position="0 0 -1"
material="color: cyan; shader: flat"
cursor="maxDistance: 30; fuse: true;">
<a-animation begin="click" easing="ease-in" attribute="scale"
fill="backwards" from="0.1 0.1 0.1" to="1 1 1" dur="150"></a-animation>
<a-animation begin="fusing" easing="ease-in" attribute="scale"
fill="forwards" from="1 1 1" to="0.1 0.1 0.1" dur="1500"></a-animation>
</a-ring>
</a-camera>
</a-entity>
<!--..............................................................-->
<!-- Link orb-on-pedestal! -->
<a-entity position="-1 1 -1">
<a-sphere rotation="0 200 0" radius="0.3" material="src: #vending-machine-orbicon; repeat: 1 1; roughness: 2;" color="#ffffff" opacity="1" roughness="0.8" href="pages/link-vending-machine.html">
</a-sphere>
<a-sphere class="highlight" visible="false" radius="0.35" rotation="0 0 0" color="#0000ff" opacity="0.6" roughness="1" metalness="0.5"></a-sphere>
<a-box id="shadow" position="0 -1 0" color="#000" opacity="1" rotation="0 0 0"
scale="0.4 1 0.4"></a-box>
</a-entity>
<!-- Link orb-on-pedestal! -->
<a-entity position="1 1 -1">
<a-sphere rotation="0 180 0" radius="0.3" material="src: #mt-office-orbicon; repeat: 1 1; roughness: 2;" color="#ffffff" opacity="1" roughness="0.8" href="pages/office1-mountain.html">
</a-sphere>
<a-sphere class="highlight" visible="false" radius="0.35" rotation="0 0 0" color="#0000ff" opacity="0.6" roughness="1" metalness="0.5"></a-sphere>
<a-box id="shadow" position="0 -1 0" color="#000" opacity="1" rotation="0 0 0"
scale="0.4 1 0.4"></a-box>
</a-entity>
<!-- Link orb-on-pedestal! -->
<a-entity position="-1 1 1">
<a-sphere radius="0.3" rotation="0 -60 0" material="src: #floating-office-orbicon; repeat: 1 1; roughness: 2;" color="#ffffff" opacity="1" roughness="0.8" href="pages/office2-floating.html">
</a-sphere>
<a-sphere class="highlight" visible="false" radius="0.35" rotation="0 0 0" color="#0000ff" opacity="0.6" roughness="1" metalness="0.5"></a-sphere>
<a-box id="shadow" position="0 -1 0" color="#000" opacity="1" rotation="0 0 0"
scale="0.4 1 0.4"></a-box>
</a-entity>
<!-- Link orb-on-pedestal! -->
<a-entity position="1 1 1" >
<a-sphere radius="0.3" rotation="0 0 0" material="src: #desert-orbicon; repeat: 1 1; roughness: 2;" color="#ffffff" opacity="1" roughness="0.8" href="pages/desert.html">
</a-sphere>
<a-sphere class="highlight" visible="false" radius="0.35" rotation="0 0 0" color="#0000ff" opacity="0.6" roughness="1" metalness="0.5"></a-sphere>
<a-box id="shadow" position="0 -1 0" color="#000" opacity="1" rotation="0 0 0"
scale="0.4 1 0.4"></a-box>
</a-entity>
<!--..............................................................-->
<a-collada-model src="#lobby-courtyard" position="0 0 0" scale="4 4 4"></a-collada-model>
<a-collada-model src="#mesquite-tree" position="-3 0 -3" scale="1 1.5 1" rotation="0 -90 0"></a-collada-model>
<a-collada-model src="#mesquite-tree" position="3 0 -3" scale="1 1.5 1" rotation="0 145 0"></a-collada-model>
<a-collada-model src="#mesquite-tree" position="-3 0 3" scale="1 1.5 1" rotation="0 -90 0"></a-collada-model>
<a-collada-model src="#mesquite-tree" position="3 0 3" scale="1 1.5 1" rotation="0 -289 0"></a-collada-model>
<a-light type="directional" position="3 10 5" color="#7AA6FF" intensity="1"></a-light>
<a-light type="ambient" position="0 2 0" color="#CF9348" intensity="0.4"></a-light>
<a-light type="point" position="0 -1 0" color="#ffffff" intensity="0.5"></a-light>
<a-sky color="#0A1633"></a-sky>
<a-entity position="0 0 0" id="sky" geometry="primitive:sphere; radius:30; phiLength:360; phiStart:0; thetaLength:90" material="shader:flat; side:back; height:2048; src:#skymap; width:2048"></a-entity>
</a-scene>
</body>
</html>