# js-globe

`js-globe` is a 3D globe visualization library built with Three.js, enabling interactive Earth representations with markers, countries, and labels. This library is perfect for showcasing data points on a global scale, visualizing geographic data, and creating interactive 3D environments.

## Table of Contents
- [Installation](#installation)
- [Usage](#usage)
- [Example](#example)
- [Configuration](#configuration)
- [Dependencies](#dependencies)
- [License](#license)

## Installation

Install `js-globe` using npm or yarn:

```bash
npm install js-globe
# or
yarn add js-globe

Ensure that you have three and @tweenjs/tween.js as peer dependencies, as this library relies on them.

Usage

Importing the Library

import Globe from 'js-globe';
import * as THREE from 'three';

Initializing the Globe

Create a new instance of the globe, set up your scene, camera, and renderer, and add the globe to your scene.

import Globe from 'js-globe';
import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const globe = new Globe();
scene.add(globe);

function animate() {
  requestAnimationFrame(animate);
  globe.rotation.y += 0.001; // Rotate the globe
  renderer.render(scene, camera);
}

animate();

Adding Markers

To add custom markers to the globe, use latitude and longitude coordinates:

globe.addMarker({
  lat: 40.7128,
  lon: -74.0060,
  label: 'New York City',
});

Loading Country Borders

If you have a GeoJSON file of country borders, you can load and visualize it:

import countries from './path/to/countries.geo.json';

globe.loadCountryBorders(countries);

Example

import Globe from 'js-globe';
import * as THREE from 'three';
import countries from './countries.geo.json';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 3;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const globe = new Globe();
scene.add(globe);

// Add markers
globe.addMarker({ lat: 29.3544, lon: 71.6911, label: 'Bahawalpur' });
globe.addMarker({ lat: 40.7128, lon: -74.0060, label: 'New York City' });

// Load country borders
globe.loadCountryBorders(countries);

function animate() {
  requestAnimationFrame(animate);
  globe.rotation.y += 0.001;
  renderer.render(scene, camera);
}

animate();

Configuration

You can customize various aspects of the globe:

• Textures: Replace the default textures for Earth, moon, and clouds.
• Camera Settings: Adjust camera angle, zoom, and controls for user interaction.
• Country Borders: Use a GeoJSON file for country border data.
• Markers and Labels: Place markers with labels at specific latitude/longitude coordinates.

Dependencies

• three
• @tweenjs/tween.js

Ensure these packages are installed for js-globe to function correctly.

License

MIT License. See LICENSE file for more details.

This `README.md` provides a complete guide to setting up, using, and configuring the library, as well as handling dependencies and examples. Let me know if you'd like to add more details!