Home

Awesome

ngx-three-globe

@omnedia/ngx-three-globe is an Angular library that provides an interactive, 3D globe visualization built using three-globe and three.js. This component offers customizable globe settings, light sources, and animated arcs and rings, making it perfect for data visualization or adding dynamic elements to your Angular applications.

Features

Installation

Install the library and the required peer dependencies using npm:

npm install @omnedia/ngx-three-globe
npm install three three-globe --save

Both three-globe and three are required as peer dependencies for this library to function correctly.

Usage

Import the NgxThreeGlobeComponent in your Angular module or component:

import { NgxThreeGlobeComponent } from '@omnedia/ngx-three-globe';

@Component({
  ...
  imports: [
    ...
    NgxThreeGlobeComponent,
  ],
  ...
})

Use the component in your template:

<om-three-globe
  [globeSize]="'800px'"
  [globeConfig]="{
    globeColor: '#062056',
    atmosphereColor: '#ffffff',
    autoRotate: true,
    autoRotateSpeed: 1
  }"
  [arcAndRingColors]="['#06b6d4', '#3b82f6', '#6366f1']"
  styleClass="custom-globe-class"
></om-three-globe>

API

<om-three-globe
  [globeSize]="globeSize"
  [globeConfig]="globeConfig"
  [arcAndRingColors]="arcAndRingColors"
  [arcs]="ThreeGlobePosition[]"
  styleClass="your-custom-class"
>
</om-three-globe>

Example

<om-three-globe
  [globeSize]="'500px'"
  [globeConfig]="{
    globeColor: '#0a2f5b',
    showAtmosphere: true,
    atmosphereColor: '#f5f5f5',
    autoRotate: true,
    autoRotateSpeed: 0.8,
    pointLight: '#ffffff'
  }"
  [arcAndRingColors]="['#ff6b6b', '#f06595', '#faa2c1']"
  styleClass="globe-custom-style"
></om-three-globe>

This example creates a globe with custom colors, atmosphere, and rotation speed, along with animated arcs connecting various points.

Globe Configuration Options

The globeConfig input allows you to configure various aspects of the globe's appearance and behavior:

Dependencies

This library relies on the following peer dependencies for rendering and interactivity:

Ensure that both of these dependencies are installed alongside the library.

npm install three three-globe --save

Styling

To customize the appearance of the globe or container, use the styleClass input to apply your own CSS classes.

.globe-custom-style {
  background-color: #000;
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

Contributing

Contributions are welcome. Please submit a pull request or open an issue to discuss your ideas.

License

This project is licensed under the MIT License.