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, maximum-scale=1.0, user-scalable=no">
<meta name="theme-color" content="#0c1513">
<title>澜山序 · 云庐 — 三室两厅两卫 三维漫游</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=ZCOOL+XiaoWei&display=swap" rel="stylesheet">
<style>
  :root{
    --ink:#0c1513; --panel:rgba(13,24,21,.9); --line:rgba(146,183,168,.22);
    --txt:#e6efe9; --sub:#9db8ab; --amber:#f2b264; --amber-hi:#ffd9a0; --celadon:#8fc7b0;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%;overflow:hidden;background:var(--ink);font-family:'Noto Sans SC',sans-serif;color:var(--txt)}
  #app,#app canvas{position:fixed;inset:0;display:block}
  .display{font-family:'ZCOOL XiaoWei','Noto Sans SC',serif;font-weight:400}

  /* ---------- HUD ---------- */
  #hud{position:fixed;inset:0;pointer-events:none;transition:opacity .5s}
  body.intro-open #hud{opacity:0}
  .panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;
         box-shadow:0 8px 28px rgba(0,0,0,.45);backdrop-filter:blur(8px)}
  /* 左上铭牌 */
  #plaque{position:absolute;top:16px;left:16px;padding:10px 16px 10px 14px;display:flex;gap:12px;align-items:center;pointer-events:auto}
  #plaque .bar{width:4px;height:34px;background:linear-gradient(180deg,var(--amber),var(--celadon));border-radius:2px}
  #plaque h1{font-size:17px;letter-spacing:2px}
  #plaque p{font-size:11px;color:var(--sub);letter-spacing:1px;margin-top:2px}
  /* 右上：时钟+相位+罗盘 */
  #skybox{position:absolute;top:16px;right:16px;padding:10px 14px;display:flex;gap:14px;align-items:center;pointer-events:auto}
  #clock{font-size:28px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:1px;line-height:1}
  #phase{font-size:11px;color:var(--sub);display:flex;align-items:center;gap:6px;margin-top:4px}
  #phase i{width:7px;height:7px;border-radius:50%;background:var(--amber);display:inline-block;transition:background .6s}
  #compass{width:52px;height:52px;position:relative}
  #compass .ring{position:absolute;inset:0;border:1px solid var(--line);border-radius:50%;transition:transform .1s linear}
  #compass .ring b{position:absolute;font-size:9px;color:var(--sub);font-weight:500}
  #compass .ring b.n{top:3px;left:50%;transform:translateX(-50%);color:var(--amber-hi)}
  #compass .ring b.s{bottom:3px;left:50%;transform:translateX(-50%)}
  #compass .ring b.e{right:5px;top:50%;transform:translateY(-50%)}
  #compass .ring b.w{left:5px;top:50%;transform:translateY(-50%)}
  #compass .needle{position:absolute;left:50%;top:50%;width:2px;height:20px;background:linear-gradient(180deg,var(--amber) 50%,#5b6b64 50%);transform-origin:50% 100%;translate:-1px -20px}
  /* 底部控制条 */
  #bar{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);width:min(1150px,calc(100% - 20px));
       display:flex;gap:10px;align-items:stretch;pointer-events:auto;flex-wrap:wrap}
  #bar .panel{padding:10px 14px;display:flex;align-items:center;gap:10px}
  .p-label{font-size:10px;color:var(--sub);letter-spacing:3px;writing-mode:vertical-lr;text-orientation:upright;margin-right:2px}
  button{font-family:inherit;color:var(--txt);background:rgba(255,255,255,.04);border:1px solid var(--line);
         border-radius:7px;cursor:pointer;transition:all .18s;font-size:13px}
  button:hover{border-color:var(--amber);color:var(--amber-hi);transform:translateY(-1px);box-shadow:0 4px 14px rgba(242,178,100,.18)}
  button:active{transform:translateY(0)}
  .ibtn{width:36px;height:36px;font-size:15px;display:flex;align-items:center;justify-content:center}
  #speedBtn{min-width:64px;height:36px}
  /* 时间滑杆 */
  #timePanel{flex:1;min-width:250px;position:relative}
  #hourSlider{-webkit-appearance:none;appearance:none;width:100%;height:9px;border-radius:5px;outline:none;cursor:pointer;
    background:linear-gradient(90deg,#0b1030 0%,#1a2450 19%,#ff9d5c 26%,#ffe9b0 34%,#bfe0f5 50%,#ffe9b0 66%,#ff8a4d 74%,#1a2450 81%,#0b1030 100%)}
  #hourSlider::-webkit-slider-thumb{-webkit-appearance:none;width:19px;height:19px;border-radius:50%;background:#fff7e8;
    border:3px solid var(--amber);box-shadow:0 0 12px rgba(242,178,100,.7);cursor:grab;transition:transform .15s}
  #hourSlider::-webkit-slider-thumb:hover{transform:scale(1.2)}
  #hourSlider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff7e8;border:3px solid var(--amber);box-shadow:0 0 12px rgba(242,178,100,.7);cursor:grab}
  #ticks{display:flex;justify-content:space-between;font-size:9px;color:var(--sub);margin-top:5px;letter-spacing:1px}
  #bubble{position:absolute;top:-30px;transform:translateX(-50%);background:var(--amber);color:#1a130a;font-size:11px;font-weight:700;
          padding:2px 8px;border-radius:5px;opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap}
  /* 灯光 chips */
  #chips{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;max-width:46vw;scrollbar-width:none}
  #chips::-webkit-scrollbar{display:none}
  .chip{border:1px solid var(--line);border-radius:999px;padding:5px 11px;font-size:12px;background:transparent;
        color:var(--sub);white-space:nowrap;display:flex;align-items:center;gap:6px;transition:all .2s}
  .chip i{width:6px;height:6px;border-radius:50%;background:#3d4a44;transition:all .2s}
  .chip.on{background:rgba(242,178,100,.15);border-color:var(--amber);color:var(--amber-hi)}
  .chip.on i{background:var(--amber);box-shadow:0 0 8px var(--amber)}
  .chip.auto.on{background:rgba(143,199,176,.15);border-color:var(--celadon);color:var(--celadon)}
  .chip.auto.on i{background:var(--celadon);box-shadow:0 0 8px var(--celadon)}
  /* 准星 / 提示 */
  #xhair{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:#fff;
         box-shadow:0 0 0 2px rgba(0,0,0,.35),0 0 8px rgba(255,255,255,.6);opacity:0;transition:opacity .3s}
  body.walking.locked #xhair{opacity:.9}
  #toast{position:absolute;left:50%;bottom:96px;transform:translateX(-50%) translateY(8px);padding:8px 18px;font-size:12px;
         color:var(--amber-hi);opacity:0;transition:all .35s;pointer-events:none}
  #toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  /* 触屏摇杆 */
  #joy{display:none;position:absolute;left:22px;bottom:110px;width:118px;height:118px;border-radius:50%;
       border:1px solid var(--line);background:rgba(13,24,21,.5);pointer-events:auto;touch-action:none}
  #joyKnob{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px;border-radius:50%;background:rgba(242,178,100,.55);border:1px solid var(--amber)}
  @media (pointer:coarse){ body.........完整代码请登录后点击上方下载按钮下载查看