将 d3.js 与 THREE.js 地球同步

Question

我正在尝试将 WebGL 地球与 d3.geo.satellite 投影相结合。

我已设法将 2 个投影相互叠加并同步旋转，但我无法同步缩放。当我同步它们以匹配大小时，WebGL 投影会变形，但 d3.geo.satellite 保持不变。我尝试了不同的projection.scale、projection.distance组合，但没有取得多大成功。

这里是 JS fiddle（加载资源需要一点时间）。您可以拖动它来旋转（效果很好）。但是如果你放大（使用鼠标滚轮）你可以看到问题。

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

重要的代码在脚本的底部——缩放函数。

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

我也不使用 WebGL 地球，检查您的 jsfiddle 不再有效，并且我假设您的问题是您希望将 D3.js 与 Threejs 集成作为 3d 地球的解决方案。

我建议您尝试earthjs 作为您的解决方案。在引擎盖下它使用 D3.js v4 和 Threejs 修订版 8x 都是最新的，它可以在 Svg、canvas 和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();
    })

上面的 sn-p 代码你可以从 here 运行它。