three实现三维场景公铁斜拉桥场景体验代码-html代码-BFW代码库

代码语言：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"/>
<title>长江公铁两用斜拉桥 · 昼夜气象实时仿真</title>
<style>
:root{
  --amber:#f2b544; --line:rgba(242,181,68,.22);
  --ink:rgba(9,14,21,.84); --txt:#dfe6ee; --txt-dim:#8b98a8;
  --serif:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong",serif;
  --sans:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#05080f;font-family:var(--sans);color:var(--txt)}
canvas{display:block}
#plate{position:fixed;left:26px;top:24px;z-index:10;pointer-events:none;
  border-left:3px solid var(--amber);padding-left:16px}
#plate h1{font-family:var(--serif);font-weight:600;font-size:29px;letter-spacing:.13em;
  color:#f4ead2;text-shadow:0 2px 14px rgba(0,0,0,.7)}
#plate .en{font-size:10px;letter-spacing:.38em;color:var(--amber);margin-top:5px}
#plate .sub{font-size:11px;color:var(--txt-dim);margin-top:7px;letter-spacing:.16em}
#hud{position:fixed;right:24px;top:22px;z-index:10;text-align:right;pointer-events:none}
#hudClock{font-family:var(--mono);font-size:34px;font-weight:700;color:#f4ead2;
  letter-spacing:.06em;text-shadow:0 2px 12px rgba(0,0,0,.8)}
#hudMeta{font-size:12px;color:var(--amber);letter-spacing:.3em;margin-top:2px}
#hudBot{display:flex;gap:14px;justify-content:flex-end;align-items:center;margin-top:10px}
#fps{font-family:var(--mono);font-size:11px;color:var(--txt-dim)}
#compass{width:36px;height:36px;border:1px solid var(--line);border-radius:50%;
  position:relative;background:var(--ink)}
#compass i{position:absolute;left:50%;top:1px;transform:translateX(-50%);
  font-style:normal;font-size:8px;color:var(--amber)}
#needle{position:absolute;left:50%;top:50%;width:2px;height:13px;
  background:linear-gradient(var(--amber),transparent);transform-origin:50% 100%;margin:-13px 0 0 -1px}
#dock{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:10;
  display:flex;align-items:stretch;background:var(--ink);
  border:1px solid var(--line);border-radius:6px;backdrop-filter:blur(8px);
  box-shadow:0 12px 40px rgba(0,0,0,.55);max-width:96vw;flex-wrap:wrap}
.grp{padding:10px 18px;display:flex;flex-direction:column;gap:7px;justify-content:center}
.grp+.grp{border-left:1px solid rgba(255,255,255,.07)}
.grpLabel{font-size:9px;letter-spacing:.4em;color:var(--txt-dim)}
.row{display:flex;align-items:center;gap:8px}
button{font-family:var(--sans);font-size:12px;color:var(--txt);background:transparent;
  border:1px solid rgba(255,255,255,.16);border-radius:4px;padding:5px 11px;cursor:pointer;
  letter-spacing:.08em;transition:all .18s}
button:hover{border-color:var(--amber);color:var(--amber)}
button.on{background:var(--amber);border-color:var(--amber);color:#14100a;font-weight:600}
#timeRange{width:230px;-webkit-appearance:none;height:3px;border-radius:2px;
  background:linear-gradient(90deg,#12203a,#3b6fb0 28%,#f2b544 52%,#e0603a 78%,#12203a);outline:none}
#timeRange::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;
  background:var(--amber);border:2px solid #14100a;cursor:pointer;box-shadow:0 0 8px var(--amber)}
.ticks{display:flex;justify-content:space-between;width:230px;font-family:var(--mono);
  font-size:8px;color:var(--txt-dim)}
#hint{position:fixed;left:50%;bottom:2px;transform:translateX(-50%);z-index:9;
  font-size:10px;color:rgba(180,190,205,.5);letter-spacing:.18em;pointer-events:none;white-space:nowrap}
#toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(8px);z-index:12;
  background:var(--ink);border:1px solid var(--line);border-radius:4px;padding:7px 22px;
  font-family:var(--serif);font-size:14px;letter-spacing:.3em;color:var(--amber);
  opacity:0;transition:all .35s;pointer-events:none}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#flash{position:fixed;inset:0;background:#eaf2ff;opacity:0;pointer-events:none;z-index:30;mix-blend-mode:screen}
#intro{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(120% 90% at 50% 108%,#1d2c4e 0%,#0b1428 42%,#04070f 100%);
  transition:opacity 1s ease;text-align:center}
#intro.gone{opacity:0;pointer-events:none}
#intro .deco{width:120px;height:1px;background:linear-gradient(90deg,transparent,var(--amber),transparent);margin:22px 0}
#intro h2{font-family:var(--serif);font-size:50px;font-weight:600;letter-spacing:.28em;color:#f4ead2;
  text-indent:.28em;text-shadow:0 4px 30px rgba(242,181,68,.25)}
#intro .ien{font-size:11px;letter-spacing:.55em;color:var(--amber);margin-top:14px;text-indent:.55em}
#intro .idesc{font-size:13px;color:var(--txt-dim);margin-top:26px;letter-spacing:.25em;line-height:2}
#enterBtn{margin-top:40px;font-family:var(--serif);font-size:17px;letter-spacing:.6em;text-indent:.6em;
  padding:13px 54px;border:1px solid var(--amber);border-radius:2px;color:var(--amber);background:transparent;transition:all .3s}
#enterBtn:hover{background:var(--amber);color:#14100a;box-shadow:0 0 34px rgba(242,181,68,.45)}
@media(max-width:820px){
  #plate h1{font-size:19px} #hudClock{font-size:24px}
  #timeRange,.ticks{width:150px} .grp{padding:8px 10px}
  #intro h2{font-size:30px}
}
</style>
</head>
<body>

<div id="intro">
  <h2>长江 · 斜拉桥</h2>
  <div class="ien">CABLE-STAYED ROAD-RAIL BRIDGE · LIVE SIMULATION</div.........完整代码请登录后点击上方下载按钮下载查看