-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
98 lines (90 loc) · 8.31 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
<html><head>
<title>GALLERY</title>
<link rel="stylesheet" type="text/css" href="fancybox\dist\jquery.fancybox.min.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/aframe.min.js"></script>
<script src="js/build1.js"></script><!--for text -->
<script src="js/build2.js"></script><!--for audio bars -->
<script src="js/aframe-orbit-controls-component.js"></script>
<script src="js/kframe/aframe-look-at-component.min.js"></script>
<script src="js/isvr-vr-mode.js"></script>
<script src="js/isvr-model-center.js"></script>
<script src="js/isvr-hotspot.js"></script>
<script src="js/isvr-annotation.js"></script>
<script src="js/isvr-teleportation.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
</head>
<body class="a-body " >
<div id="snackbar">Scroll around the screen to explore more</div>
<a-scene vr-mode-ui="enabled: false">
<a-assets>
<img id="pink" src="https://img.gs/bbdkhfbzkk/stretch/http://i.imgur.com/1hyyIUi.jpg" crossorigin="anonymous">
<img src="https://img.gs/bbdkhfbzkk/2048x1024,stretch/http://i.imgur.com/WMNH2OF.jpg" id="chrome" crossorigin="anonymous">
<a-mixin id="bar" geometry="primitive: box;width:3;depth:3;height:7;"></a-mixin>
</a-assets>
<!--camera-->
<a-entity id="camera" camera="fov:60" position="10 10 0" cursor="rayOrigin:mouse" orbit-controls="
maxPolarAngle:3.142;
target:#model;
minDistance:18;
maxDistance:35" raycaster="origin:4.981809616088867 2.0047125816345215 0.3100601136684418;direction:-0.9625493654871191 -0.11539700112136334 -0.24532071076967893;useWorldCoordinates:true">
</a-entity>
<!--model-->
<a-entity>
<a-curvedimage src="img/bg/pic1.png" radius="20" theta-length="28" position="0 -1 0" height="9" theta-start="0"></a-curvedimage>
<a-curvedimage src="img/bg/pic2.png" radius="20" theta-length="28" position="0 -1 0" height="9" theta-start="30"></a-curvedimage>
<a-curvedimage src="img/bg/pic3.png" radius="20" theta-length="28" position="0 -1 0" height="9" theta-start="60"></a-curvedimage>
<a-curvedimage src="img/bg/pic4.png" radius="20" theta-length="28" position="0 -1 0" height="9" theta-start="90"></a-curvedimage>
<a-curvedimage src="img/bg/pic5.jpg" radius="20" theta-length="28" position="0 -1 0" height="9" theta-start="120"></a-curvedimage>
<a-curvedimage src="img/bg/pic6.png" radius="20" theta-length="28" position="0 -1 0" height="9" theta-start="150"></a-curvedimage>
<a-curvedimage src="img/bg/pic7.png" radius="20" theta-length="28" position="0 -1 0" height="9" theta-start="180"></a-curvedimage>
<a-curvedimage src="img/bg/pic8.png" radius="20" theta-length="28" position="0 -1 0" height="9" theta-start="210"></a-curvedimage>
<a-curvedimage src="img/bg/pic9.png" radius="20" theta-length="28" position="0 -1 0" height="9" theta-start="240"></a-curvedimage>
<a-curvedimage src="img/bg/pic10.png" radius="20" theta-length="28" position="0 -1 0" height="9" theta-start="270"></a-curvedimage>
<a-curvedimage src="img/bg/pic11.png" radius="20" theta-length="28" position="0 -1 0" height="9" theta-start="300"></a-curvedimage>
<a-curvedimage src="img/bg/pic12.jpg" radius="20" theta-length="28" position="0 -1 0" height="9" theta-start="330"></a-curvedimage>
<a-curvedimage src="img/bg/pic13.jpg" radius="20" theta-length="28" position="0 -1 0" height="9" theta-start="330"></a-curvedimage>
<a-curvedimage src="img/bg/pic14.jpg" radius="20" theta-length="28" position="0 -1 0" height="9" theta-start="330"></a-curvedimage>
<a-animation attribute="rotation" from="0 0 0" to="0 360 0" dur="30000" easing="linear" repeat="indefinite"></a-animation>
</a-entity>
<a-entity>
<a-curvedimage src="img/bg/pic28.jpg" radius="20" theta-length="28" position="0 10 0" height="9" theta-start="0"></a-curvedimage>
<a-curvedimage src="img/bg/pic29.jpg" radius="20" theta-length="28" position="0 10 0" height="9" theta-start="30"></a-curvedimage>
<a-curvedimage src="img/bg/pic30.jpg" radius="20" theta-length="28" position="0 10 0" height="9" theta-start="60"></a-curvedimage>
<a-curvedimage src="img/bg/pic31.jpg" radius="20" theta-length="28" position="0 10 0" height="9" theta-start="90"></a-curvedimage>
<a-curvedimage src="img/bg/pic32.jpg" radius="20" theta-length="28" position="0 10 0" height="9" theta-start="120"></a-curvedimage>
<a-curvedimage src="img/bg/pic36.jpg" radius="20" theta-length="28" position="0 10 0" height="9" theta-start="150"></a-curvedimage>
<a-curvedimage src="img/bg/pic34.jpg" radius="20" theta-length="28" position="0 10 0" height="9" theta-start="180"></a-curvedimage>
<a-curvedimage src="img/bg/pic35.jpg" radius="20" theta-length="28" position="0 10 0" height="9" theta-start="210"></a-curvedimage>
<a-curvedimage src="img/bg/pic36.jpg" radius="20" theta-length="28" position="0 10 0" height="9" theta-start="240"></a-curvedimage>
<a-curvedimage src="img/bg/pic37.jpg" radius="20" theta-length="28" position="0 10 0" height="9" theta-start="270"></a-curvedimage>
<a-curvedimage src="img/bg/pic38.jpg" radius="20" theta-length="28" position="0 10 0" height="9" theta-start="300"></a-curvedimage>
<a-curvedimage src="img/bg/pic39.jpg" radius="20" theta-length="28" position="0 10 0" height="9" theta-start="330"></a-curvedimage>
<a-curvedimage src="img/bg/pic40.jpg" radius="20" theta-length="28" position="0 10 0" height="9" theta-start="330"></a-curvedimage>
<a-curvedimage src="img/bg/pic1.png" radius="20" theta-length="28" position="0 10 0" height="9" theta-start="330"></a-curvedimage>
<a-animation attribute="rotation" from="0 0 0" to="0 -360 0" dur="30000" easing="linear" repeat="indefinite"></a-animation>
</a-entity><a-entity>
<a-curvedimage src="img/bg/pic14.jpg" radius="20" theta-length="28" position="0 -12 0" height="9" theta-start="0"></a-curvedimage>
<a-curvedimage src="img/bg/pic15.jpg" radius="20" theta-length="28" position="0 -12 0" height="9" theta-start="30"></a-curvedimage>
<a-curvedimage src="img/bg/pic16.jpg" radius="20" theta-length="28" position="0 -12 0" height="9" theta-start="60"></a-curvedimage>
<a-curvedimage src="img/bg/pic17.jpg" radius="20" theta-length="28" position="0 -12 0" height="9" theta-start="90"></a-curvedimage>
<a-curvedimage src="img/bg/pic18.jpg" radius="20" theta-length="28" position="0 -12 0" height="9" theta-start="120"></a-curvedimage>
<a-curvedimage src="img/bg/pic19.jpg" radius="20" theta-length="28" position="0 -12 0" height="9" theta-start="150"></a-curvedimage>
<a-curvedimage src="img/bg/pic20.jpg" radius="20" theta-length="28" position="0 -12 0" height="9" theta-start="180"></a-curvedimage>
<a-curvedimage src="img/bg/pic21.jpg" radius="20" theta-length="28" position="0 -12 0" height="9" theta-start="210"></a-curvedimage>
<a-curvedimage src="img/bg/pic22.jpg" radius="20" theta-length="28" position="0 -12 0" height="9" theta-start="240"></a-curvedimage>
<a-curvedimage src="img/bg/pic23.jpg" radius="20" theta-length="28" position="0 -12 0" height="9" theta-start="270"></a-curvedimage>
<a-curvedimage src="img/bg/pic24.jpg" radius="20" theta-length="28" position="0 -12 0" height="9" theta-start="300"></a-curvedimage>
<a-curvedimage src="img/bg/pic125.jpg" radius="20" theta-length="28" position="0 -12 0" height="9" theta-start="330"></a-curvedimage>
<a-curvedimage src="img/bg/pic26.jpg" radius="20" theta-length="28" position="0 -12 0" height="9" theta-start="330"></a-curvedimage>
<a-curvedimage src="img/bg/pic27.jpg" radius="20" theta-length="28" position="0 -12 0" height="9" theta-start="330"></a-curvedimage>
<a-animation attribute="rotation" from="0 0 0" to="0 -360 0" dur="30000" easing="linear" repeat="indefinite"></a-animation>
</a-entity>
<a-entity light="color:#BBB;type:ambient" data-aframe-default-light="" aframe-injected=""></a-entity>
<a-entity light="intensity:0.6" position="-0.5 1 1" data-aframe-default-light="" aframe-injected=""></a-entity>
<a-entity id="model">
<a-box position="0 0.5 0" width="35" height="35" depth="35" side="back" src="https://media.giphy.com/media/eVDhIjJqFjvJC/giphy.gif" color="#FFF"></a-box>
</a-entity>
</a-scene>
</body>
</html>