three三维模拟导弹发射系统动画代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three三维模拟导弹发射系统动画代码，选择发射点与目标，选择弹头类型，开始发射打击。打击爆炸的动画效果也不一样。

下面为部分代码预览，完整代码请点击下载或在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>Three.js 洲际导弹发射模拟（可选发射点/弹头类型/可视化轨迹）</title>
    <style>
        :root { --bg:#000; --card:rgba(0,0,0,.7); --text:#fff; --accent:#ff4d4d; --muted:#9fb6d7; }
        body { margin:0; overflow:hidden; background:var(--bg); color:var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial; }
        #container { width:100vw; height:100vh; }
        #ui-overlay {
            position:absolute; top:20px; left:20px; z-index:10;
            max-width:380px; padding:16px 18px; border-radius:12px;
            background:var(--card); border:1px solid rgba(255,255,255,.25);
        }
        h1 { margin:0 0 8px; font-size:20px; color:var(--accent); }
        p, label, select, button, input { font-size:14px; }
        ol { margin:6px 0 10px 18px; padding:0; }
        .row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:6px 0; }
        .row label { color:#dbe7ff; }
        .muted { color:var(--muted); font-size:12px; }
        #launch-btn {
            width:100%; padding:10px; margin-top:8px;
            background:#c82333; color:#fff; border:none; border-radius:8px; font-size:16px; font-weight:600; cursor:pointer;
        }
        #launch-btn:disabled { background:#444; cursor:not-allowed; }
        #launch-btn:not(:disabled):hover { background:#e63946; }
        #status { margin-top:10px; padding:10px; background:rgba(255,255,255,.08); border-radius:8px; font-weight:600; }
        .hint { margin-top:6px; font-size:12px; color:#8aa7d6; }
        .row select, .row input[type="checkbox"] { margin-left:6px; }
        .badge { display:inline-block; padding:2px 6px; border-radius:6px; background:rgba(255,255,255,.1); font-size:12px; }
    </style>
</head>
<body>
    <div id="container"></div>

    <div id="ui-overlay">
        <h1>ICBM 可视化模拟</h1>
        <p class="muted">说明：纯视觉演示，非真实弹道/参数。</p>
        <p><strong>指令：</strong></p>
        <ol>
            <li>用鼠标拖动旋转地球、滚轮缩放。</li>
            <li>在“选择模式”里切换发射点/目标点，然后点击地球打点。</li>
            <li>选择弹头类型，点击“发射”。</li>
        </ol>

        <div class="row">
            <span class="badge">选择模式</span>
            <label><input type="radio" name="mode" value="launch" checked> 发射点</label>
            <label><input type="radio" name="mode" value="target"> 目标点</label>
        </div>

        <div class="row">
            <label>弹头类型：
                <select id="warhead">
                    <option value="he">爆焰（火球+冲击波）</option>
                    <option value="ring">环形光波</option>
                    <option value="cluster">集束闪爆</option>
                    <option value="spark">烟花粒子</option>
                </select>
            </label>
        </div>

        <div class="row">
            <label><input type="checkbox" id="showTrack" checked> 显示预定轨迹</label>
            <label><input type="checkbox" id="showGround" checked> 显示地表连线</label>
        </div>

        <button id="launch-btn" disabled>发射</button>
        <div id="status">状态: 先选择发射点和目标点…</div>
        <div class="hint" id="coords">发射点: 未设置 | 目标: 未设置</div>
    </div>
      <script type="importmap">
{
 "imports":{
    "three":"//repo.bfw.wiki/bfwrepo/js/module/three/build/164/three.module.js",
    "three/addons/":"//repo.bfw.wiki/bfwrepo/js/module/three/examples/164/jsm/"
 }
}
</script>

    <script type="module">
        import * as THREE from 'three';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

        // DOM
        const container = document.getElementById('container');
        const launchBtn = document.getElementById('launch-btn');
        const statusDisplay = document.getElementById('status');
        const coordsEl = document.getElementById('coords');
        const warheadSelect = docume.........完整代码请登录后点击上方下载按钮下载查看