Fix radio marker object placement

web/src/plugins/radio/RadioTab.tsx

@@ -181,8 +181,8 @@ export default function RadioTab({ data }: { data: any }) {
       const accentRgb = style.getPropertyValue('--accent-rgb').trim();
       const spriteTexture = createMarkerTexture(`rgb(${accentRgb})`);
       globeRef.current.atmosphereColor(`rgb(${accentRgb})`);
-      globeRef.current.customLayerData(places);
-      globeRef.current.customThreeObject((d: any) => {
+      globeRef.current.objectsData(places);
+      globeRef.current.objectThreeObject((d: any) => {
         const material = new SpriteMaterial({
           map: spriteTexture ?? undefined,
           color: `rgb(${accentRgb})`,
@@ -231,7 +231,7 @@ export default function RadioTab({ data }: { data: any }) {
     if (!containerRef.current || places.length === 0) return;
 
     if (globeRef.current) {
-      globeRef.current.customLayerData(places);
+      globeRef.current.objectsData(places);
       return;
     }
 
@@ -244,12 +244,16 @@ export default function RadioTab({ data }: { data: any }) {
       .atmosphereColor(`rgb(${initRgb})`)
       .atmosphereAltitude(0.12)
       .globeImageUrl('/nasa-blue-marble.jpg')
-      .customLayerData(places)
-      .customLayerLabel((d: any) =>
+      .objectsData(places)
+      .objectLat((d: any) => d.geo[1])
+      .objectLng((d: any) => d.geo[0])
+      .objectAltitude(0.0012)
+      .objectFacesSurface(false)
+      .objectLabel((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>`
       )
-      .customThreeObject((d: any) => {
+      .objectThreeObject((d: any) => {
         const material = new SpriteMaterial({
           map: markerTexture ?? undefined,
           color: `rgb(${initRgb})`,
@@ -261,11 +265,7 @@ export default function RadioTab({ data }: { data: any }) {
         sprite.scale.set(scale, scale, 1);
         return sprite;
       })
-      .customThreeObjectUpdate((obj: any, d: any) => {
-        const scale = markerScale(d.size ?? 1);
-        obj.scale.set(scale, scale, 1);
-      })
-      .onCustomLayerClick((d: any) => handlePointClickRef.current?.(d))
+      .onObjectClick((d: any) => handlePointClickRef.current?.(d))
       .width(containerRef.current.clientWidth)
       .height(containerRef.current.clientHeight);