波纹环在地图的背面而不是前面

Question

我正在尝试使用 Globe，但 Ripple 环总是出现在地图的背面，而不是前面

我正在使用 https://github.com/vasturiano/globe.gl/blob/master/example/random-rings/index.html 作为来源我已经尝试使用 BackSide 制作波纹环

还有禁用鼠标旋转或禁用鼠标单击或拖动的功能

    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;

预览：https://i.ibb.co/JyjwPL7/s.png

Answer 1

根据文档，默认 ringAltitude is 0.0015, whereas the default polygonAltitude 是 0.01。如果将 ringAltitude 设置为大于 polygonAltitude，环将出现在地形上。运行下面的代码片段可以看到它的实际效果。

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>

波纹环在地图的背面而不是前面

Ripple rings are in backside of map not infront

html

javascript

charts

three.js

d3.js