@Malloc72P/Hyperglobe

소개

• Hyperglobe는 React와 Three.js 기반 3D 맵차트 라이브러리 입니다.
• 웹 환경에서 인터랙티브한 3D 지구본과 지리 데이터를 시각화하는 데 최적화되어 있습니다.
• 데모 보러가기

특징

• 고성능: WebGL 기반의 렌더링으로 부드러운 3D 그래픽 제공
• 사용자 정의 가능: 다양한 옵션을 통해 지구본의 외형과 동작을 커스터마이징 가능
• 데이터 시각화: 지구본 위에 다양한 형태의 데이터 시각화 지원
• 반응형 디자인: 다양한 화면 크기와 해상도에 최적화된 반응형 디자인 지원
• 라우트 시각화: 경로 데이터를 시각적으로 표현하는 기능 제공
• 애니메이션: 지구본과 데이터에 다양한 애니메이션 효과 적용 가능

설치

# npm
npm install @malloc72p/hyperglobe

# pnpm
pnpm add @malloc72p/hyperglobe

# yarn
yarn add @malloc72p/hyperglobe

Peer Dependencies

이 라이브러리는 다음 패키지들을 peer dependency로 요구합니다. 프로젝트에 설치되어 있지 않다면 함께 설치해주세요:

npm install react react-dom three @react-three/fiber @react-three/drei

코드 예시

'use client';

import { HyperGlobe } from '@malloc72p/hyperglobe';
import '@malloc72p/hyperglobe/hyperglobe.css';

export default function Page() {
  return (
    <div>
      <HyperGlobe
        hgmUrl="https://unpkg.com/@malloc72p/hyperglobe-maps/dist/nations-mid.hgm"
        maxSize={600}
      />
    </div>
  );
}

만든이

• 개발자 블로그