Hugging Face's logo

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

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

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +114 -98
index.html CHANGED
@@ -1,106 +1,122 @@
1
  <!DOCTYPE html>
2
  <html>
3
- <head>
4
- <meta charset="utf-8">
5
- <title>A-Frame Google Maps Example</title>
6
- <meta name="description" content="A-Frame Google Maps Example">
7
- <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
8
- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDybq2mxujekZVivmr03Y5-GGHXesn4TLI"></script>
9
- </head>
10
- <body>
11
- <a-scene>
12
- <a-entity id="camera" position="0 1.6 0">
13
- <a-entity id="rig" position="0 0 0">
14
- <a-entity camera look-controls wasd-controls></a-entity>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  </a-entity>
16
- </a-entity>
17
- <a-sky color="#e5e5e5"></a-sky>
18
- <a-entity id="markers"></a-entity>
19
- </a-scene>
20
 
21
- <script>
22
- // Define hospital locations with latitude and longitude
23
- const hospitals = [
24
- {
25
- name: "Mayo Clinic",
26
- lat: 44.021631,
27
- lng: -92.46298,
28
- },
29
- {
30
- name: "Cleveland Clinic",
31
- lat: 41.504752,
32
- lng: -81.609618,
33
- },
34
- {
35
- name: "Johns Hopkins Hospital",
36
- lat: 39.296677,
37
- lng: -76.592477,
38
- },
39
- {
40
- name: "Massachusetts General Hospital",
41
- lat: 42.362575,
42
- lng: -71.069588,
43
- },
44
- {
45
- name: "UCSF Medical Center",
46
- lat: 37.765188,
47
- lng: -122.457809,
48
- },
49
- {
50
- name: "New York-Presbyterian Hospital",
51
- lat: 40.840726,
52
- lng: -73.950286,
53
- },
54
- {
55
- name: "Brigham and Women's Hospital",
56
- lat: 42.336039,
57
- lng: -71.105804,
58
- },
59
- {
60
- name: "Stanford Health Care-Stanford Hospital",
61
- lat: 37.434647,
62
- lng: -122.176858,
63
- },
64
- {
65
- name: "Hospitals of the University of Pennsylvania-Penn Presbyterian",
66
- lat: 39.951084,
67
- lng: -75.195819,
68
- },
69
- {
70
- name: "Northwestern Memorial Hospital",
71
- lat: 41.896472,
72
- lng: -87.621113,
73
- },
74
- ];
75
 
76
- // Initialize Google Maps
77
- const map = new google.maps.Map(document.createElement("div"), {
78
- center: new google.maps.LatLng(37.7749, -122.4194),
79
- zoom: 5,
80
- disableDefaultUI: true,
81
- });
82
 
83
- // Create A-Frame markers for each hospital
84
- hospitals.forEach(hospital => {
85
- const marker = document.createElement("a-entity");
86
- marker.setAttribute("gps-entity-place", `latitude: ${hospital.lat}; longitude: ${hospital.lng};`);
87
- marker.setAttribute("gltf-model", "https://cdn.aframe.io/examples/ar/models/earth/continents.gltf");
88
- marker.setAttribute("scale", "5 5 5");
89
- marker.setAttribute("look-at", "#camera");
90
- marker.setAttribute("animation", "property: rotation; to: 0 360 0; loop: true; dur: 10000; easing: linear");
91
- document.querySelector("#markers").appendChild(marker);
92
- });
93
- // Add the Google Maps canvas to the A-Frame scene
94
- const canvas = map.getDiv();
95
- canvas.style.position = "absolute";
96
- canvas.style.top = "0";
97
- canvas.style.left = "0";
98
- canvas.style.width = "100%";
99
- canvas.style.height = "100%";
100
- document.querySelector("a-scene").appendChild(canvas);
101
 
102
- // Use GPS Entity component to sync A-Frame camera with Google Maps view
103
- document.querySelector("#camera").setAttribute("gps-entity-place", `latitude: 37.7749; longitude: -122.4194;`);
104
- </script>
105
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
106
  </html>
 
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/[email protected]/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>