javascript - d3.js と THREE.js アースの同期

Question

WebGL Earth と d3.geo.satellite プロジェクションを組み合わせようとしています。

2 つのプロジェクションを重ね合わせて回転を同期することはできましたが、ズームを同期するのに問題があります。それらを同期してサイズを合わせると、WebGL プロジェクションは変形しますが、d3.geo.satellite は同じままです。私は、projection.scale、projection.distance のさまざまな組み合わせを試しましたが、あまり成功しませんでした。

ここに JS フィドルがあります (リソースをロードするのに少し時間がかかります)。ドラッグして回転できます（うまく機能します）。しかし、ズームインすると (マウスホイールを使用)、問題を確認できます。

https://jsfiddle.net/nxtwrld/7x7dLj4n/2/

重要なコードはスクリプトの一番下にあります - scale 関数です。

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;
}