我正在嘗試使用 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
uj5u.com熱心網友回復：
根據檔案，默認ringAltitude值為0.0015，而默認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>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/442980.html
標籤：javascript html d3.js 图表 三.js
下一篇：使用morgan創建記錄器中間件