three实现三维城市红绿灯交通汽车通行自动或手动切换模拟动画效果代码-html代码-BFW代码库

three实现三维城市红绿灯交通汽车通行自动或手动切换模拟动画效果代码

代码语言：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>
  html,body { height:100%; margin:0; overflow:hidden; }
  #ui {
    position: absolute; top: 10px; left: 10px; z-index: 10;
    background: rgba(0,0,0,0.55); color:#fff; padding:12px 14px; border-radius:10px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size:14px;
  }
  #ui button, #ui label { margin: 4px 0; display:block; }
  #ui .row { display:flex; gap:8px; margin-top:6px; flex-wrap: wrap; }
  #ui button {
    border: none; border-radius: 8px; padding: 8px 12px; cursor: pointer; color:#fff;
    background:#2d6cdf;
  }
  #ui button.green { background:#00b894; }
  #ui button.red   { background:#d63031; }
  #ui button.yellow{ background:#e1b12c; color:#222; }
  #ui .pill { display:inline-block; padding:3px 8px; border-radius:999px; background:#1f1f1f; margin-left:6px; }
  #legend {
    position:absolute; bottom:10px; left:10px; z-index:10; color:#fff; background:rgba(0,0,0,0.55);
    padding:8px 10px; border-radius:10px; font-size:12px;
  }
</style>
</head>
<body>
<div id="ui">
  <div>红绿灯状态：<span id="state" class="pill">初始化</span></div>
  <label><input type="checkbox" id="auto"> 自动循环</label>
  <div class="row">
    <button id="ewGreen" class="green">切到 东-西 方向绿灯</button>
    <button id="nsGreen" class="green">切到 南-北 方向绿灯</button>
    <button id="allRed" class="red">全红</button>
  </div>
  <div class="row">
    <button id="spawn" title="手动生成一辆随机方向的车">生成一辆车</button>
    <button id="clear" class="red" title="清空路面车辆">清空车辆</button>
  </div>
  <div class="row" style="align-items:center">
    流量：<input type="range" id="rate" min="0" max="2" step="0.05" value="0.8">
    <span id="rateVal" class="pill">0.8 辆/秒/方向</span>
  </div>
</div>
<div id="legend">操作：拖拽旋转 | 鼠标滚轮缩放 | 右键平移</div>
<canvas id="c"></canvas>

<!-- three.js 和 OrbitControls（非模块版） -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.144.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.146.js"></script>

<script>
document.addEventListener('DOMContentLoaded', () => {
  // 基本场景
  const canvas = document.getElementById('c');
  const renderer = new THREE.WebGLRenderer({ canvas, antialias:true });
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  renderer.setSize(window.innerWidth, window.innerHeight);

  const scene = new THREE.Scene();
  scene.background = new THREE.Color(0xa0c4ff);

  const camera = new THREE.PerspectiveCamera(55, window.innerWidth/window.innerHeight, 0.1, 500);
  camera.position.set(40, 40, 40);

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

  // 光照
  const hemi = new THREE.HemisphereLight(0xffffff, 0x444455, 0.8);
  scene.add(hemi);
  const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
  dirLight.position.set(30, 50, 20);
  scene.add(dirLig.........完整代码请登录后点击上方下载按钮下载查看