three实现煤炭火车在草原上冒烟行驶三维动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现煤炭火车在草原上冒烟行驶三维动画效果代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <title>three.js 直线铁路 · 蒸汽火车 + 煤炭车厢 · 田野 · 蓝天白云</title>
  <style>
    html, body { margin: 0; height: 100%; background: #000; }
    canvas { display: block; }
    #info {
      position: absolute; top: 10px; left: 10px; z-index: 10;
      color: #fff; background: rgba(0,0,0,0.45); padding: 8px 12px; border-radius: 8px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      font-size: 13px; line-height: 1.6;
    }
  </style>
</head>
<body>
  <div id="info">
    直线铁路上的蒸汽火车 + 多节煤炭车厢（OrbitControls 可旋转/缩放）<br />
    - 鼠标左键：旋转 ｜ 右键：平移 ｜ 滚轮：缩放<br/>
    - 相机沿 X 方向跟随火车（可随时拖拽调整视角）
  </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';

    // 常量
    const GAUGE = 1.4;             // 轨距（与车轮/车体匹配）
    const TRACK_LEN = 6000;        // 渲染的直线轨道长度（足够长，视觉近似“无限”）
    const SLEEPER_SPACING = 1.5;   // 枕木间距
    const TRAIN_SPEED = 4.0;       // 列车速度（单位/秒）
    const NUM_WAGONS = 12;         // 煤炭车厢数量
    const WAGON_SPACING = 4.6;     // 车厢间隔（从中心到中心的间距）
    const WORLD_TREE_COUNT = 600;  // 沿线树木数量

    // 基础
    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0x87c7ff); // 天空蓝
    scene.fog = new THREE.FogExp2(0x87c7ff, 0.0013);

    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    // 更明亮的输出
    renderer.toneMapping = THREE.ACESFilmicToneMapping;
    renderer.toneMappingExposure = 1.15;

    document.body.appendChild(renderer.domElement);

    const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 5000);
    camera.position.set(-12, 10, 18);

    const controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.target.set(0, 3, 0);

    // 灯光（增强亮度）
    const hemi = new THREE.HemisphereLight(0xbbddee, 0x4a7f29, 1.0);
    scene.add(hemi);

    const sun = new THREE.DirectionalLight(0xffffff, 2.4);
    sun.castShadow = true;
    sun.shadow.mapSize.set(2048, 2048);
    sun.shadow.camera.near = 1;
    sun.shadow.camera.far = 400;
    sun.shadow.camera.left = -80;
    sun.shadow.camera.right = 80;
    sun.shadow.camera.top = 80;
    sun.shadow.camera.bottom = -80;
    sun.position.set(-30, 40, 20);
    scene.add(sun);
    scene.add(sun.target);

    // 轻微环境光，提亮阴影处
    scene.add(new THREE.AmbientLight(0xffffff, 0.25));

    // 地面：超大平面作为“无尽”的田野
    {
      const groundGeo = new THREE.PlaneGeometry(20000, 20000, 1, 1);
      const groundMat = new THREE.MeshLambertMaterial({ color: 0x6ec15a });
      const ground = new THREE.Mesh(groundGeo, groundMat);
      ground.rotation.x = -Math.PI / 2;
      ground.receiveShadow = true;
      scene.add(ground);
    }

    // 沿线树木
    addTracksideTrees(WORLD_TREE_COUNT, -TRACK_LEN/2, TRACK_LEN/2, 12, 90);
    function addTracksideTrees(count, minX, maxX, minDistZ, maxDistZ) {
      const trunkMat = new THREE.MeshStandardMate.........完整代码请登录后点击上方下载按钮下载查看