Synchronisierung d3.js mit THREE.js Erde

Question

Ich versuche, WebGL Erde mit d3.geo.satellite Projektion zu kombinieren.

Ich habe es geschafft, die 2 Projektionen übereinander zu legen und die Rotation zu synchronisieren, aber ich habe Probleme beim Zoomen. Wenn ich sie mit der passenden Größe synchronisiere, wird die WebGL-Projektion deformiert, aber der d3.geo.satellite bleibt gleich. Ich habe verschiedene Kombinationen von projection.scale, projection.distance ohne viel Erfolg ausprobiert.

Hier ist JS Geige (es dauert eine Weile, um die Ressourcen zu laden). Sie können es ziehen, um zu drehen (funktioniert gut). Aber wenn Sie hineinzoomen (mit dem Mausrad), können Sie das Problem sehen.

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

Der wichtige Code ist am unteren Rand des Skripts - die Skalierungsfunktion.

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

ich nicht WebGL Erde entweder verwenden, auf Ihrem jsfiddle Überprüfung funktioniert nicht mehr, und meine Annahme des Problems, das Sie integriert D3.js will mit Threejs als Lösung für die 3D-Welt.

Darf ich Ihnen vorschlagen, earthjs als Ihre Lösung zu versuchen. Unter der Haube verwenden Sie D3.js v4 & Threejs Revision 8x beide sind die neuesten, und es kann zwischen Svg, Leinwand & Threejs (WebGL) kombinieren.

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

über Snippet-Code können Sie es von here laufen.