search

arvind-iyer / aframe-geothree

MIT License
7 stars 0 forks source link

Getting Started Quick Guide #2

Open kylebakerio opened 1 year ago

kylebakerio commented 1 year ago

I tried the api listed in your demo, but they wanted credit card info, which I wasn't comfortable giving. Doing some diving into the code to see the other options, and a google to see what the best free options were, I found OpenMapTiles, which pointed me to mapTiler.

Getting a free api key there was super easy--but make sure to generate a second one and lock it down to only the URL you are going to expose it on!

Then, glancing in the code, I was able to change the demo to look like this instead:

<!DOCTYPE html>
<html>
  <head>
    <title>GeoTHREE</title>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-geothree-component@1.0.0/dist/aframe-geothree-component.min.js"></script>
  </head>

  <body>
    <a-scene>
      <a-entity geothree="provider: maptiler-satellite; mapTilerApiKey: Bxm1K81eSYBwACh4oG8c"></a-entity>
    </a-scene>
  </body>
</html>

(You'll need to replace it with your own API key, and again, make sure you've generated a second one and edited which domains are allowed to access it!)

I'm throwing this out here for others to see, but happy to pull request this against the readme if you like. Very cool project! I hope it gets updated to 1.3.0.

Is it possible to get 3d terrain? Maybe other APIs have a wider range of LOD and allow getting closer?

Thanks for making this!

arvind-iyer commented 1 year ago

It's been a while, but 3D terrain does work if you have a provider with height information and you set the terrain type to "height". I found "height-shader" doesn't work really well, the map becomes super spiky and weird.

Also need to check in with the original Three.JS library to see if they've made updates to improve 3D maps support