roxy-cobewebgl 1.0.0

package/src/index.js

@@ -0,0 +1,169 @@
+/**
+ * Cobe 风格点阵地球 — npm 库入口（ESM）
+ */
+
+import { createFallbackGlobe } from './fallback.js';
+
+/** 默认地图（精简 GeoJSON）在包内的绝对 URL，用于 mapUrl 回退 */
+export function getDefaultMapMinUrl() {
+  return new URL('../globe.min.json', import.meta.url).href;
+}
+
+/** 完整 globe.json 在包内的绝对 URL */
+export function getDefaultMapFullUrl() {
+  return new URL('../globe.json', import.meta.url).href;
+}
+
+const DEFAULT_PARAMS = {
+  phi: 0.3,
+  theta: 0.15,
+  baseColor: [0.06, 0.1, 0.2],
+  glowColor: [0.15, 0.4, 0.85],
+  dotColor: [0.4, 0.8, 1.0],
+  arcColor: [1.0, 0.4, 0.2],
+  dots: 800,
+  dotSize: 0.008,
+  globeRadius: 0.55,
+  glowOn: 1.0,
+  debug: 0.0,
+  opacity: 0.9,
+  autoRotate: true,
+  rotationSpeed: 0.003,
+};
+
+function normalizeArcs(arcs) {
+  return (arcs || []).map((a, i) => ({
+    order: a.order != null ? a.order : i + 1,
+    startLat: a.startLat,
+    startLng: a.startLng,
+    endLat: a.endLat,
+    endLng: a.endLng,
+    color: a.color,
+  }));
+}
+
+function reportError(onError, err) {
+  if (onError) {
+    onError(err instanceof Error ? err : new Error(String(err)));
+  } else {
+    console.error('[cobewebgl]', err);
+  }
+}
+
+function createWorkerGlobe(canvas, {
+  map,
+  mapUrl,
+  arcsData,
+  params: initialParams,
+  onError,
+}) {
+  const worker = new Worker(new URL('./globe.worker.js', import.meta.url), { type: 'module' });
+  const offscreen = canvas.transferControlToOffscreen();
+
+  const dpr = Math.min(2, window.devicePixelRatio || 1);
+  offscreen.width = Math.floor(canvas.clientWidth * dpr);
+  offscreen.height = Math.floor(canvas.clientHeight * dpr);
+
+  worker.onerror = (e) => reportError(onError, new Error(e.message || 'Worker error'));
+  worker.onmessage = (e) => {
+    if (e.data && e.data.type === 'error') reportError(onError, new Error(e.data.msg));
+  };
+
+  worker.postMessage({
+    type: 'init',
+    canvas: offscreen,
+    map: map ?? undefined,
+    mapUrl: map != null ? undefined : String(mapUrl),
+    arcsData,
+    params: initialParams,
+  }, [offscreen]);
+
+  /** 仅包含用户通过 setState 覆盖的字段；phi 等由 Worker 内部推进，避免定时 flush 把旋转打回初始值 */
+  const userState = {};
+  let paramsDirty = false;
+
+  function onResize() {
+    const d = Math.min(2, window.devicePixelRatio || 1);
+    const w = Math.floor(canvas.clientWidth * d);
+    const h = Math.floor(canvas.clientHeight * d);
+    worker.postMessage({ type: 'resize', width: w, height: h });
+  }
+  window.addEventListener('resize', onResize);
+
+  function flushParams() {
+    if (!paramsDirty) return;
+    paramsDirty = false;
+    worker.postMessage({ type: 'params', params: { ...userState } });
+  }
+  const flushTimer = setInterval(flushParams, 16);
+
+  let destroyed = false;
+
+  return {
+    setState(partial) {
+      Object.assign(userState, partial);
+      paramsDirty = true;
+    },
+    resize() {
+      onResize();
+    },
+    destroy() {
+      if (destroyed) return;
+      destroyed = true;
+      clearInterval(flushTimer);
+      window.removeEventListener('resize', onResize);
+      worker.postMessage({ type: 'destroy' });
+      worker.terminate();
+    },
+  };
+}
+
+/**
+ * 创建点阵地球实例（优先 OffscreenCanvas + Worker，否则主线程 WebGL）
+ *
+ * @param {HTMLCanvasElement} canvas
+ * @param {CreateGlobeOptions} [options]
+ * @returns {Promise<GlobeInstance|null>}
+ */
+export async function createGlobe(canvas, options = {}) {
+  const {
+    map,
+    mapUrl,
+    preferWorker = true,
+    arcs,
+    onError,
+    debugShowTexture,
+    ...userParams
+  } = options;
+
+  const initialParams = { ...DEFAULT_PARAMS, ...userParams };
+  const arcsData = normalizeArcs(arcs);
+  const defaultMinUrl = getDefaultMapMinUrl();
+  const resolvedMapUrl = map != null ? null : (mapUrl != null ? String(mapUrl) : defaultMinUrl);
+
+  const canWorker = preferWorker && typeof canvas.transferControlToOffscreen === 'function';
+
+  if (canWorker) {
+    try {
+      return createWorkerGlobe(canvas, {
+        map,
+        mapUrl: resolvedMapUrl,
+        arcsData,
+        params: initialParams,
+        onError: (e) => reportError(onError, e),
+      });
+    } catch (e) {
+      reportError(onError, e);
+    }
+  }
+
+  const fb = await createFallbackGlobe(canvas, {
+    map,
+    mapUrl: resolvedMapUrl,
+    arcsData,
+    params: initialParams,
+    debugShowTexture,
+    onError,
+  });
+  return fb;
+}