THREE.jsとd3.jsを同期する

Question

WebGLの地球とd3.geo.satellite投影を組み合わせようとしています。

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

ここにJSフィドル（リソースを読み込むのに少し時間がかかる）です。あなたはそれを回転させるためにドラッグすることができます（うまくいきます）。しかし、ズームイン（マウスホイールを使用）すれば、問題を見ることができます。スケール関数 -

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

重要なコードは、スクリプトの最下部にあります。私はあなたのjsfiddleにチェックし、いずれかのWebGLの土を用いていない

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

Answer 1

はもう働いて、そしてあなたが3Dの地球のためのソリューションとしてThreejsと統合D3.jsにしたいあなたの問題の私の仮定されていません。

解決策としてearthjsを試してみることをおすすめします。フードの下ではD3.js v4を使用します& Threejsリビジョン8xは両方とも最新であり、Svg、キャンバス& threejs（WebGL）の間で組み合わせることができます。

const g = earthjs({padding:60}) 
    .register(earthjs.plugins.mousePlugin()) 
    .register(earthjs.plugins.threejsPlugin()) 
    .register(earthjs.plugins.autorotatePlugin()) 
    .register(earthjs.plugins.dropShadowSvg(),'dropshadow') 
    .register(earthjs.plugins.worldSvg('../d/world-110m.json')) 
    .register(earthjs.plugins.globeThreejs('../globe/world.jpg')) 
    g._.options.showLakes = false; 
    g.ready(function(){ 
     g.create(); 
    }) 

スニペットコードの場合は、hereから実行できます。