與THREE.js地球同步d3.js

我試圖將WebGL地球與d3.geo.satellite投影結合起來。與THREE.js地球同步d3.js

我已經設法將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; 
}

來源

2016-09-11 nxtwrld

我也遇到過這個問題，但我不使用WebGL Earth，而是使用Three.js。你有任何解決方案？ –

我不使用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(); 
    })

上面的代碼段你可以運行它從here。

來源

2017-09-23 09:26:22

感謝您的提示。我也會修復jsFiddle。我試圖實現的是將D3 svg圖層投影與Three.js WebGL畫布同步。 Earthjs使用畫布渲染兩者，效果很好，但它失去了SVG的可能性。 – nxtwrld

啊，我明白了，你可以[試試這個演示，在Threejs上面]（https://earthjs.github.io/09-readme/index1.html），基本上我使用了另一個svg插件。 –

更新我的答案並使用svg的插件。 –

與THREE.js地球同步d3.js

回答

相關問題