three实现3d三维地球起点终点飞行轨迹离线生成mp4视频动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现3d三维地球起点终点飞行轨迹离线生成mp4视频动画效果代码

代码标签： three 3d 三维地球起点终点飞行轨迹离线生成 mp4 视频动画

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>✈️ 三维地球飞行轨迹生成器 (GLB 模型 + WebCodecs MP4)</title>
    <style>
        /* CSS样式与之前版本完全相同 */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Microsoft YaHei', Arial, sans-serif; background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); overflow: hidden; color: #ecf0f1; }
        #container { width: 100vw; height: 100vh; position: relative; }
        #canvas { width: 100%; height: 100%; display: block; }
        #controls { position: absolute; top: 20px; left: 20px; background: rgba(255, 255, 255, 0.95); padding: 25px; border-radius: 15px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); max-width: 380px; z-index: 100; backdrop-filter: blur(10px); color: #2c3e50; }
        h2 { margin-bottom: 20px; color: #2c3e50; font-size: 20px; text-align: center; border-bottom: 2px solid #3498db; padding-bottom: 10px; }
        .input-group { margin-bottom: 18px; }
        label { display: block; margin-bottom: 8px; color: #34495e; font-size: 14px; font-weight: 600; }
        input, select { width: 100%; padding: 10px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 14px; transition: all 0.3s; }
        input:focus, select:focus { outline: none; border-color: #3498db; box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1); }
        .coords-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        button { width: 100%; padding: 14px; margin-top: 15px; background: linear-gradient(135deg, #3498db 0%, #2980b9 100%); color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 16px; font-weight: bold; transition: all 0.3s; box-shadow: 0 4px 15px rgba(52, 152, 219, 0.4); }
        button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(52, 152, 219, 0.6); }
        button:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
        #downloadBtn { background: linear-gradient(135deg, #27ae60 0%, #229954 100%); box-shadow: 0 4px 15px rgba(39, 174, 96, 0.4); }
        #downloadBtn:hover { box-shadow: 0 6px 20px rgba(39, 174, 96, 0.6); }
        #status { margin-top: 15px; padding: 12px; background: linear-gradient(135deg, #6a82fb 0%, #fc5c7d 100%); border-radius: 8px; font-size: 13px; color: white; text-align: center; font-weight: 600; display: none; }
        .hint { font-size: 12px; color: #7f8c8d; margin-top: 15px; text-align: center; padding-top: 15px; border-top: 1px solid #ecf0f1; }
        .label { color: #FFF; font-family: 'Microsoft YaHei', sans-serif; padding: 5px 10px; background: rgba(0, 0, 0, 0.6); border-radius: 5px; font-size: 14px; text-shadow: 1px 1px 3px rgba(0,0,0,0.8); white-space: nowrap; }
        .distance-label { color: #ffd700; font-weight: bold; font-size: 16px; background: transparent; }
    </style>
</head>
<body>
    <div id="container">
        <canvas id="canvas"></canvas>
        <div id="controls">
            <h2>✈️ 飞行轨迹生成器 (GLB)</h2>
            <div class="input-group">
                <label>🛫 起点城市</label>
                <select id="startCity">
                    <option value="39.9042,116.4074" data-name="北京">北京 Beijing</option>
                    <option value="31.2304,121.4737" data-name="上海">上海 Shanghai</option>
                    <option value="40.7128,-74.0060" data-name="纽约">纽约 New York</option>
                    <option value="51.5074,-0.1278" data-name="伦敦">伦敦 London</option>
                    <option value="48.8566,2.3522" data-name="巴黎">巴黎 Paris</option>
                    <option value="custom" data-name="自定义起点">自定义坐标...</option>
                </select>
            </div>
            <div class="input-group" id="startCustom" style="display:none;">
                <div class="coords-grid">
                    <div><label>纬度 °</label><input type="number" id="startLat" placeholder="39.9042" step="0.0001">&l.........完整代码请登录后点击上方下载按钮下载查看