This project was created with the intention of studying and improving Javascript development techniques. The Globe is based on what is presented on the GitHub homepage.
This project was developed with the following technologies:
- React
- Next.js
- TypeScript
- Three
- Three-globe
- Clone the repository
git clone https://github.com/igorssc/react-globe.git
cd react-globe- Install dependencies
yarn
# or
npm init- Start the server
yarn start
# or
npm run startYou can now access localhost:3000 from your browser.
You can change animation settings via the config.globe.ts file
globeConfig:
| Name | Type | Default |
|---|---|---|
| pointSize | number | 1 |
| globeColor | string | "#062056" |
| showAtmosphere | boolean | true |
| atmosphereColor | string | "#ffffff" |
| atmosphereAltitude | number | 0.1 |
| emissive | string | "#000000" |
| emissiveIntensity | number | 0.1 |
| shininess | number | 0.9 |
| polygonColor | string | "rgba(255,255,255,0.7)" |
| ambientLight | string | "#000000" |
| directionalLeftLight | string | "#000000" |
| directionalTopLight | string | "#ffffff" |
| pointLight | string | "#ffffff" |
| flightTime | number | 1000 |
| flightLength | number | 0.9 |
| rings | number | 1 |
| maxRings | number | 3 |
| autoRotate | boolean | true |
| autoRotateSpeed | number | 0.5 |
| initialPosition: | ||
| lat | number | 22.3193 |
| lng | number | 114.1694 |
flights:
| Name | Type | Example |
|---|---|---|
| order | number | 1 |
| from | string | "New Delhi" |
| to | string | "Kuala Lumpur" |
| startLat | number | 28.6139 |
| startLng | number | 77.209 |
| endLat | number | 3.139 |
| endLng | number | 101.6869 |
| arcAlt | number | 0.2 |
| color | string | "#FFFFFF" |
Access https://react-anim-globe.vercel.app
This project is under MIT licence. See the archive LICENSE to more details.
Made with 💜 by IGS Design - Igor Santos 👋