This is a customizable 3D globe component that allows you to display geographic locations with interactive markers and information tooltips.
- Interactive 3D globe with smooth rotation and zoom
- Clickable markers for different regions/locations
- Information tooltips that appear when a region is selected
- Responsive design that adapts to different screen sizes
- Customizable colors, sizes, and regions
- Include the required files in your HTML:
<link rel="stylesheet" href="styles.css"> <script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/three@0.160.0/examples/js/controls/OrbitControls.js"></script> <script src="globe.js"></script>
- Add a container element where you want the globe to appear:
<div id="globe-container"></div>
- Initialize the globe component:
document.addEventListener('DOMContentLoaded', () => {
const globe = new GlobeComponent('globe-container');
});
You can customize the globe by passing options to the constructor:
const globe = new GlobeComponent('globe-container', {
globeSize: 500,
maxGlobeSize: 800,
globeColor: 0x1a73e8,
highlightColor: 0x00a8ff,
markerColor: 0xffffff,
regions: [
{ name: "New York", lat: 40.7128, lng: -74.0060, id: "nyc" },
{ name: "London", lat: 51.5074, lng: -0.1278, id: "london" },
{ name: "Tokyo", lat: 35.6762, lng: 139.6503, id: "tokyo" }
]
});
| Option | Type | Default | Description |
|---|---|---|---|
globeSize | Number | 486 | Initial size of the globe in pixels |
maxGlobeSize | Number | 700 | Maximum size of the globe in pixels |
globeColor | Number (hex) | 0x3a7bd5 | Color of the globe |
highlightColor | Number (hex) | 0x00a8ff | Color of highlighted markers |
markerColor | Number (hex) | 0xffffff | Default color of markers |
regions | Array | [...] | Array of region objects with name, lat, lng, and id |
Each region object should have the following properties:
{
name: "Region Name", // Display name
lat: 40.7128, // Latitude
lng: -74.0060, // Longitude
id: "unique-id" // Unique identifier
}
You can modify the globe.js file to customize the appearance and behavior of the globe component. The main class GlobeComponent contains methods for creating and manipulating the 3D scene.
This component uses Three.js and modern JavaScript features. It should work in all modern browsers (Chrome, Firefox, Safari, Edge).
MIT