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>火箭军远程打击演示</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { overflow: hidden; background: #000; font-family: 'Microsoft YaHei', sans-serif; }
canvas { display: block; }
#info {
position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
color: #0f0; font-size: 18px; text-align: center;
background: rgba(0,0,0,0.7); padding: 10px 30px; border-radius: 8px;
border: 1px solid #0f0; text-shadow: 0 0 10px #0f0;
pointer-events: none; z-index: 10;
}
#controls {
position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
display: flex; gap: 15px; z-index: 10;
}
#controls button {
padding: 10px 25px; font-size: 16px; cursor: pointer;
background: rgba(0,50,0,0.8); color: #0f0; border: 1px solid #0f0;
border-radius: 5px; font-family: inherit;
transition: all 0.3s;
}
#controls button:hover { background: rgba(0,100,0,0.8); box-shadow: 0 0 15px #0f0; }
#status {
position: absolute; top: 60px; left: 20px;
color: #0f0; font-size: 14px;
background: rgba(0,0,0,0.7); padding: 15px;
border: 1px solid #0a0; border-radius: 5px;
pointer-events: none; z-index: 10; min-width: 200px;
}
#radar {
position: absolute; bottom: 20px; right: 20px;
width: 180px; height: 180px;
border: 2px solid #0f0; border-radius: 50%;
background: rgba(0,20,0,0.8);
z-index: 10; pointer-events: none;
}
#radarCanvas { border-radius: 50%; }
</style>
</head>
<body>
<div id="info">🚀 火箭军远程打击演示系统</div>
<div id="status">
<div>━━ 系统状态 ━━</div>
<div id="phase">阶段: 待命</div>
<div id="speed">速度: 0 km/h</div>
<div id="distance">目标距离: -- m</div>
<div id="launcher">发射架: 收起</div>
<div id="missiles">剩余弹药: 8/8</div>
</div>
<div id="controls">
<button onclick="startMission()">▶ 开始任务</button>
<button onclick="resetMission()">↺ 重置</button>
<button onclick="toggleCamera()">📷 切换视角</button>
</div>
<div id="radar"><canvas id="radarCanvas" width="180" height="180"></canvas></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// ============ 全局变量 ============
let scene, camera, renderer, clock;
let vehicle, launcherGroup, wheels = [], missiles = [];
let target, targetMarker;
let particles = [], explosions = [], trails = [];
let smokeParticles = [];

// 动画状态
let missionPhase = 'idle'; // idle, driving, stopping, raising, aiming, firing, complete
let vehiclePos = { x: -120, z: 0 };
let vehicleSpeed = 0;
let launcherAngle = 0;
let targetLauncherAngle = Math.PI / 4;
let firedMissiles = [];
let missileCount = 8;
let fireIndex = 0;
let fireTimer = 0;
let cameraMode = 0;
let driveTarget = { x: -20, z: 0 };
let totalTime = 0;
let targetPos = { x: 150, y: 0, z: 30 };
let dustParticles = [];
let exhaustParticles = [];

// ============ 初始化 ============
function init() {
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0x1a1a2e);
    scene.fog = new THREE.FogExp2(0x1a1a2e, 0.003);

    camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 2000);
    camera.position.set(-140, 30, 50);

    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    renderer.toneMapping = THREE.ACESFilmicToneMapping;
    renderer.toneMappingExposure = 1.2;
    document.body.appendChild(renderer.domElement);

    clock = new THREE.Clock();

    createLights();
    createSky();
    createGround();
    createVehicle();
    createTarget();
    createEnvironment();

    window.addEventListener('resize', onResize);
    animate();
}

// ============ 灯光 ============
function createLights() {
    const ambient = new THREE.AmbientLight(0x334466, 0.6);
    scene.add(ambient);

    const dirLight = new THREE.Directio.........完整代码请登录后点击上方下载按钮下载查看