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.0, user-scalable=no">
<title>山脊环线 · 盘山骑行 — Alpine Switchback Loop</title>
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Sans+SC:wght@400;500;700&family=Rajdhani:wght@500;600;700&display=swap" rel="stylesheet">
<style>
  :root{
    --acc:#ffb36b;
    --ink:#eef2f6;
    --panel:rgba(10,15,24,.62);
    --line:rgba(255,255,255,.13);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{width:100%;height:100%;overflow:hidden;background:#0a0f1a}
  body{font-family:'Noto Sans SC',sans-serif;color:var(--ink);-webkit-user-select:none;user-select:none}
  canvas{display:block}
  #scene{position:fixed;inset:0;cursor:grab}
  #scene.drag{cursor:grabbing}

  #vig{position:fixed;inset:0;pointer-events:none;z-index:5;
    background:radial-gradient(ellipse at 50% 42%,transparent 55%,rgba(4,7,14,.42) 100%);}
  #flash{position:fixed;inset:0;pointer-events:none;z-index:6;background:#eaf2ff;opacity:0}

  .panel{position:fixed;z-index:10;background:var(--panel);
    border:1px solid var(--line);border-radius:12px;
    box-shadow:0 10px 34px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.07);
    backdrop-filter:blur(6px)}
  .panel::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;
    border-radius:3px;background:var(--acc);opacity:.9;transition:background .6s}

  #brand{top:18px;left:18px;padding:14px 20px 13px 22px;max-width:340px}
  #brand .tag{font-size:10px;letter-spacing:.34em;color:rgba(238,242,246,.55);font-weight:500}
  #brand h1{font-family:'Ma Shan Zheng',cursive;font-weight:400;font-size:38px;line-height:1.05;
    margin:2px 0 1px;text-shadow:0 2px 14px rgba(0,0,0,.5)}
  #brand h1 em{font-style:normal;color:var(--acc);transition:color .6s}
  #clockrow{display:flex;align-items:baseline;gap:12px;margin-top:6px}
  #clock{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:34px;letter-spacing:.04em;
    font-variant-numeric:tabular-nums;line-height:1}
  #dateTxt{font-size:11px;color:rgba(238,242,246,.6)}
  #chips{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}
  .chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;
    padding:4px 11px;border-radius:999px;border:1px solid var(--line);
    background:rgba(255,255,255,.06)}
  .chip b{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:14px}
  #rideChip{border-color:var(--acc);box-shadow:0 0 12px -3px var(--acc)}

  #nav{top:18px;right:18px;padding:10px 14px 8px;text-align:center}
  #compass{display:block}
  #camLabel{font-size:11px;letter-spacing:.22em;color:rgba(238,242,246,.62);margin-top:2px}

  #computer{bottom:18px;left:18px;padding:14px 22px 15px;min-width:252px}
  #speedrow{display:flex;align-items:center;gap:10px}
  #pbar{position:relative;width:7px;height:54px;border-radius:4px;
    background:rgba(255,255,255,.08);overflow:hidden;flex:none}
  #pbar i{position:absolute;left:0;width:100%;height:50%;transform:scaleY(0);transition:transform .1s linear}
  #pbar .pu{top:0;background:linear-gradient(180deg,#86e29b,var(--acc));transform-origin:50% 100%}
  #pbar .pd{bottom:0;background:linear-gradient(0deg,#ff8a7a,#c0392b);transform-origin:50% 0%}
  #pbar::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(255,255,255,.45)}
  #speed{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:58px;line-height:.9;
    font-variant-numeric:tabular-nums;letter-spacing:.01em;transition:color .2s,text-shadow .2s}
  #speed.pedal{color:#9ff0ae;text-shadow:0 0 20px rgba(110,230,140,.4)}
  #speed.brake{color:#ff9d92;text-shadow:0 0 20px rgba(255,110,90,.45)}
  #speedrow .unit{font-size:12px;color:rgba(238,242,246,.55);letter-spacing:.14em}
  #grade{margin-left:auto;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:22px;
    padding:2px 9px;border-radius:8px;background:rgba(255,255,255,.07)}
  #grade.up{color:#8fe3a4}#grade.down{color:#8fc7ff}
  #pushHint{margin-top:8px;font-size:12px;font-weight:700;letter-spacing:.24em;color:var(--acc);
    opacity:0;transition:opacity .3s;animation:pulse 1.5s ease-in-out infinite}
  #stats{display:grid;grid-template-columns:repeat(3,auto);gap:4px 22px;margin-top:10px;
    border-top:1px dashed rgba(255,255,255,.14);padding-top:9px}
  .st .k{font-size:10px;letter-spacing:.2em;color:rgba(238,242,246,.5)}
  .st .v{font-family:'Rajdhani',sans-serif;font-weight:600;font-size:19px;font-variant-numeric:tabular-nums}
  .st .v small{font-size:10px;color:rgba(238,242,246,.5);margin-left:2px}

  #ctrl{bottom:18px;right:18px;padding:12px 14px 13px;width:296px}
  #elev{display:block;width:100%;margin-bottom:9px}
  .row{display:flex;align-items:center;gap:6px;margin-top:7px;flex-wrap:wrap}
  .row .lab{font-size:10px;letter-spacing:.24em;color:rgba(238,242,246,.5);width:34px}
  .btn{font-family:'Noto Sans SC',sans-serif;font-size:12px;font-weight:500;color:var(--ink);
    background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:8px;
    padding:5px 10px;cursor:pointer;transition:all .18s ease;line-height:1.2}
  .btn:hover{transform:translateY(-1px);border-color:var(--acc);background:rgba(255,255,255,.11)}
  .btn.on{background:var(--acc);border-color:var(--acc);color:#10151f;font-weight:700;
    box-shadow:0 0 14px -2px var(--acc)}
  .btn.wide{flex:1}
  .mini{font-size:10px;letter-spacing:.08em;color:rgba(238,242,246,.45);margin-left:auto}
  #hint{position:fixed;z-index:10;bottom:20px;left:50%;transform:translateX(-50%);
    font-size:11px;letter-spacing:.16em;color:rgba(238,242,246,.5);white-space:nowrap}
  #hint kbd{font-family:'Rajdhani',sans-serif;border:1px solid var(--line);border-bottom-width:2px;
    border-radius:4px;padding:0 5px;margin:0 2px;background:rgba(255,255,255,.07)}

  #toast{position:fixed;z-index:20;top:24px;left:50%;transform:translate(-50%,-16px);
    padding:9px 22px;border-radius:999px;font-size:14px;font-weight:500;letter-spacing:.12em;
    background:rgba(10,15,24,.78);border:1px solid var(--acc);color:var(--ink);
    opacity:0;p.........完整代码请登录后点击上方下载按钮下载查看