ajs5710.github.io/locatesonde.html at master · ajs5710/ajs5710.github.io · GitHub

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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<!-- created following the location based example from the documentation for the library found here: https://ar-js-org.github.io/AR.js-Docs/ -->
<html>
  <head>
    <title>Location Based AR of SondeHub API points</title>

    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
    <script type='text/javascript' src='https://raw.githack.com/AR-js-org/AR.js/3.4.5/three.js/build/ar-threex-location-only.js'></script>
    <script type='text/javascript' src='https://raw.githack.com/AR-js-org/AR.js/3.4.5/aframe/build/aframe-ar.js'></script>

    <script>
      window.onload = () => {
        let points = staticLoadPlaces();
          renderPlaces(points);
        };

        // has to be a better way to do this but I'm not seeing it
        // the altitude in meters // default to ~altitude of chicago
        let camAltitude = 180;
        let setCamAltitude = function(){
          navigator.geolocation.getCurrentPosition(function(coords){
            camAltitude = coords.altitude;
          });
        }
        // update the stored height of the camera every so often
        setInterval(setCamAltitude, 10000);

        // const getCoords = async () => {
        //   const pos = await new Promise((resolve, reject) => {
        //     navigator.geolocation.getCurrentPosition(resolve, reject);
        //   });

        //   return pos.coords;
        // };

        function staticLoadPlaces() {
          return [
            {
              name: 'house',
              color: 'green',
              location: {
                lat: 41.8377295,
                lng: -87.6562099,
                alt: 182
              }
            },
            // {
            //   name: 'test',
            //   color: 'red',
            //   location: {
            //     lat: 41.8377295,
            //     lng: -87.6562099,
            //   }
            // },
            {
              name: 'maria\'s',
              color: 'blue',
              location: {
                lat: 41.8379652,
                lng: -87.6513216,
                alt: 182
              }
            },
            {
              name: 'navy pier',
              color: 'blue',
              location: {
                lat: 41.8412918,
                lng: -87.6242473,
                alt: 182
              }
            }
          ];
        }

        AFRAME.registerComponent('fixed-altitude-gps-place', {
          schema: {
            latitude: { type: 'number', default: 0 },
            longitude: { type: 'number', default: 0 },
            altitude: { type: 'number', default: 0 } // Fixed altitude in meters
          },

          init: function () {
            this.el.getAttribute('position').y = this.data.altitude - camAltitude;

            this.el.setAttribute('gps-new-entity-place', {
              latitude: this.data.latitude,
              longitude: this.data.longitude
            });
          },

          update: function () {
            this.el.getAttribute('position').y = this.data.altitude - camAltitude;

            this.el.setAttribute('gps-new-entity-place', {
                latitude: this.data.latitude,
                longitude: this.data.longitude
            });
          }
        });

        // <a-entity material='color: red' geometry='primitive: box' gps-new-entity-place="latitude: <add-your-latitude>; longitude: <add-your-longitude>" scale="10 10 10"></a-entity>
        // <a-entity material="color: red" geometry="primitive: box" gps-new-entity-place="latitude: 41.8377295; longitude: -87.6562099; position: 0 10 0" scale="10 10 10"></a-entity>
        // <a-entity fixed-altitude-gps-place="latitude: 37.7749; longitude: -122.4194; altitude: 100" geometry="primitive: box; height: 5; width: 5; depth: 5" material="color: red"></a-entity>
        function renderPlaces(points) {
          let scene = document.getElementById("world-scene");
          let camera = document.getElementById("world-camera");

          let camAltitude = camera.getAttribute("position").y;
          // alert(camAltitude);
          points.forEach((point) => {
            let model = document.createElement('a-entity');
            model.setAttribute('fixed-altitude-gps-place', `latitude: ${point.location.lat}; longitude: ${point.location.lng}; altitude: ${point.location.alt}`);
            model.setAttribute('geometry', 'primitive: sphere');
            model.setAttribute('material', `color: ${point.color}`);
            model.setAttribute('position', '0 10 0');
            model.setAttribute('scale', '10 10 10');
            model.setAttribute('look-at', '[gps-new-camera]');

            model.addEventListener('loaded', () => {
              window.dispatchEvent(new CustomEvent('fixed-altitude-gps-place-loaded'))
            });

            scene.appendChild(model);
          });
        }

        // const coords = await getCoords();
    </script>
  </head>
  <body>
    <a-scene id='world-scene' vr-mode-ui='enabled: false' arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: false' renderer='antialias: true; alpha: true'>
      <a-camera id='world-camera' gps-new-camera='gpsMinDistance: 5'></a-camera>
      <a-entity material="color: red" geometry="primitive: box" gps-new-entity-place="latitude: 41.8377295; longitude: -87.6562099" position="0 10 0" scale="10 10 10"></a-entity>
    </a-scene>
  </body>
</html>