title: AR.JS - rotating globe
body: <p>I'm working with AR.JS for the first time and striking a few problems with a simple little animation I'm attempting to get an image of a globe rotating above a HIRO marker.  The below code works:</p>
  
  <pre><code>&lt;script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/examples/vendor/aframe/build/aframe.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"&gt;&lt;/script&gt;
  &lt;body style='margin : 0px; overflow: hidden;'&gt;
         &lt;a-scene embedded arjs='trackingMethod: best;'&gt;
             &lt;a-assets&gt;
          &lt;img id='earth' src='https://raw.githubusercontent.com/aframevr/sample-assets/master/assets/images/space/earth_atmos_4096.jpg'/&gt;
          &lt;img id='earth2' src='http://www.keepthestreak.net/Earth_NZ.jpg'/&gt;
  &lt;/a-assets&gt;
        &lt;a-anchor hit-testing-enabled='true'&gt;
                &lt;a-sphere material='src: #earth;' 
                position="0 0.5 0" radius="1" segments-height="53"&gt;
               &lt;a-animation attribute="rotation"
                 dur="7000"
                 to="0 360 0"
                 easing= "linear"     
                 repeat="indefinite"&gt;
          &lt;/a-animation&gt;
  &lt;/a-sphere&gt;
  &lt;/a-anchor&gt;
  &lt;a-camera-static/&gt;
  &lt;/a-scene&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>The globe also displays from above, so shows mostly the north pole.  I'd like the top point to be the equator so as it revolves you get to see pretty much all of the inhabited world.  I've looked over the <a href="https://aframe.io/docs/0.7.0/primitives/a-sphere.html#sidebar" rel="nofollow noreferrer">client documentation</a> for a-frame and tried to locate a better example of this, but I'm really struggling to figure out how I can rotate it to look at the populated bits of the world instead of the icecaps.</p>
  
  <p><em>A little background on the final desired outcome.</em></p>
  
  <p>What I'm ultimately trying to achieve is an AR overlay of a rotating globe with the users home country highlighted.  To do this I'll need to define multiple source images and change them inline with (presumably) some javascript.</p>
  
  <p>Thanks for your help.</p>