Ripple rings are in backside of map not infront-CodePudding

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

CodePudding user response：

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>