https://github.com/ahuseyn/react-dot-globe
Highly customizable Dot Globe component for React. Inspired by GitHub's globe, uses Babylon.js under the hood.
https://github.com/ahuseyn/react-dot-globe
babylonjs globe reactjs webgl
Last synced: about 1 year ago
JSON representation
Highly customizable Dot Globe component for React. Inspired by GitHub's globe, uses Babylon.js under the hood.
- Host: GitHub
- URL: https://github.com/ahuseyn/react-dot-globe
- Owner: ahuseyn
- License: mit
- Created: 2022-02-22T17:53:54.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-02-22T18:25:40.000Z (over 4 years ago)
- Last Synced: 2025-03-26T03:05:01.574Z (over 1 year ago)
- Topics: babylonjs, globe, reactjs, webgl
- Language: JavaScript
- Homepage: https://ahuseyn.github.io/react-dot-globe/
- Size: 4.6 MB
- Stars: 9
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React .globe
Highly customizable Dot Globe component for React. Inspired by GitHub's globe, uses Babylon.js under the hood.
[Live preview here](https://ahuseyn.github.io/react-dot-globe).
## Install
1. Install the library
```bash
npm install react-dot-globe
```
2. Install dependency
```bash
npm install @babylonjs/core@5.0.0-alpha.65
```
## Usage
> Refer to the example folder for detailed usage example.
```jsx
import React from 'react'
import ReactDotGlobe from 'react-dot-globe'
function App() {
const markers = [
{
name: 'Istanbul',
coordinates: [41.106942, 29.008056],
color: '#FF0000',
height: 1,
diameter: 0.05
}
]
const curves = [
{
point1: [41.106942, 29.008056],
point2: [40.751925, -73.981963],
name: `From Istanbul to New York`,
color: '#FF0000',
segments: 30,
animationSpeed: 1000,
clearAnimation: 'forward' // backward
}
]
return (
console.log(hit)} // Refer to the docs: https://doc.babylonjs.com/typedoc/classes/babylon.scene#onpointerup
/>
)
}
```
## License
MIT © [ahuseyn](https://github.com/ahuseyn)