Estoy tratando de trabajar con Globe, pero Ripple siempre suena en la parte posterior del mapa, no en frente.
Estoy usando https://github.com/vasturiano/globe.gl/blob/master/example/random-rings/index.html como fuente y ya probé BackSide para anillos ondulados
También hay alguna forma de deshabilitar la rotación con el mouse o deshabilitar el clic del mouse o arrastrar
const N = 2; const gData = [...Array(N).keys()].map(() => ({ lat: 35.6892, lng: 51.3890, maxR: Math.random() * 20 + 10, propagationSpeed: 2, repeatPeriod:1000 })); const colorInterpolator = t => `rgba(255,100,50,${Math.sqrt(1-t)})`; const world = Globe() (document.getElementById('globeViz')) .ringsData(gData) .ringColor(() => colorInterpolator) .ringMaxRadius('maxR') .ringPropagationSpeed('propagationSpeed') .ringRepeatPeriod('repeatPeriod') // .backgroundColor('rgba(0,0,0,0)') .showGlobe(false) .showAtmosphere(false); fetch('https://unpkg.com/world-atlas/land-110m.json').then(res => res.json()) .then(landTopo => { world .polygonsData(topojson.feature(landTopo, landTopo.objects.land).features) .polygonCapMaterial(new THREE.MeshLambertMaterial({ color: '#282828', side: THREE.DoubleSide })) .polygonSideColor(() => 'rgba(0,0,0,0)'); }); // Add auto-rotation world.controls().autoRotate = true; world.controls().autoRotateSpeed = 0.9;Vista previa: https://i.ibb.co/JyjwPL7/s.png
De acuerdo con la documentación, la Altitud de 0.0015 predeterminada es ringAltitude , mientras que la polygonAltitude de polígono predeterminada es 0.01 . Si configura ringAltitude para que sea mayor que PolygonAltitude, los anillos aparecerán sobre las formas del terreno. Ejecute el fragmento a continuación para verlo en acción.
const N = 2 const gData = [...Array(N).keys()].map(() => ({ lat: 35.6892, lng: 51.389, maxR: Math.random() * 20 + 10, propagationSpeed: 2, repeatPeriod: 1000, })) const colorInterpolator = t => `rgba(255,100,50,${Math.sqrt(1 - t)})` const world = Globe()(document.getElementById('globeViz')) .ringsData(gData) .ringColor(() => colorInterpolator) .ringMaxRadius('maxR') .ringPropagationSpeed('propagationSpeed') .ringRepeatPeriod('repeatPeriod') .ringAltitude(0.015) // <--- change of interest. fetch('https://unpkg.com/world-atlas/land-110m.json') .then(res => res.json()) .then(landTopo => { world .polygonsData(topojson.feature(landTopo, landTopo.objects.land).features) .polygonCapMaterial( new THREE.MeshLambertMaterial({ color: '#282828', side: THREE.DoubleSide, }), ) .polygonSideColor(() => 'rgba(0,0,0,0)') }) // Add auto-rotation world.controls().autoRotate = true world.controls().autoRotateSpeed = -0.9 <div id="globeViz"></div> <script src="//unpkg.com/globe.gl"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.2/topojson.min.js"></script>