three实现三维全球可视化交互展示美军全球军事基地代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现三维全球可视化交互展示美军全球军事基地代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>US Global Military Bases - 3D Globe</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            background: #000;
            overflow: hidden;
            font-family: 'Arial', sans-serif;
            color: white;
        }
        #canvas-container {
            width: 100vw;
            height: 100vh;
        }
        #info-panel {
            position: absolute;
            top: 20px;
            left: 20px;
            background: rgba(0,0,0,0.8);
            border: 1px solid #ff4444;
            border-radius: 10px;
            padding: 20px;
            max-width: 320px;
            z-index: 100;
        }
        #info-panel h1 {
            font-size: 18px;
            color: #ff4444;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 2px;
        }
        #info-panel p {
            font-size: 13px;
            color: #aaa;
            line-height: 1.6;
        }
        #info-panel .stat {
            color: #ff6666;
            font-weight: bold;
            font-size: 24px;
            display: block;
            margin: 10px 0;
        }
        #tooltip {
            position: absolute;
            background: rgba(0,0,0,0.9);
            border: 1px solid #ff4444;
            border-radius: 5px;
            padding: 8px 12px;
            font-size: 13px;
            color: white;
            pointer-events: none;
            display: none;
            z-index: 200;
            white-space: nowrap;
        }
        #tooltip .base-name {
            color: #ff6666;
            font-weight: bold;
        }
        #tooltip .base-country {
            color: #aaa;
            font-size: 11px;
        }
        #legend {
            position: absolute;
            bottom: 20px;
            left: 20px;
            background: rgba(0,0,0,0.8);
            border: 1px solid #333;
            border-radius: 8px;
            padding: 15px;
            z-index: 100;
        }
        #legend h3 {
            font-size: 12px;
            color: #888;
            margin-bottom: 8px;
            text-transform: uppercase;
        }
        .legend-item {
            display: flex;
            align-items: center;
            margin: 5px 0;
            font-size: 12px;
            color: #ccc;
        }
        .legend-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 8px;
        }
        #controls-hint {
            position: absolute;
            bottom: 20px;
            right: 20px;
            background: rgba(0,0,0,0.6);
            border-radius: 8px;
            padding: 10px 15px;
            font-size: 11px;
            color: #666;
            z-index: 100;
        }
    </style>
</head>
<body>
    <div id="canvas-container"></div>
    
    <div id="info-panel">
        <h1>🇺🇸 US Military Bases Worldwide</h1>
        <span class="stat" id="base-count">750+</span>
        <p>Military bases and installations across <strong id="country-count">80+</strong> countries and territories worldwide.</p>
        <p style="margin-top:10px;font-size:11px;color:#666;">Drag to rotate • Scroll to zoom</p>
    </div>

    <div id="tooltip"></div>

    <div id="legend">
        <h3>Base Type</h3>
        <div class="legend-item"><div class="legend-dot" style="background:#ff0000;box-shadow:0 0 6px #ff0000;"></div> Major Base</div>
        <div class="legend-item"><div class="legend-dot" style="background:#ff8800;box-shadow:0 0 6px #ff8800;"></div> Naval Base</div>
        <div class="legend-item"><div class="legend-dot" style="background:#ffff00;box-shadow:0 0 6px #ffff00;"></div> Air Base</div>
        <div class="legend-item"><div class="legend-dot" style="background:#00ffff;box-shadow:0 0 6px #00ffff;"></div> Support Facility</div>
    </div>

    <div id="controls-hint">
        🖱️ Left drag: Rotate | Scroll: Zoom | Right drag: Pan
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        // ============ MILITARY BASES DATA ============
        const militaryBases = [
            // === EUROPE ===
            {name: "Ramstein Air Base", country: "Germany", lat: 49.4369, lon: 7.6003, type: "major"},
            {name: "Landstuhl Regional Medical Center", country: "Germany", lat: 49.4061, lon: 7.5644, type: "support"},
            {name: "Spangdahlem Air Base", country: "Germany", lat: 49.9725, lon: 6.6925, type: "air"},
            {name: "Grafenwöhr Training Area", country: "Germany", lat: 49.6969, lon: 11.9408, type: "major"},
            {name: "Stuttgart (EUCOM HQ)", country: "Germany", lat: 48.7758, lon: 9.1829, type: "major"},
            {name: "Vilseck (Rose Barracks)", country: "Germany", lat: 49.6153, lon: 11.8056, type: "support"},
            {name: "Wiesbaden Army Airfield", country: "Germany", lat: 50.0498, lon: 8.3254, type: "support"},
            {name: "Aviano Air Base", country: "Italy", lat: 46.0319, lon: 12.5964, type: "air"},
            {name: "Naval Air Station Sigonella", country: "Italy", lat: 37.4017, lon: 14.9222, type: "naval".........完整代码请登录后点击上方下载按钮下载查看