同步 d3.js 与 THREE.js 地球

Question

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

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

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

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 earth，检查你的 jsfiddle 不再工作，我假设你想将 D3.js 与 Threejs 集成作为 3d globe 的解决方案。

我可以建议您尝试 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();
    })

上面的代码片段你可以运行它来自 here。

同步 d3.js 与 THREE.js 地球

syncing d3.js with THREE.js earth

javascript

map-projections

three.js

d3.js

d3.geo