Hugging Face's logo

Spaces:
awacke1
/
HTML5-3D-Map-Hospitals
Running

App Files Community
awacke1 commited on
Commit
06128ad
·
1 Parent(s): f526999

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +37 -118
index.html CHANGED
@@ -1,122 +1,41 @@
1
  <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8">
5
- <title>Laser input UI</title>
6
- <meta name="description" content="Laser input UI • A-Frame">
7
- <script src="../../../dist/aframe-master.js"></script>
8
- <script src="https://unpkg.com/aframe-environment-component@1.3.0/dist/aframe-environment-component.min.js"></script>
9
- <script src="../../js/info-message.js"></script>
10
- <script src="highlight.js"></script>
11
- <script src="info-panel.js"></script>
12
- </head>
13
- <body>
14
- <a-scene
15
- background="color: #212"
16
- environment
17
- cursor="rayOrigin: mouse; fuse: false" raycaster="objects: .raycastable"
18
- info-message="htmlSrc: #messageText">
19
- <a-assets>
20
- <a-asset-item id="messageText" src="message.html"></a-asset-item>
21
- <!--
22
- Image source: http://www.ghibli.jp/works/kazetachinu/#frame&gid=1&pid=1
23
- Image author: Studio Ghibli
24
- -->
25
- <img id="kazetachinu" src="https://cdn.aframe.io/examples/ui/kazetachinu.jpg" crossorigin="anonymous"/>
26
- <img id="kazetachinuPoster" src="https://cdn.aframe.io/examples/ui/kazetachinuPoster.jpg" crossorigin="anonymous"/>
27
- <!--
28
- Image source: http://www.ghibli.jp/works/ponyo/#frame&gid=1&pid=36
29
- Image author: Studio Ghibli
30
- -->
31
- <img id="ponyo" src="https://cdn.aframe.io/examples/ui/ponyo.jpg" crossorigin="anonymous"/>
32
- <img id="ponyoPoster" src="https://cdn.aframe.io/examples/ui/ponyoPoster.jpg" crossorigin="anonymous"/>
33
- <!--
34
- Image source: http://www.ghibli.jp/works/karigurashi/#frame&gid=1&pid=32
35
- Image author: Studio Ghibli
36
- -->
37
- <img id="karigurashi" src="https://cdn.aframe.io/examples/ui/karigurashi.jpg" crossorigin="anonymous"/>
38
- <img id="karigurashiPoster" src="https://cdn.aframe.io/examples/ui/karigurashiPoster.jpg" crossorigin="anonymous"/>
39
- <a-mixin
40
- id="frame"
41
- geometry="primitive: plane; width: 0.5783552; height: 0.8192"
42
- material="color: white; shader: flat"
43
- animation__scale="property: scale; to: 1.2 1.2 1.2; dur: 200; startEvents: mouseenter"
44
- animation__scale_reverse="property: scale; to: 1 1 1; dur: 200; startEvents: mouseleave"
45
- ></a-mixin>
46
- <a-mixin
47
- id="poster"
48
- geometry="primitive: plane; width: 0.544768; height: 0.786432"
49
- material="color: white; shader: flat"
50
- material="shader: flat"
51
- position="0 0 0.005"
52
- ></a-mixin>
53
- <a-mixin
54
- id="movieImage"
55
- geometry="primitive: plane; width: 1.5; height: 0.81"
56
- material="src: #ponyo; shader: flat; transparent: true"
57
- position="0 0.495 0.002"
58
- ></a-mixin>
59
- </a-assets>
60
 
61
- <a-entity
62
- id="background"
63
- position="0 0 0"
64
- geometry="primitive: sphere; radius: 2.0"
65
- material="color: red; side: back; shader: flat"
66
- scale="0.001 0.001 0.001"
67
- visible="false" class="raycastable">
68
- </a-entity>
 
 
 
 
 
69
 
70
- <a-entity
71
- position="0 1.6 0"
72
- camera look-controls="magicWindowTrackingEnabled: false; touchEnabled: false; mouseEnabled: false">
73
- <a-entity
74
- id="fadeBackground"
75
- geometry="primitive: sphere; radius: 2.5"
76
- material="color: black; side: back; shader: flat; transparent: true; opacity: 0.6" visible="false">
77
- </a-entity>
78
- </a-entity>
79
 
80
- <!-- Hand controls -->
81
- <a-entity id="leftHand" laser-controls="hand: left" raycaster="objects: .raycastable"></a-entity>
82
- <a-entity id="rightHand" laser-controls="hand: right" raycaster="objects: .raycastable" line="color: #118A7E"></a-entity>
83
-
84
- <a-entity id="ui" position="0 1.6 -2.5">
85
- <!-- Poster menu -->
86
- <a-entity id="menu" highlight>
87
- <a-entity id="karigurashiButton" position="-0.8 0 0" mixin="frame" class="raycastable menu-button">
88
- <a-entity material="src: #karigurashiPoster;" mixin="poster"></a-entity>
89
- </a-entity>
90
-
91
- <a-entity id="kazetachinuButton" position="0 0 0" mixin="frame" class="raycastable menu-button">
92
- <a-entity material="src: #kazetachinuPoster" mixin="poster"></a-entity>
93
- </a-entity>
94
-
95
- <a-entity id="ponyoButton" position="0.8 0 0" mixin="frame" class="raycastable menu-button">
96
- <a-entity material="src: #ponyoPoster" mixin="poster"></a-entity>
97
- </a-entity>
98
- </a-entity>
99
-
100
- <!-- Info panel of the selected movie. -->
101
- <a-entity
102
- id="infoPanel"
103
- position="0 0 0.5"
104
- info-panel
105
- visible="false"
106
- scale="0.001 0.001 0.001"
107
- geometry="primitive: plane; width: 1.5; height: 1.8"
108
- material="color: #333333; shader: flat; transparent: false" class="raycastable">
109
- <a-entity id="ponyoMovieImage" mixin="movieImage" material="src: #ponyo" visible="false"></a-entity>
110
- <a-entity id="kazetachinuMovieImage" mixin="movieImage" material="src: #kazetachinu" visible="false"></a-entity>
111
- <a-entity id="karigurashiMovieImage" mixin="movieImage" material="src: #karigurashi" visible="false"></a-entity>
112
- <a-entity id="movieTitle"
113
- position="-0.68 -0.1 0"
114
- text="shader: msdf; anchor: left; width: 1.5; font: https://cdn.aframe.io/examples/ui/Viga-Regular.json; color: white; value: Ponyo (2003)"></a-entity>
115
- <a-entity id="movieDescription"
116
- position="-0.68 -0.2 0"
117
- text="baseline: top; shader: msdf; anchor: left; font: https://cdn.aframe.io/examples/ui/Viga-Regular.json; color: white; value: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."></a-entity>
118
- </a-entity>
119
- </a-entity>
120
- </a-scene>
121
- </body>
122
- </html>
 
1
  <!DOCTYPE html>
2
+ <head>
3
+ <meta charset="utf-8">
4
+ <title>Model Viewer AR - VR</title>
5
+ <meta name="description" content="Model Viewer (VR / AR) • A-Frame">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
7
+ <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
8
+ <script src="info-message.js"></script>
9
+ <script src="https://unpkg.com/aframe-extras@3.3.0/dist/aframe-extras.min.js"></script>
10
+ <script src="hide-on-enter-ar.js"></script>
11
+ <script src="ar-shadows.js"></script>
12
+ <script src="ar-hit-test.js"></script>
13
+ <script src="model-viewer.js"></script>
14
+ <script src="background-gradient.js"></script>
15
+ </head>
16
+ <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
17
 
18
+ <a-scene
19
+ renderer="colorManagement: true;"
20
+ info-message="htmlSrc: #messageText"
21
+ model-viewer="gltfModel: #triceratops; title: Triceratops">
22
+ <a-assets>
23
+ <!--
24
+ Model source: https://sketchfab.com/3d-models/triceratops-d16aabe33dc24f8ab37e3df50c068265
25
+ Model author: https://sketchfab.com/VapTor
26
+ Model license: Sketcfab Standard
27
+ -->
28
+ <a-asset-item id="triceratops"
29
+ src="https://cdn.aframe.io/examples/ar/models/triceratops/scene.gltf"
30
+ response-type="arraybuffer" crossorigin="anonymous"></a-asset-item>
31
 
32
+ <a-asset-item id="reticle"
33
+ src="https://cdn.aframe.io/examples/ar/models/reticle/reticle.gltf"
34
+ response-type="arraybuffer" crossorigin="anonymous"></a-asset-item>
 
 
 
 
 
 
35
 
36
+ <img id="shadow" src="https://cdn.glitch.com/20600112-c04b-492c-8190-8a5ccc06f37d%2Fshadow.png?v=1606338852399"></img>
37
+ <a-asset-item id="messageText" src="message.html"></a-asset-item>
38
+ </a-assets>
39
+ </a-scene>
40
+ </body>
41
+ </html>