three实现三维开放城市汽车行驶场景代码-html代码-BFW代码库

three实现三维开放城市汽车行驶场景代码

代码语言：html

所属分类：其他

代码描述：三维开放城市汽车驾驶碰撞

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Open City — Three.js</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{overflow:hidden;background:#000;font-family:'Segoe UI',-apple-system,sans-serif}
#minimap{position:fixed;top:16px;right:16px;border:2px solid rgba(255,255,255,.15);border-radius:10px;z-index:10;background:rgba(0,0,20,.7)}
#hud{position:fixed;bottom:24px;left:24px;color:#fff;z-index:10;pointer-events:none}
.speed-v{font-size:52px;font-weight:800;line-height:1;letter-spacing:-2px;text-shadow:0 2px 20px rgba(0,0,0,.6)}
.speed-u{font-size:15px;font-weight:400;opacity:.5;margin-left:2px}
.hud-row{font-size:13px;opacity:.55;margin-top:6px;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.hud-tags{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.hud-tag{padding:3px 10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:6px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;backdrop-filter:blur(4px)}
.hud-tag.active{background:rgba(74,158,255,.2);border-color:rgba(74,158,255,.4);color:#4a9eff}
#ctrl{position:fixed;bottom:24px;right:24px;color:rgba(255,255,255,.45);font-family:'Courier New',monospace;font-size:11px;z-index:10;text-align:right;line-height:2.1;text-shadow:0 1px 4px rgba(0,0,0,.8);pointer-events:none}
.key{display:inline-block;padding:1px 5px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:3px;font-size:10px;min-width:16px;text-align:center}
</style>
</head>
<body>
<canvas id="minimap" width="200" height="200"></canvas>
<div id="hud"></div>
<div id="ctrl">
  <span class="key">W</span><span class="key">A</span><span class="key">S</span><span class="key">D</span> Drive &nbsp;
  <span class="key">Space</span> Brake<br>
  <span class="key">1</span>/<span class="key">2</span> Camera &nbsp;
  <span class="key">R</span> Rain &nbsp;
  <span class="key">T</span> Snow &nbsp;
  <span class="key">F</span> Clear<br>
  <span class="key">L</span> Day/Night &nbsp;
  <span class="key">V</span> Toggle Time
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
'use strict';

// =============================================================
// CONFIGURATION
// =============================================================
const CFG = {
  grid: 5, step: 80, roadW: 18,
  carAccel: 28, carBrake: 45, carFriction: .985, carSteer: 2.8, carSteerRet: .88, carMaxSpd: 65,
  npcCount: 25, npcSpeed: 4,
  greenDur: 8, yellowDur: 3,
  dayLen: 120,
};

const CITY_H = (CFG.grid - 1) * CFG.step;
const CITY_HALF = CITY_H / 2;

// =============================================================
// GLOBALS
// =============================================================
let scene, camera, renderer, clock;
let sunLight, ambLight;
let car, intersections2d = [], buildings = [], trafficLights = [], npcs = [], streetLights = [];
let bldgMats = [];
let rainSys, snowSys, starsSys;
let camMode = 'tp';
let dayTime = 0.3;
let timeSpeed = 1 / CFG.dayLen;
let autoTime = true;
let weatherType = 'clear';
const keys = { w:0, a:0, s:0, d:.........完整代码请登录后点击上方下载按钮下载查看