### Run the Local Development Server

Source: https://github.com/cvander/airtrails3d/blob/main/CONTRIBUTING.md

Start the local server to test your changes and view the application in your browser.

```bash
node server.js
```

--------------------------------

### Start Airtrails3D Development Server

Source: https://github.com/cvander/airtrails3d/blob/main/README.md

Run the Node.js development server to host the application. No external dependencies are required.

```bash
node server.js
# Server starts at http://localhost:5050
```

--------------------------------

### Clone the AirTrails3D Repository

Source: https://github.com/cvander/airtrails3d/blob/main/CONTRIBUTING.md

Clone your forked repository to your local machine to start making changes.

```bash
git clone https://github.com/YOUR_USERNAME/AirTrails3D.git
cd AirTrails3D
```

--------------------------------

### Camera Positioning Examples

Source: https://github.com/cvander/airtrails3d/blob/main/README.md

Sets the camera's perspective for different geographical focuses. Use these constants to adjust the viewing angle.

```javascript
// Europe-focused (John Doe)
const cameraPosition = { x: 1.4, y: 1.2, z: 2.0 };
```

```javascript
// Pacific-focused (Rosalia)  
const cameraPosition = { x: 0.0, y: 1.3, z: 2.2 };
```

```javascript
// Global view (mixed routes)
const cameraPosition = { x: -1.2, y: 1.0, z: 2.0 };
```

--------------------------------

### Access Local Routes

Source: https://github.com/cvander/airtrails3d/blob/main/CONTRIBUTING.md

Visit these URLs in your browser to test specific character routes locally after starting the server.

```bash
http://localhost:5050/john-doe or http://localhost:5050/rosalia
```

--------------------------------

### Load Rosalia Routes Data

Source: https://github.com/cvander/airtrails3d/blob/main/public/pages/rosalia.html

Fetches Rosalia's route data from a JSON file and initializes the globe visualization script. Handles potential errors during the fetch process.

```javascript
// Load Rosalia's routes data and then initialize the globe
fetch('/js/data/rosalia-routes.json')
 .then(response => response.json())
 .then(data => {
  window.rosaliaRoutes = data;
  // Load and initialize globe after data is ready
  const script = document.createElement('script');
  script.src = '/js/app/globe.js';
  document.head.appendChild(script);
 })
 .catch(error => {
  console.error('Error loading rosalia routes:', error);
  document.getElementById('flight-info').textContent = 'Error loading flight data. Check console for details.';
 });
```

--------------------------------

### Animation Settings

Source: https://github.com/cvander/airtrails3d/blob/main/README.md

Configures the animation parameters for the flight paths and aircraft markers. Adjust these values to control the intro duration, speed, arc height, and plane size.

```javascript
const introDuration = 2500;     // 2.5 second intro animation
const flightSpeed = 1;          // Animation speed multiplier
const arcHeight = 0.12;         // Flight path arc height
const planeSize = 0.015;        // Aircraft marker size
```

--------------------------------

### Initialize Default Year

Source: https://github.com/cvander/airtrails3d/blob/main/public/pages/john-doe.html

Sets a default year for the application. This is a simple JavaScript variable assignment.

```javascript
window.DEFAULT_YEAR = '2025';
```

--------------------------------

### Basic CSS for AirTrails3D Globe

Source: https://github.com/cvander/airtrails3d/blob/main/public/pages/john-doe.html

Sets up basic styling for the globe container, flight information display, attribution, and sample notices. Ensures the globe fills the viewport and has a black background.

```css
body { margin: 0; padding: 0; overflow: hidden; background-color: #000; }
#globe { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; }
.flight-info { background-color: rgba(40, 44, 52, 0.85); }
.attribution { position: absolute; bottom: 10px; right: 10px; color: rgba(255, 255, 255, 0.7); font-size: 12px; z-index: 100; }
.attribution a { color: rgba(255, 255, 255, 0.8); text-decoration: none; }
.attribution a:hover { text-decoration: underline; }
.sample-notice { position: absolute; top: 70px; left: 20px; color: rgba(255, 255, 255, 0.8); font-size: 13px; background: rgba(0, 0, 0, 0.5); padding: 8px 12px; border-radius: 5px; z-index: 100; border-left: 3px solid #00ff99; }
.sample-notice strong { color: #00ff99; }
```

--------------------------------

### Load John Doe Routes Data

Source: https://github.com/cvander/airtrails3d/blob/main/public/pages/john-doe.html

Fetches John Doe's routes data from a JSON file and then dynamically loads the globe JavaScript. This is crucial for initializing the visualization after data is available.

```javascript
// Load John's routes data and then initialize the globe
fetch('/js/data/john-routes.json')
  .then(response => response.json())
  .then(data => {
    window.johnRoutes = data; // Load and initialize globe after data is ready
    const script = document.createElement('script');
    script.src = '/js/app/globe.js';
    document.head.appendChild(script);
  })
  .catch(error => {
    console.error('Error loading john routes:', error);
    document.getElementById('flight-info').textContent = 'Error loading flight data. Check console for details.';
  });
```

--------------------------------

### Add New Character Route Data

Source: https://github.com/cvander/airtrails3d/blob/main/README.md

Create a JSON file to define routes for a new character. This file should be placed in the /public/js/data directory.

```json
{
  "2025": [
    // Add flight objects here
  ]
}
```

--------------------------------

### Add New Character Server Route

Source: https://github.com/cvander/airtrails3d/blob/main/README.md

Configure the server to serve the HTML page for a new character. This involves adding an entry to the server's route configuration.

```javascript
 '/new-character': '/pages/new-character.html'
```

--------------------------------

### Regional Visual Themes

Source: https://github.com/cvander/airtrails3d/blob/main/README.md

Sets specific color themes for different geographical regions. Use these to visually represent distinct travel circuits.

```javascript
// Regional themes
const asiaTheme = 0xdc267f;    // Magenta for K-pop routes
const europeTheme = 0x00ff99;  // Cyan for European circuits  
```

--------------------------------

### Route Data JSON Format

Source: https://github.com/cvander/airtrails3d/blob/main/README.md

Defines the structure for storing flight route information, including origin, destination, date, and flight details.

```json
{
  "2025": [
    {
      "id": 1,
      "from": "LAX",
      "to": "CDG", 
      "date": "2025-01-15",
      "flightNumber": "AF 066",
      "airline": "Air France"
    },
    {
      "id": 2, 
      "from": "CDG",
      "to": "GRU",
      "date": "2025-01-20",
      "flightNumber": "AF 456",
      "airline": "Air France"
    }
  ]
}
```

--------------------------------

### Distance-Based Route Coloring

Source: https://github.com/cvander/airtrails3d/blob/main/README.md

Applies different colors to routes based on their distance. This helps visually distinguish between short, medium, long, and transcontinental flights.

```javascript
// Distance-based coloring
if (distance > 8000) color = 0xff6b9d;      // Pink - transcontinental
else if (distance > 4000) color = 0xdc267f; // Magenta - long haul  
else if (distance > 1500) color = 0x9d4edd; // Purple - medium haul
else color = 0x7209b7;                       // Deep purple - short haul
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.