syncing d3.js с землей THREE.js

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-мира.

Могу я предложить вам попробовать 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(); 
    }) 

выше фрагмент кода, вы можете запустить его из here.