Question

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

我已设法将2个投影叠加在一起并同步旋转，但我无法同步缩放。当我将它们同步到匹配大小时，WebGL投影变形，但d3.geo.satellite保持不变。我尝试过projection.scale，projection.distance的不同组合而没有太大的成功。

这是JS小提琴（加载资源需要一点时间）。您可以将其拖动以旋转（效果很好）。但如果放大（使用鼠标滚轮），您可以看到问题。

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 globe的解决方案。

我建议您尝试使用earthjs作为解决方案。在引擎盖下它使用D3.js v4＆amp; Threejs版本8x都是最新的，它可以结合Svg，canvas＆amp; 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地球同步

1 个答案: