I'm trying to work with Globe but Ripple rings always going on the backside of the map, not in front of it
I'm using https://github.com/vasturiano/globe.gl/blob/master/example/random-rings/index.html as source and already I tried BackSide for ripple rings
Also is there anyway to disable rotate with mouse or disable mouseclick or drag
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;
Preview : https://i.ibb.co/JyjwPL7/s.png
According to the documentation, the default ringAltitude is 0.0015, whereas the default polygonAltitude is 0.01. If you set the ringAltitude to be greater than polygonAltitude, the rings will appear over the land shapes. Run the snippet below to see it in action.
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>