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

Question

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

我已经成功将两个投影叠加在一起并同步旋转，但是我在同步缩放方面遇到了问题。当我将它们同步匹配大小时，WebGL投影会变形，但d3.geo.satellite保持不变。我尝试了不同的投影比例和距离组合，但没有太多成功。

这里是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;
}

- nxtwrld

---

我也遇到了这个问题，但我没有使用WebGL Earth，而是使用Three.js。你有什么解决方案吗？ - Li Dong

Answer 1

我也没有使用WebGL地球，查看你的jsfiddle不再起作用，我猜想你的问题是想将D3.js与Threejs集成作为3D地球的解决方案。

我建议你尝试earthjs作为你的解决方案。在底层它使用D3.js v4和最新的Threejs revision 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();
    })

在这段代码上方，您可以从这里运行它。

- Widi Harsojo

---

谢谢建议。我也会修复jsFiddle的问题。我的目标是将D3 svg图层投影与Three.js WebGL画布同步。Earthjs使用画布来渲染两者，这很好，但它失去了SVG的一些可能性。 - nxtwrld

啊，我明白了，你能试试这个demo，svg在Threejs之上，基本上我是使用另一个插件来处理svg的。 - Widi Harsojo

更新我的答案并使用SVG插件。 - Widi Harsojo

这太完美了！谢谢！ - nxtwrld