title: rotate sphere in three.js so that mapped image of globe matches GeoJSON that is also shown in three.js
body: <p>I have created a globe in three.js and am using an image mapped to the sphere.</p>
  
  <p>On top of this, I'm using the <a href="https://github.com/jdomingu/ThreeGeoJSON" rel="nofollow noreferrer">ThreeGeoJSON library</a> to render geojson data.</p>
  
  <p>However the geographies don't match up. 
  <a href="https://i.stack.imgur.com/nNjvz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nNjvz.png" alt="three.js globe"></a></p>
  
  <p>I need to rotate the globe with the mapped image so that they align, but I can't figure out how to do so. I tried setting a quaternion variable and rotating based on that, but can't get it working. Any help or pointers would be very much appreciated.</p>
  
  <p>Here you can see a working version of what I've done so far:
  <a href="http://bl.ocks.org/jhubley/8450d7b0df0a4a9fd8ce52d1775515d5" rel="nofollow noreferrer">http://bl.ocks.org/jhubley/8450d7b0df0a4a9fd8ce52d1775515d5</a></p>
  
  <p>All of the code, images, data here:
  <a href="https://gist.github.com/jhubley/8450d7b0df0a4a9fd8ce52d1775515d5" rel="nofollow noreferrer">https://gist.github.com/jhubley/8450d7b0df0a4a9fd8ce52d1775515d5</a></p>
  
  <p>I've also pasted the index.html below.</p>
  
  <pre><code>    &lt;html&gt;
          &lt;head&gt;
              &lt;title&gt;ThreeGeoJSON&lt;/title&gt;
  
              &lt;script src="threeGeoJSON.js"&gt;&lt;/script&gt;
  
              &lt;!-- Three.js library, movement controls, and jquery for the geojson--&gt;
              &lt;script src="three.min.js"&gt;&lt;/script&gt;
              &lt;script src="TrackballControls.js"&gt;&lt;/script&gt;
              &lt;script src="jquery-1.10.2.min.js"&gt;&lt;/script&gt;
          &lt;/head&gt;
          &lt;body&gt;
          &lt;script type="text/JavaScript"&gt;
                var width  = window.innerWidth,
                  height = window.innerHeight;
  
                // Earth params
                var radius   = 9.99,
                  segments = 32,
                  rotation = 0 ;
  
                  //New scene and camera
                  var scene = new THREE.Scene();
                  var camera = new THREE.PerspectiveCamera(55, width / height, 0.01, 1000);
                  camera.position.z = 1;
                  camera.position.x = -.2;
                  camera.position.y = .5;
  
                  //New Renderer
                  var renderer = new THREE.WebGLRenderer();
                  renderer.setSize(width, height);
                  document.body.appendChild(renderer.domElement);
  
                  //Add lighting
                  scene.add(new THREE.AmbientLight(0x333333));
  
                  var light = new THREE.DirectionalLight(0xe4eef9, .7);
                  light.position.set(12,12,8);
                  scene.add(light);
  
                  var quaternion = new THREE.Quaternion();
                  quaternion.setFromAxisAngle( new THREE.Vector3( 0, 1, 0 ), Math.PI / 2 );
  
  
  
                  var sphere = createSphere(radius, segments);
                  //sphere.rotation.y = rotation;
                  sphere.rotation = new THREE.Euler().setFromQuaternion( quaternion );
  
                  scene.add(sphere)
  
                  //Create a sphere to make visualization easier.
                  var geometry = new THREE.SphereGeometry(10, 32, 32);
                  var material = new THREE.MeshPhongMaterial({
                      //wireframe: true,
                      //transparent: true
                  });
  
                  function createSphere(radius, segments) {
                    return new THREE.Mesh(
                      new THREE.SphereGeometry(radius, segments, segments),
                      new THREE.MeshPhongMaterial({
                        map:         THREE.ImageUtils.loadTexture('relief.jpg'),
                        bumpMap:     THREE.ImageUtils.loadTexture('elev_bump_4k.jpg'),
                        bumpScale:   0.005,
                        specularMap: THREE.ImageUtils.loadTexture('wateretopo.png'),
                        specular:    new THREE.Color('grey')
                      })
                    );
                  }
  
                  var clouds = createClouds(radius, segments);
                  clouds.rotation.y = rotation;
                  scene.add(clouds)
  
                  function createClouds(radius, segments) {
                    return new THREE.Mesh(
                      new THREE.SphereGeometry(radius + .003, segments, segments),
                      new THREE.MeshPhongMaterial({
                        map:         THREE.ImageUtils.loadTexture('n_amer_clouds.png'),
                        transparent: true
                      })
                    );
                  }
  
                  //Draw the GeoJSON
                  var test_json = $.getJSON("countries_states.geojson", function(data) {
  
                      drawThreeGeo(data, 10, 'sphere', {
                          color: 'red'
                      })
                  });
  
                  //Draw the GeoJSON loggerhead data
                  var test_json = $.getJSON("loggerhead-distro-cec-any.json", function(data) {
                      drawThreeGeo(data, 10, 'sphere', {
                          color: 'blue'
                      })
                  });
  
                  //Set the camera position
                  camera.position.z = 30;
  
                  //Enable controls
                  var controls = new THREE.TrackballControls(camera);
  
                  //Render the image
                  function render() {
                      controls.update();
                      requestAnimationFrame(render);
                      renderer.render(scene, camera);
                  }
  
                  render();
              &lt;/script&gt;
        &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>