SuperAPI AI 工具集

cobejs

前端与建站

查看项目

更新于 10-15 21:09

技能介绍

cobe 是一个轻量、专注的 WebGL 地球渲染库,用于在网页中添加可旋转的地球与位置标记。它适合作为首页或关于页面的装饰性视觉元素,相比完整 three.js 更小、更易接入。

主要能力:通过 createGlobe(canvas, options) 创建实例,使用 onRender(state) 在每帧更新状态(如旋转角度)。常用配置包括 devicePixelRatio、width、height、phi、theta、scale、dark、diffuse、baseColor、markerColor、glowColor,以及 markers 数组(每项含 location: [纬度, 经度]、size、可选 color)。生命周期方法:globe.toggle() 可暂停动画循环,globe.destroy() 销毁实例。

使用方式:从 "cobe" 导入 createGlobe,用 getBoundingClientRect() 读取画布 CSS 尺寸,按设备像素比(建议限制在 1–2)设置 canvas.width/height,然后传入颜色、缩放、标记等参数。在 onRender 中更新旋转角度以实现自转或拖拽旋转。窗口尺寸变化时,通常销毁并重新创建实例。

适用场景:hero 区、关于页、卡片中的旋转地球与位置标记展示,需要装饰性且带少量交互的图形。

限制与注意:画布 CSS 尺寸与 canvas 宽高需按 DPR 同步,否则会模糊或变形;未处理 resize 会导致渲染错位;移动端 DPR 过高会带来性能压力,应做限制;拖拽旋转与自动旋转需自行实现状态更新。具体收费、价格与平台支持情况暂未提供。