shuding/cobe

어떤 프로젝트인가요?

핵심 기능

• 01의존성 없이 캔버스 요소에 WebGL 지구본을 렌더링합니다.
• 02지리 좌표에 마커를 배치하고 좌표 사이를 호로 연결합니다.
• 03CSS 앵커 포지셔닝을 사용해 모든 DOM 요소를 마커에 고정할 수 있습니다.
• 04지구본 뒤에 있는 레이블을 CSS로 페이드하거나 흐리게 처리할 수 있도록 표시 여부 변수를 노출합니다.
• 05onRender 콜백으로 프레임마다 업데이트할 수 있습니다.

활용 사례

• 랜딩 페이지에 서버나 고객의 위치를 표시합니다.
• HTML 레이블을 포함한 인터랙티브 이벤트 또는 사무실 지도를 만듭니다.
• 도시 사이의 항공편 경로나 데이터 경로를 호로 시각화합니다.

빠른 시작

1. 1

   HTML 페이지에 canvas 요소를 추가합니다

2. 2

   cobe에서 createGlobe를 가져온 다음 옵션을 지정해 canvas에서 호출합니다

   import createGlobe from 'cobe'

사용 전 알아둘 점

• !브라우저에서 WebGL을 지원해야 합니다.
• !지구본 렌더링은 하나의 옵션 객체로 설정하므로, 매개변수로 지정할 수 없는 사용자 지정 비주얼을 구현하려면 추가 코드가 필요합니다.

토픽

자주 묻는 질문

cobe은(는) 무엇인가요?

약 5KB에 의존성이 없는 WebGL 지구본 라이브러리로, 모든 DOM 요소를 마커로 연결할 수 있습니다. COBE는 캔버스에 인터랙티브한 WebGL 지구본을 렌더링하는 소형 TypeScript 라이브러리입니다. 캔버스 요소와 설정 객체를 createGlobe에 전달하면 마커와 두 위치를 잇는 호가 있는 지구본을 그립니다. 회전, 색상, 조명, 마커 크기는 옵션과 매 애니메이션 프레임마다 실행되는 onRender 콜백으로 제어합니다.

cobe은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

cobe은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

cobe은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. cobe의 마지막 커밋은 2026년 9월 22일입니다.

cobe은(는) 어디에 사용할 수 있나요?

랜딩 페이지에 서버나 고객의 위치를 표시합니다. HTML 레이블을 포함한 인터랙티브 이벤트 또는 사무실 지도를 만듭니다. 도시 사이의 항공편 경로나 데이터 경로를 호로 시각화합니다.

cobe는 어떻게 설치하나요?

HTML 페이지에 canvas 요소를 추가합니다 cobe에서 createGlobe를 가져온 다음 옵션을 지정해 canvas에서 호출합니다: import createGlobe from 'cobe'

cobe은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/shuding/cobe