Repolode
Enviar
shuding

shuding/cobe

Uma biblioteca WebGL para globos, com cerca de 5 KB e sem dependências, que permite vincular qualquer elemento do DOM ao globo como marcador.

Ver no GitHubSite
Estrelas
5,987
Forks
354
Issues abertas
44
Último commit
há 28 dias

O que é?

COBE é uma pequena biblioteca TypeScript para renderizar um globo WebGL interativo em um canvas. Você passa um elemento canvas e um objeto de configuração para createGlobe, que desenha o globo com marcadores e arcos conectando dois locais. Rotação, cores, iluminação e tamanho dos marcadores são controlados por opções e por um callback onRender, executado a cada quadro da animação.

O diferencial é que marcadores e arcos podem ter um id, que expõe nomes de âncoras CSS e variáveis de visibilidade. Isso permite posicionar elementos HTML comuns sobre pontos específicos do globo, com transições CSS, filtros e opacidade que respondem a se um ponto está voltado para o observador. A biblioteca não tem dependências e ocupa cerca de 5 KB.

O globo pode ser destruído com globe.destroy(), que remove seus vínculos. O projeto é escrito em TypeScript e distribuído sob a licença MIT.

Recursos principais

  • 01Renderiza um globo WebGL em um elemento canvas, sem dependências.
  • 02Posiciona marcadores e arcos entre coordenadas geográficas.
  • 03Permite ancorar qualquer elemento do DOM a um marcador usando CSS anchor positioning.
  • 04Expõe uma variável de visibilidade para que o CSS possa esmaecer ou desfocar rótulos atrás do globo.
  • 05Oferece suporte a atualizações a cada quadro por meio do callback onRender.

Casos de uso

  • Exibir locais de servidores ou clientes em uma landing page.
  • Criar um mapa interativo de eventos ou escritórios com rótulos HTML.
  • Visualizar rotas de voos ou dados como arcos entre cidades.

Início rápido

  1. 1

    Adicione um elemento canvas à sua página HTML

  2. 2

    Importe createGlobe de cobe e chame-o no canvas com suas opções

    import createGlobe from 'cobe'

Antes de usar

  • O navegador precisa oferecer suporte a WebGL.
  • A renderização do globo é configurada por meio de um único objeto de opções; para personalizar o visual além dos parâmetros disponíveis, é necessário adicionar código.

Tópicos

#webgl#globe#data-visualization#canvas#typescript#css-anchor-positioning

Perguntas frequentes

O que é cobe?
Uma biblioteca WebGL para globos, com cerca de 5 KB e sem dependências, que permite vincular qualquer elemento do DOM ao globo como marcador. COBE é uma pequena biblioteca TypeScript para renderizar um globo WebGL interativo em um canvas. Você passa um elemento canvas e um objeto de configuração para createGlobe, que desenha o globo com marcadores e arcos conectando dois locais. Rotação, cores, iluminação e tamanho dos marcadores são controlados por opções e por um callback onRender, executado a cada quadro da animação.
cobe é gratuito? Qual é a licença?
cobe é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
cobe ainda é mantido?
Manutenção ativa. O último commit de cobe foi em 22 de set. de 2026.
Para que posso usar cobe?
Exibir locais de servidores ou clientes em uma landing page. Criar um mapa interativo de eventos ou escritórios com rótulos HTML. Visualizar rotas de voos ou dados como arcos entre cidades.
Como instalar cobe?
Adicione um elemento canvas à sua página HTML Importe createGlobe de cobe e chame-o no canvas com suas opções: import createGlobe from 'cobe'
Onde consigo cobe?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/shuding/cobe

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados