three实现三维雾隐山居木屋景色场景代码-html代码-BFW代码库

代码语言：html
所属分类：其他
代码由minimax-m3.1-flash ai生成，可能有错误，仅供参考：点击查看提示词
代码描述：三维雾隐山居木屋景色
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
<meta name="theme-color" content="#0a0f14" />
<title>雾隐山居 · Misty Mountain Retreat</title>
<style>
  :root{
    --ink:#0a0f14;
    --text:#e9ece7;
    --muted:#9aaca4;
    --amber:#e9a94b;
    --amber-soft:rgba(233,169,75,.16);
    --moss:#3f6b57;
    --fog:#a8b6bd;
    --wood:#8a5a3b;
    --line:rgba(255,255,255,.10);
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{height:100%;margin:0;background:var(--ink);overflow:hidden;color:var(--text);
    font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  canvas{display:block;touch-action:none}
  #app{position:fixed;inset:0}

  /* ---------- 左上角品牌 ---------- */
  .brand{position:fixed;left:24px;top:22px;display:flex;gap:13px;align-items:center;z-index:6;pointer-events:none;
    text-shadow:0 2px 20px rgba(0,0,0,.75)}
  .brand .mark{width:44px;height:44px;flex:0 0 auto;filter:drop-shadow(0 3px 12px rgba(0,0,0,.6))}
  .brand h1{margin:0;font-size:23px;font-weight:600;letter-spacing:.24em;line-height:1.15}
  .brand p{margin:5px 0 0;font-size:9.5px;letter-spacing:.36em;color:var(--muted);text-transform:uppercase}

  /* ---------- 右上角工具 ---------- */
  .tools{position:fixed;right:24px;top:22px;display:flex;gap:10px;z-index:9}
  .tbtn{display:flex;align-items:center;gap:7px;height:38px;padding:0 15px;border-radius:999px;cursor:pointer;
    background:rgba(14,24,21,.52);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
    border:1px solid var(--line);color:#dfe7e1;font-size:12.5px;letter-spacing:.06em;
    box-shadow:0 8px 26px rgba(0,0,0,.4);transition:.22s}
  .tbtn:hover{border-color:rgba(233,169,75,.5);color:#fff;box-shadow:0 8px 28px rgba(0,0,0,.5),0 0 18px rgba(233,169,75,.16)}
  .tbtn svg{width:15px;height:15px;flex:0 0 auto}
  .tbtn .st{font-size:11px;color:var(--amber);min-width:14px}

  /* ---------- 底部提示 ---------- */
  .hint{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:6;pointer-events:none;
    padding:8px 18px;border-radius:999px;font-size:11.5px;letter-spacing:.14em;color:#c6d2cb;
    background:rgba(12,20,18,.42);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.08);box-shadow:0 8px 24px rgba(0,0,0,.4);white-space:nowrap}
  .hint b{color:var(--amber);font-weight:500}

  /* ---------- 控制面板 ---------- */
  .panel{position:fixed;right:24px;top:78px;bottom:22px;width:334px;z-index:8;
    padding:18px 18px 24px;border-radius:22px;overflow-y:auto;overscroll-behavior:contain;
    background:linear-gradient(180deg,rgba(17,28,25,.76),rgba(9,16,14,.70));
    backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
    border:1px solid var(--line);box-shadow:0 26px 70px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06)}
  .panel::-webkit-scrollbar{width:9px}
  .panel::-webkit-scrollbar-track{background:rgba(255,255,255,.04);border-radius:9px}
  .panel::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--moss),var(--wood));border-radius:9px;border:2px solid transparent;background-clip:padding-box}
  .panel::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#4e836b,#a06a44);background-clip:padding-box}
  .panel h2{margin:0 0 14px;font-size:10.5px;letter-spacing:.34em;color:var(--muted);font-weight:500;text-transform:uppercase;
    display:flex;align-items:center;gap:10px}
  .panel h2::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}

  /* 时钟 */
  .clock{text-align:center;padding:2px 0 16px;margin-bottom:14px;border-bottom:1px solid var(--line)}
  .clock .time{font-size:54px;font-weight:250;letter-spacing:.03em;font-variant-numeric:tabular-nums;line-height:1;
    color:#f6e9d6;text-shadow:0 0 34px rgba(233,169,75,.34)}
  .clock .phase{display:inline-block;margin-top:11px;font-size:10.5px;letter-spacing:.3em;color:var(--amber);
    border:1px solid rgba(233,169,75,.34);border-radius:999px;padding:3.5px 13px;background:var(--amber-soft)}
  .clock .date{margin-top:9px;font-size:11px;color:var(--muted);letter-spacing:.1em}

  /* 控件 */
  .grp{margin-bottom:17px}
  .lbl{display:flex;justify-content:space-between;align-items:baseline;font-size:10.5px;letter-spacing:.2em;
    color:var(--muted);text-transform:uppercase;margin-bottom:9px}
  .lbl b{color:#f1e6d4;font-weight:500;letter-spacing:.04em;font-size:12px;font-variant-numeric:tabular-nums;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
  input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:20px;background:transparent;cursor:pointer;display:block}
  input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;
    background:linear-gradient(90deg,rgba(63,107,87,.9),rgba(168,182,189,.45) 55%,rgba(233,169,75,.75))}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;margin-top:-5.5px;border-radius:50%;
    background:radial-gradient(circle at 35% 30%,#ffe9c0,#e9a94b 58%,#a8712c);
    box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 14px rgba(233,169,75,.5);transition:.15s}
  input[type=range]::-webkit-slider-thumb:hover{box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 20px rgba(233,169,75,.85)}
  input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:linear-gradient(90deg,rgba(63,107,87,.9),rgba(233,169,75,.75))}
  input[type=range]::-moz-range-thumb{width:15px;height:15px;border:none;border-radius:50%;
    background:radial-gradient(circle at 35% 30%,#ffe9c0,#e9a94b 58%,#a8712c);box-shadow:0 0 12px rgba(233,169,75,.5)}

  .seg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
  .seg button{font:inherit;font-size:12px;padding:8px 0;border-radius:11px;cursor:pointer;color:var(--muted);
    background:rgba(255,255,255,.035);border:1px solid var(--line);transition:.2s}
  .seg button:hover{color:#e8efe9;border-color:rgba(233,169,75,.35)}
  .seg button.on{color:#f8ecd8;border-color:rgba(233,169,75,.55);
    background:linear-gradient(180deg,rgba(233,169,75,.26),rgba(233,169,75,.08));
    box-shadow:inset 0 0 18px rgba(233,169,75,.14),0 0 14px rgba(233,169,75,.1)}
  .seg.wx button.on{background:linear-gradient(180deg,rgba(63,107,87,.5),rgba(63,107,87,.16));border-color:rgba(120,170,150,.5);
    box-shadow:inset 0 0 18px rgba(120,190,160,.12)}

  .row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;font-size:12.5px;
    border-bottom:1px dashed rgba(255,255,255,.055)}
  .row:last-child{border-bottom:none}
  .row span{color:#cbd6d0;letter-spacing:.04em}
  .sw{position:relative;flex:0 0 auto;width:38px;height:21px;border-radius:999px;background:rgba(255,255,255,.10);
    border:1px solid var(--line);cursor:pointer;transition:.25s}
  .sw::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#c3cdc7;transition:.25s}
  .sw.on{background:linear-gradient(90deg,var(--moss),var(--amber));border-color:rgba(233,169,75,.4)}
  .sw.on::after{left:20px;background:#fff5e2;box-shadow:0 0 10px rgba(255,220,160,.7)}

  select{width:100%;font:inherit;font-size:12px;padding:9px 11px;border-radius:11px;cursor:pointer;color:#e6ece7;
    background:rgba(255,255,255,.05);border:1px solid var(--line);outline:none;appearance:none;-webkit-appearance:none;
    background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
    background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
  select option{background:#101a17;color:#e6ece7}

  .act{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
  .act .wide{grid-column:1/-1}
  .btn{font:inherit;font-size:12.5px;padding:11px 6px;border-radius:12px;cursor:pointer;color:#dfe7e1;letter-spacing:.05em;
    background:rgba(255,255,255,.045);border:1px solid var(--line);transition:.2s}
  .btn:hover{color:#fff;border-color:rgba(233,169,75,.45);background:rgba(233,169,75,.10)}
  .btn:active{transform:translateY(1px)}
  .btn.gold{color:#fbeed6;border-color:rgba(233,169,75,.4);background:linear-gradient(180deg,rgba(233,169,75,.24),rgba(233,169,75,.07))}
  .btn.gold:hover{background:linear-gradient(180deg,rgba(233,169,75,.36),rgba(233,169,75,.12))}
  .tip{font-size:10.5px;color:#6f8179;line-height:1.7;letter-spacing:.04em;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}

  /* toast */
  .toast{position:fixed;left:50%;bottom:104px;transform:translate(-50%,16px);opacity:0;pointer-events:none;z-index:30;
    padding:10px 18px;border-radius:999px;font-size:12.5px;color:#f2e7d6;letter-spacing:.05em;
    background:rgba(16,26,22,.94);border:1px solid rgba(233,169,75,.32);box-shadow:0 12px 34px rgba(0,0,0,.55);transition:.35s}
  .toast.show{opacity:1;transform:translate(-50%,0)}

  /* 启动 / 错误 */
  #boot{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
    background:radial-gradient(120% 90% at 50% 30%,#16211d 0%,#0a0f14 70%);transition:opacity .9s ease}
  #boot.hide{opacity:0;pointer-events:none}
  #boot .in{text-align:center;max-width:420px;padding:0 26px}
  #boot h2{margin:0;font-weight:250;font-size:17px;letter-spacing:.34em;color:#d3ddd6}
  #boot .sub{margin-top:12px;font-size:10px;letter-spacing:.4em;color:#7c8d85;text-transform:uppercase}
  #boot .bar{width:190px;height:2px;margin:26px auto 0;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
  #boot .bar i{display:block;width:42%;height:100%;background:linear-gradient(90deg,var(--moss),var(--amber));animation:sl 1.25s infinite ease-in-out}
  @keyframes sl{0%{transform:translateX(-110%)}100%{transform:translateX(320%)}}
  #boot .msg{margin-top:22px;font-size:12.5px;line-height:1.85;color:#9fb0a8;letter-spacing:.04em}
  #boot .msg code{color:var(--amber);font-size:12px}
  #boot.err .bar{display:none}
  #boot.err h2{color:#ff9d8c;letter-spacing:.2em}
  #boot.err .sub{color:#c2736a}

  @media (max-width:900px){
    .panel{right:0;left:0;top:auto;bottom:0;width:auto;max-height:47vh;border-radius:22px 22px 0 0;padding:14px 15px 26px}
    .brand{left:14px;top:14px;gap:10px}
    .brand .mark{width:34px;height:34px}
    .brand h1{font-size:17px;letter-spacing:.18em}
    .brand p{font-size:8px;letter-spacing:.26em}
    .tools{right:12px;top:13px;gap:7px}
    .tbtn{height:33px;padding:0 11px;font-size:11.5px}
    .hint{bottom:calc(47vh + 12px);font-size:10.5px;padding:7px 13px;letter-spacing:.08em}
    .clock .time{font-size:42px}
    .clock{padding-bottom:12px;margin-bottom:11px}
    .toast{bottom:calc(47vh + 56px)}
  }
  @media (max-width:420px){ .hint{font-size:9.5px} .brand p{display:none} }
</style>
</head>
<body>
<div id="app"></div>

<div class="brand">
  <svg class="mark" viewBox="0 0 48 48" fill="none" aria-hidden="true">
    <path d="M3 38 L16 14 L24 27 L30 17 L45 38 Z" fill="#2c4a3e" stroke="#8fb39c" strok.........完整代码请登录后点击上方下载按钮下载查看