three三维模拟洲际导弹发射井发射分离打击目标爆炸动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three三维模拟洲际导弹发射井发射分离打击目标爆炸动画效果代码，df-5c，覆盖全球，满满的安全感与自豪感，中国加油。

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

<!doctype html>
<html lang="zh">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Three.js 发射井导弹演示（加高+垂直文字+震撼爆炸）</title>
  <style>
    html, body { margin: 0; height: 100%; overflow: hidden; background: #87CEEB; }
    #hud {
      position: fixed; left: 12px; top: 10px; color: #1f2937; 
      font: 14px/1.5em system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
      background: rgba(255,255,255,0.45); padding: 8px 12px; border-radius: 8px; user-select: none;
      backdrop-filter: blur(5px); box-shadow: 0 2px 10px rgba(0,0,0,0.15);
      border: 1px solid rgba(255,255,255,0.2);
    }
    #hud b { color: #003366; }
    #btns { margin-top: 8px; display: flex; gap: 8px; }
    button {
      color: #1f2937; background: rgba(255,255,255,0.5); border: 1px solid rgba(0,0,0,0.1); 
      border-radius: 6px; padding: 6px 12px; cursor: pointer; font-weight: 500;
    }
    button:hover { background: rgba(255,255,255,0.8); }
  </style>
</head>
<body>
  <div id="hud">
    <div><b>提示</b>：点击 [发射] 开始，[R] 重播，[空格] 发射/暂停，[切换视角] 自由/伴飞。</div>
    <div id="tinfo">T = 0.0 s</div>
    <div id="btns">
      <button id="launchPauseBtn">发射</button>
      <button id="camToggle">切换视角</button>
      <button id="restart">重开</button>
    </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';
    import { Sky } from 'three/addons/objects/Sky.js';

    // ===== 基础场景（白天） =====
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.outputColorSpace = THREE.SRGBColorSpace;
    renderer.shadowMap.enabled = true;
    renderer.toneMapping = THREE.ACESFilmicToneMapping;
    document.body.appendChild(renderer.domElement);

    const scene = new THREE.Scene();

    const camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 0.1, 20000);

    const controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;

    scene.fog = new THREE.Fog(0xa0c0d0, 500, 5000);

    const hemi = new THREE.HemisphereLight(0xffffff, 0xb0c4de, 1.2);
    scene.add(hemi);

    const dir = new THREE.DirectionalLight(0xfff8e7, 2.8);
    dir.castShadow = true;
    dir.shadow.mapSize.set(2048, 2048);
    dir.shadow.camera.near = 10; dir.shadow.camera.far = 1000;
    dir.shadow.camera.left = -500; dir.shadow.camera.right = 500;
    dir.shadow.camera.top = 500; dir.shadow.camera.bottom = -500;
    scene.add(dir);

    // 天空
    const sky = new Sky();
    sky.scale.setScalar(10000);
    scene.add(sky);
    const skyUniforms = sky.material.uniforms;
    skyUniforms['turbidity'].value = 8;
    skyUniforms['rayleigh'].value = 2;
    skyUniforms['mieCoefficient'].value = 0.005;
    skyUniforms['mieDirectionalG'].value = 0.8;
    const sun = new THREE.Vector3();
    function updateSun() {
        const phi = THREE.MathUtils.degToRad(90 - 35);
        const theta = THREE.MathUtils.degToRad(120);
        sun.setFromSphericalCoords(1, phi, theta);
        sky.material.uniforms['sunPosition'].value.copy(sun);
        dir.position.copy(sun).multiplyScalar(400);
        renderer.toneMappingExposure = 0.6;
    }
    updateSun();

    // 地面
    {
      const groundGeo = new THREE.PlaneGeometry(10000, 10000);
      const groundMat = new THREE.MeshStandardMaterial({ color: 0xcdb79e, roughness: 0.9, metalness: 0 });
      const ground = new THREE.Mesh(groundGeo, groundMat);
      ground.receiveShadow = true;
      ground.rotation.x = -Math.PI/2;
      scene.add(ground);
    }

    // ===== 发射井（简化） =====
    const silo = new THREE.Group(); scene.add(silo);
    const siloRadius = 8, wallThick = 1.2;
    const wallGeo = new THREE.CylinderGeometry(siloRadius, siloRadius, 6, 48, 1, true);
    const wallMat = new THREE.MeshStandardMaterial({ color: 0x223044, roughness: 0.9, metalness: 0.05, side: THREE.DoubleSide });
.........完整代码请登录后点击上方下载按钮下载查看