Globe
An interactive rotating globe component.
Note: This component requires cobe and vue-use-spring as a dependency. Please install these using following commands.
API
| Prop Name | Type | Default | Description |
|---|---|---|---|
class | string | "" | Additional CSS classes for custom styling. |
config | COBEOptions | N/A | Configuration object for the globe, following COBE(https://cobe.vercel.app/docs/api) library options. |
mass | number | 1 | Mass parameter for the spring animation controlling rotation inertia. |
tension | number | 280 | Tension parameter for the spring animation, affecting responsiveness. |
friction | number | 100 | Friction parameter for the spring animation, affecting damping. |
precision | number | 0.001 | Precision parameter for the spring animation calculations. |
Component Code
You can copy and paste the following code to create this component:
Globe.vue
Features
- Interactive 3D Globe: Provides an interactive 3D globe visualization that users can rotate with mouse or touch interactions.
- Customizable Markers: Display markers on the globe at specified locations with customizable sizes.
- Smooth Animations: Utilizes physics-based spring animations for smooth and responsive globe rotations.
- Configurable Appearance: Customize the globe's appearance and behavior through the
configprop using COBE library options. - Responsive Design: Automatically adjusts to different screen sizes and resolutions.