shuding/cobe

Что это?

Ключевые возможности

• 01Отображает WebGL-глобус на элементе canvas без зависимостей.
• 02Размещает маркеры и дуги между географическими координатами.
• 03Позволяет привязать любой DOM-элемент к маркеру с помощью позиционирования по CSS-якорю.
• 04Предоставляет переменную видимости, чтобы с помощью CSS скрывать или размывать подписи, оказавшиеся за глобусом.
• 05Поддерживает обновление на каждом кадре через callback onRender.

Сценарии использования

• Показ местоположения серверов или клиентов на посадочной странице.
• Создание интерактивной карты мероприятий или офисов с HTML-подписями.
• Визуализация маршрутов перелётов или передачи данных в виде дуг между городами.

Быстрый старт

1. 1

   Добавьте элемент canvas на HTML-страницу

2. 2

   Импортируйте createGlobe из cobe и вызовите его для canvas, передав нужные параметры

   import createGlobe from 'cobe'

Что важно знать

• !В браузере должна поддерживаться технология WebGL.
• !Рендеринг глобуса настраивается с помощью одного объекта параметров, поэтому для создания визуальных эффектов, не предусмотренных этими параметрами, потребуется дополнительный код.

Темы

Частые вопросы

Что такое cobe?

WebGL-библиотека для глобуса размером около 5 КБ без зависимостей, позволяющая привязать любой DOM-элемент к глобусу в качестве маркера. COBE — небольшая TypeScript-библиотека для отображения интерактивного WebGL-глобуса на canvas. Передайте элемент canvas и объект конфигурации в createGlobe — библиотека нарисует глобус с маркерами и дугами между двумя точками. Вращение, цвета, освещение и размер маркеров задаются через параметры и callback onRender, который вызывается на каждом кадре анимации.

cobe можно использовать бесплатно? Какая у него лицензия?

cobe распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.

cobe всё ещё поддерживается?

Активно поддерживается. Последний коммит в cobe — 22 сент. 2026 г..

Для чего можно использовать cobe?

Показ местоположения серверов или клиентов на посадочной странице. Создание интерактивной карты мероприятий или офисов с HTML-подписями. Визуализация маршрутов перелётов или передачи данных в виде дуг между городами.

Как установить cobe?

Добавьте элемент canvas на HTML-страницу Импортируйте createGlobe из cobe и вызовите его для canvas, передав нужные параметры: import createGlobe from 'cobe'

Где скачать cobe?

Исходный код и инструкции по установке — на GitHub: https://github.com/shuding/cobe