I have been experimenting with combining WebGL earth and d3.geo.satellite projection in my project.
Successfully overlaying the two projections and syncing rotation, I am now facing difficulties in syncing zooming. Every attempt to match their size results in deformation of the WebGL projection while the d3.geo.satellite projection remains unchanged. I have played around with different combinations of projection.scale and projection.distance but haven't found a solution yet.
If you'd like to see the issue for yourself, here is the JSFiddle link (please note that it may take some time to load the resources). You can rotate by dragging (which works fine), but zooming in using the mousewheel will show the problem:
https://jsfiddle.net/nxtwrld/7x7dLj4n/2/
The crucial code lies at the bottom of the script - the scale function:
function scale(){
var scale = d3.event.scale;
var ratio = scale/scale0;
// Scale projection
projection.scale(scale);
// Scale Three.js earth
earth.scale.x = earth.scale.y = earth.scale.z = ratio;
}