three-globe SphereBufferGeometry/Mesh is offset on globe, but lines up if flat

Question

I have a three-globe, and lat/long points perfectly go to the correct locations. The base (Earth) map is 1600x800.

However, I also have a RainViewer map (storm radar) which is square (4096x4096). If I scale that to 1600x1600 and overlay the Earth map, it fits perfectly lined up (top 800 and bottom 800 are outside the boundaries, but that is blank anyway, so perfect).

When I use the TextureLoader/SphereBufferGeometry/MeshPhongMaterial/Mesh, and add it to the scene, it locates itself completely in the wrong spot. No amount of rotateX/Y/Z, or phi/theta shifting seems to work to get it to position correctly.

How can one map this correctly on the globe?

Relevant code (url hardcoded to a timestamp for clarity):

    this.myGlobe = new ThreeGlobe()
      .globeImageUrl(myImageUrl)
      .polygonsData(this.polyData)
      .pointsData(gData)
      .pointColor('color');

    const renderer = new THREE.WebGLRenderer();
    console.log('width=' + width);
    renderer.setSize(width, width / 2);
    document.getElementById('globeViz').appendChild(renderer.domElement);

    const myScene = new THREE.Scene();
    myScene.add(this.myGlobe);
    myScene.add(new THREE.AmbientLight(0xbbbbbb));
    myScene.add(new THREE.DirectionalLight(0xffffff, 0.6));

    const camera = new THREE.PerspectiveCamera();
    camera.aspect = 2;  //window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    camera.translateZ(300);

    const globeMaterial = new THREE.MeshPhongMaterial();
    globeMaterial.bumpScale = 10;
    new THREE.TextureLoader().load('//unpkg.com/three-globe/example/img/earth-water.png',
      texture => {
        globeMaterial.specularMap = texture;
        globeMaterial.specular = new THREE.Color('grey');
        globeMaterial.shininess = 15;
      });

    this.myGlobe.globeMaterial = globeMaterial;

    new THREE.TextureLoader().load('https://tilecache.rainviewer.com/v2/radar/1652860800/4096/2/0_1.png',
      cloudsTexture => {
        const geo = new THREE.SphereBufferGeometry(this.myGlobe.getGlobeRadius() * (1 + 0.004), 80, 80);
        const mesh = new THREE.MeshPhongMaterial({ map: cloudsTexture, transparent: true });
        const weather = new THREE.Mesh(geo, mesh);

        myScene.add(weather);
      });

Correct placement:

In color (harder to see) to show apples-to-apples:

Incorrect placement when Globified:

Answer 1

I believe Marquizzo is correct in the comments, one of the projected images is rotated 90 degrees (plus or minus, but probably minus in your case) compared to the other. Since you said that your earth map is not rotated at all, this means the RainViewer map is.

This is consistent with how other NASA weather maps I recently projected on my own Earth globe had to be dealt with - in my case, the cloud cover simulation movie applied on the globe started with the prime meridian aka 0 degree of longitude to the left side of the image (instead of being positioned in the horizontal middle of the image as its customary in nearly all maps), and I'm guessing something similar is happening here, except for the direction of the angle needed to make it look right.

The assumption is supported by the fact that in your screenshots, the big orange spot that should be positioned close to the North American Great Lakes (i.e. 90 degrees West) is placed precisely on the prime meridian (i.e. 0 degrees of longitude). Yup, I know this thanks to my own globe... :)

To (partially, see below) fix this, you should construct your geometry so that the phiStart parameter of the constructor is set to the correct rotation angle, something like:

const geo = new THREE.SphereBufferGeometry(this.myGlobe.getGlobeRadius() * (1 + 0.004), 80, 80, - Math.PI / 2);

This will project the map starting from 90 degrees to the "left" as its left side, if this makes sense.

That being said, I don't think this is the entire extent of the issue, because that orange spot is also displaced at around 23 degrees of latitude North (i.e. at the Tropic of Cancer in your Globified screenshot) compared to the correct 46 degrees of latitude North (i.e. more or less where the left side of Lake Superior lies). This fits well with the fact that the projected image is a 1600 x 1600 px square, instead of an expected 1600 x 800 px rectangle, as the most probable cause of the latitudinal aka vertical displacement, so you might want to appropriately "crop" the RainViewer map to have the expected 2:1 horizontal to vertical size that's expected from a plane projection on a sphere. You could probably use the thetaStart and thetaLength parameters of the sphere geometry constructor to adjust things here as well, if that yields what you want.

Or, it might just be that both the longitudinal and latitudinal displacements are somehow caused by the usage of a 1600 x 1600 px square image source instead of a 1600 x 800 px one. The cause of the issue shouldn't affect the way it can be fixed though.