fix: sharp globe rendering - HiDPI pixel ratio + NASA 4K texture

- Set renderer pixel ratio to window.devicePixelRatio for crisp
  rendering on Retina/HiDPI displays (was defaulting to 1)
- Upgraded Earth texture from low-res three-globe example (~2K)
  to NASA Black Marble 3600x1800 for sharp detail when zooming
- Added pointResolution(6) for cleaner point geometry

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Daniel 2026-03-06 09:46:18 +01:00
parent 8c2d75380d
commit a9f81d66fd

View file

@ -180,7 +180,7 @@ export default function RadioTab({ data }: { data: any }) {
const initAccent = initStyle.getPropertyValue('--accent').trim() || '#e67e22';
const globe = new Globe(containerRef.current)
.globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg')
.globeImageUrl('//eoimages.gsfc.nasa.gov/images/imagerecords/79000/79765/dnb_land_ocean_ice.2012.3600x1800.jpg')
.backgroundColor('rgba(0,0,0,0)')
.atmosphereColor(`rgba(${initRgb}, 0.25)`)
.atmosphereAltitude(0.12)
@ -191,6 +191,7 @@ export default function RadioTab({ data }: { data: any }) {
.pointColor(() => `rgba(${initRgb}, 0.85)`)
.pointRadius((d: any) => Math.max(0.12, Math.min(0.45, 0.06 + (d.size ?? 1) * 0.005)))
.pointAltitude(0.003)
.pointResolution(6)
.pointLabel((d: any) =>
`<div style="font-family:system-ui;font-size:13px;color:#fff;background:rgba(30,31,34,0.92);padding:6px 10px;border-radius:6px;border:1px solid rgba(${initRgb},0.3);pointer-events:none">` +
`<b>${d.title}</b><br/><span style="color:#949ba4;font-size:11px">${d.country}</span></div>`
@ -199,6 +200,9 @@ export default function RadioTab({ data }: { data: any }) {
.width(containerRef.current.clientWidth)
.height(containerRef.current.clientHeight);
// Sharp rendering on HiDPI/Retina displays
globe.renderer().setPixelRatio(window.devicePixelRatio);
// Start-Position: Europa
globe.pointOfView({ lat: 48, lng: 10, altitude: 2.0 });