When it comes to transforming an earth-like sphere into a map-like plane, the concept of geometry morphing through vertex displacement proves to be effective. Beginning with THREE.SphereBufferGeometry may not yield optimal results as a polygonal sphere when unwrapped is not exactly a plane.
However, using THREE.PlaneBufferGeometry eliminates such issues. To create the desired object, one can employ a custom ShaderMaterial. This material needs to calculate the morphing of the sphere in the vertex shader (which can either be done on the CPU or passed as another attribute). Transitioning smoothly between two states can be achieved by using a float uniform.
For a practical demonstration of this wrapping technique, refer to this working example with the 77th revision of three.js (use the slider to observe the wrapping effect).
vec3 anglesToSphereCoord(vec2 a, float r)
{
return vec3(
r * sin(a.y) * sin(a.x),
r * cos(a.y),
r * sin(a.y) * cos(a.x)
);
}
void main() {
vec2 angles = M_PI * vec2(2. * uv.x, uv.y - 1.);
vec3 sphPos = anglesToSphereCoord(angles, 0.6);
vec3 wrapPos = mix(position, sphPos, wrapAmountUniform);
gl_Position = projectionMatrix * modelViewMatrix * vec4( wrapPos, 1.0 );
}
It is important to note that the construction of this object is influenced by the position of the camera. To seamlessly blend and avoid visible cuts at any viewing angle, fixing the camera and implementing rotation in the shader (rotating UV coordinates rather than the geometry) can be beneficial. Different projections can also be managed within the shader.