THREE.js 지구와 d3.js 동기화

Question

WebGL 지구를 d3.geo.satellite 프로젝션과 결합하려고합니다.

2 개의 투영을 서로 겹쳐서 회전을 동기화 할 수 있었지만 확대/축소를 동기화하는 데 문제가 있습니다. 크기를 맞추기 위해 이들을 동기화하면 WebGL 투영이 변형되지만 d3.geo.satellite는 동일하게 유지됩니다. 나는 많은 성공없이 projection.scale, projection.distance의 다른 조합을 시도했다.

여기는 JS 피들입니다 (리소스를로드하는 데 약간 시간이 걸립니다). 드래그하여 회전시킬 수 있습니다 (잘 작동 함). 그러나 확대 (마우스 휠 사용)하면 문제를 볼 수 있습니다. 스케일 기능 -

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

중요한 코드는 스크립트의 맨 아래에 있습니다. 나는 당신의 jsfiddle에 검사 중 WebGL이 지구를 사용하지 않는

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

더 이상 작동, 당신은 3D 세계를위한 솔루션으로 Threejs으로 통합 D3.js하려는 문제의 내 가정이되지 않습니다.

해결책으로 earthjs을 사용해 보시기 바랍니다. 후드에서는 D3.js v4를 사용합니다. & 세 개정 8x가 모두 최신이고 Svg, 캔버스 & 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에서 실행할 수 있습니다.