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

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

代码语言：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 =.........完整代码请登录后点击上方下载按钮下载查看