diff --git a/web/src/plugins/radio/RadioTab.tsx b/web/src/plugins/radio/RadioTab.tsx index 88ac901..852524f 100644 --- a/web/src/plugins/radio/RadioTab.tsx +++ b/web/src/plugins/radio/RadioTab.tsx @@ -1,7 +1,5 @@ import { useState, useEffect, useRef, useCallback } from 'react'; import Globe from 'globe.gl'; -import { CanvasTexture, Color, LinearFilter, SRGBColorSpace } from 'three'; -import { TileTextureManager } from './TileTextureManager'; // ── Types ── interface RadioPlace { @@ -69,8 +67,6 @@ export default function RadioTab({ data }: { data: any }) { const containerRef = useRef(null); const globeRef = useRef(null); const rotationResumeRef = useRef>(undefined); - const tileManagerRef = useRef(null); - const tileTextureRef = useRef(null); const [theme, setTheme] = useState(() => localStorage.getItem('radio-theme') || 'default'); const [places, setPlaces] = useState([]); @@ -207,16 +203,13 @@ export default function RadioTab({ data }: { data: any }) { const initRgb = initStyle.getPropertyValue('--accent-rgb').trim() || '230, 126, 34'; const initAccent = initStyle.getPropertyValue('--accent').trim() || '#e67e22'; - // ── Tile-based texture (like Radio Garden) ── - const tileMgr = new TileTextureManager(4096, 2048, () => { - if (tileTextureRef.current) tileTextureRef.current.needsUpdate = true; - }); - tileManagerRef.current = tileMgr; - const globe = new Globe(containerRef.current) .backgroundColor('rgba(0,0,0,0)') .atmosphereColor(`rgb(${initRgb})`) .atmosphereAltitude(0.12) + .globeImageUrl('/earth-night.jpg') + .globeTileEngineUrl((x: number, y: number, z: number) => `/api/radio/tile/${z}/${x}/${y}`) + .globeTileEngineMaxLevel(9) .pointsData(places) // Radio Garden geo format: [lng, lat] .pointLat((d: any) => d.geo[1]) @@ -233,20 +226,6 @@ export default function RadioTab({ data }: { data: any }) { .width(containerRef.current.clientWidth) .height(containerRef.current.clientHeight); - // Apply tile canvas as globe texture - const texture = new CanvasTexture(tileMgr.canvas); - texture.minFilter = LinearFilter; - texture.generateMipmaps = false; - texture.colorSpace = SRGBColorSpace; - tileTextureRef.current = texture; - const mat = globe.globeMaterial() as any; - mat.map = texture; - mat.color = new Color(0xffffff); - mat.needsUpdate = true; - - // Start loading tiles (progressive: zoom 1 → 2 → 3) - tileMgr.init(); - // Sharp rendering on HiDPI/Retina displays globe.renderer().setPixelRatio(window.devicePixelRatio); @@ -274,8 +253,6 @@ export default function RadioTab({ data }: { data: any }) { const base = Math.max(0.12, Math.min(0.45, 0.06 + (d.size ?? 1) * 0.005)); return base * scale; }); - // Load higher-res tiles for visible area - tileManagerRef.current?.loadViewport(pov.lat, pov.lng, alt); }; controls.addEventListener('change', onControlsChange); @@ -303,7 +280,6 @@ export default function RadioTab({ data }: { data: any }) { el.removeEventListener('touchstart', onInteract); el.removeEventListener('wheel', onInteract); window.removeEventListener('resize', onResize); - tileManagerRef.current?.destroy(); }; }, [places, pauseRotation]);