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">
<title>星耀广场 STARLIGHT PLAZA · Three.js 商业综合体</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&family=ZCOOL+QingKe+HuangYou&display=swap" rel="stylesheet">
<style>
  :root{
    --ink:#0d131b; --panel:rgba(14,20,28,.9); --line:rgba(242,238,228,.14);
    --gold:#f2b544; --teal:#3ec9b8; --coral:#ff6a5c;
    --paper:#f2efe6; --muted:#9aa7b4;
    --disp:'ZCOOL QingKe HuangYou',system-ui,sans-serif;
    --body:'Noto Sans SC',system-ui,sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%;overflow:hidden;background:var(--ink);font-family:var(--body);color:var(--paper)}
  #app{position:fixed;inset:0}
  #app canvas{display:block}
  #vignette{position:fixed;inset:0;pointer-events:none;z-index:5;
    background:radial-gradient(ellipse at 50% 42%,transparent 55%,rgba(4,8,14,.52) 100%)}
  /* ---------- 通用面板 ---------- */
  .panel{background:var(--panel);border:1px solid var(--line);position:relative;backdrop-filter:blur(6px)}
  .panel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold)}
  .clip{clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
  /* ---------- 品牌区 ---------- */
  #brand{position:fixed;top:20px;left:22px;z-index:20;padding:14px 22px 12px 20px;pointer-events:none}
  #brand .tag{font-size:11px;letter-spacing:4px;color:var(--teal);margin-bottom:4px}
  #brand h1{font-family:var(--disp);font-weight:400;font-size:42px;letter-spacing:8px;line-height:1;color:var(--paper);text-shadow:0 2px 18px rgba(0,0,0,.55)}
  #brand .en{font-size:11px;letter-spacing:5px;color:var(--gold);margin-top:6px}
  #brand .stats{display:flex;gap:14px;margin-top:10px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
  #brand .stats b{color:var(--paper);font-weight:500}
  #brand .chip{border:1px solid var(--line);padding:1px 8px;color:var(--gold)}
  /* ---------- 视图控制条 ---------- */
  #viewbar{position:fixed;top:20px;right:22px;z-index:20;display:flex;gap:10px;align-items:stretch}
  .vbtn{pointer-events:auto;cursor:pointer;background:var(--panel);border:1px solid var(--line);color:var(--paper);
    font-family:var(--body);font-size:13px;letter-spacing:3px;padding:10px 16px;transition:.22s;position:relative;overflow:hidden}
  .vbtn::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--gold);transition:.25s}
  .vbtn:hover{transform:translateY(-2px);border-color:rgba(242,181,68,.5)}
  .vbtn:hover::after{width:100%}
  .vbtn.active{background:var(--gold);color:#141414;border-color:var(--gold);font-weight:700}
  .vbtn.active::after{display:none}
  #dnToggle{pointer-events:auto;cursor:pointer;display:flex;align-items:center;gap:8px;background:var(--panel);
    border:1px solid var(--line);padding:0 14px;font-size:13px;letter-spacing:2px;transition:.22s}
  #dnToggle:hover{border-color:rgba(62,201,184,.6);transform:translateY(-2px)}
  #dnToggle .track{width:40px;height:18px;border:1px solid var(--line);position:relative;transition:.3s}
  #dnToggle .thumb{position:absolute;top:2px;left:2px;width:12px;height:12px;background:var(--gold);transition:.3s cubic-bezier(.6,-.2,.3,1.4)}
  body.night #dnToggle .thumb{left:24px;background:var(--teal)}
  body.night #dnToggle .track{border-color:rgba(62,201,184,.5)}
  /* ---------- 楼层导览 ---------- */
  #directory{position:fixed;left:22px;top:172px;z-index:20;width:238px;pointer-events:auto}
  #dirHead{width:100%;cursor:pointer;display:flex;justify-content:space-between;align-items:center;
    background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--teal);
    color:var(--paper);font-family:var(--disp);font-size:17px;letter-spacing:4px;padding:9px 14px}
  #dirHead .arr{transition:.3s;color:var(--teal)}
  #directory.closed .arr{transform:rotate(-90deg)}
  #dirBody{max-height:44vh;overflow-y:auto;transition:max-height .4s ease;border:1px solid var(--line);border-top:none;background:var(--panel)}
  #directory.closed #dirBody{max-height:0;border:none}
  #dirBody::-webkit-scrollbar{width:5px}
  #dirBody::-webkit-scrollbar-thumb{background:rgba(242,181,68,.4)}
  .floorLabel{font-size:11px;letter-spacing:3px;color:var(--gold);padding:8px 14px 4px;border-bottom:1px dashed var(--line)}
  .dirItem{display:flex;align-items:center;gap:9px;padding:7px 14px;cursor:pointer;transition:.18s;border-left:2px solid transparent}
  .dirItem:hover{background:rgba(242,181,68,.09);border-left-color:var(--gold);transform:translateX(3px)}
  .dirItem .dot{width:9px;height:9px;flex:none;transform:rotate(45deg)}
  .dirItem .nm{font-size:13px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dirItem .ct{font-size:10px;color:var(--muted);letter-spacing:1px}
  /* ---------- 提示 & 指南针 ---------- */
  #hint{position:fixed;left:22px;bottom:20px;z-index:20;display:flex;gap:14px;align-items:center;pointer-events:none;
    font-size:12px;color:var(--muted);letter-spacing:1px}
  #hint kbd{border:1px solid var(--line);background:var(--panel);padding:2px 8px;font-family:var(--body);color:var(--paper);font-size:11px}
  #compass{width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:var(--panel);position:relative;pointer-events:none}
  #compass::after{content:"N";position:absolute;top:3px;left:50%;transform:translateX(-50%);font-size:9px;color:var(--gold)}
  #needle{position:absolute;inset:0;transition:transform .1s linear}
  #needle::before{content:"";position:absolute;left:50%;top:9px;transform:translateX(-50%);
    border:5px solid transparent;border-bottom:15px solid var(--coral)}
  /* ---------- 门店信息 ---------- */
  #info{position:fixed;right:22px;bottom:20px;z-index:25;width:302px;padding:18px 20px 16px;
    transform:translateX(130%);transition:transform .5s cubic-bezier(.2,.9,.25,1)}
  #info.show{transform:translateX(0)}
  #info .row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
  #info .fBadge{font-family:var(--disp);background:var(--gold);color:#161616;padding:2px 10px;font-size:15px;letter-spacing:2px}
  #info .cat{border:1px solid var(--teal);color:var(--teal);font-size:11px;padding:2px 9px;letter-spacing:2px}
  #info .rate{margin-left:auto;color:var(--gold);font-size:13px;letter-spacing:1px}
  #info h2{font-family:var(--disp);font-weight:400;font-size:30px;letter-spacing:4px;line-height:1.1}
  #info .en{font-size:11px;letter-spacing:3px;color:var(--muted);margin:4px 0 10px}
  #info p{font-size:13px;line-height:1.75;color:#cfd6dd;border-top:1px dashed var(--line);padding-top:10px}
  #info .meta{font-size:11px;color:var(--muted);margin-top:8px;letter-spacing:1px}
  #info .acts{display:flex;gap:10px;margin-top:12px}
  #info button{cursor:pointer;font-family:var(--body.........完整代码请登录后点击上方下载按钮下载查看