代码语言：html

所属分类：其他

代码由qwen-4 ai生成，可能有错误，仅供参考：点击查看提示词

代码描述：三维迪士尼乐园烟花秀

代码标签： three 三维 迪士尼 乐园 烟花秀 代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!-- 保存为 index.html 直接打开即可（需联网加载 Three.js CDN） -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>童话之夜 · 星梦城堡烟花</title>
<link rel="preconnect" href="https://cdn.jsdelivr.net">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🏰</text></svg>">
<style>
  :root{
    --gold:#ffcf7d; --pink:#ff7ad1; --cyan:#7de3ff; --violet:#a78bfa;
    --ink:rgba(14,16,42,.5); --line:rgba(255,255,255,.16); --txt:#f3efff; --dim:#cfc8ee;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
  html,body{margin:0;height:100%;overflow:hidden;background:#05060f;
    font-family:"PingFang SC","Microsoft YaHei","Segoe UI",system-ui,sans-serif;color:var(--txt)}
  #stage{position:fixed;inset:0}
  #stage canvas{display:block;cursor:crosshair}

  /* ---------- 左上角毛玻璃控制台 ---------- */
  #panel{
    position:fixed;left:16px;top:16px;z-index:20;width:282px;
    max-height:calc(100vh - 32px);overflow-y:auto;overflow-x:hidden;
    padding:16px 16px 12px;border-radius:18px;border:1px solid var(--line);
    background:linear-gradient(160deg,rgba(38,30,86,.55),rgba(12,14,40,.46));
    -webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);
    box-shadow:0 14px 44px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.14);
    user-select:none;
  }
  #panel::-webkit-scrollbar{width:6px}
  #panel::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:6px}
  #panel::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--gold),var(--pink));border-radius:6px}
  #panel::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#ffe3ae,#ffa4e2)}
  #panel{scrollbar-width:thin;scrollbar-color:#ff9ecf rgba(255,255,255,.06)}

  #panel header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
  #panel header .castle{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
    background:linear-gradient(145deg,rgba(255,207,125,.22),rgba(255,122,209,.18));border:1px solid var(--line)}
  #panel header .castle svg{width:20px;height:20px;stroke:var(--gold);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px rgba(255,207,125,.7))}
  #panel h1{margin:0;font-size:16px;font-weight:700;letter-spacing:1px;
    background:linear-gradient(90deg,var(--gold),var(--pink) 55%,var(--cyan));
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  #panel header p{margin:1px 0 0;font-size:9px;letter-spacing:2.5px;color:rgba(207,200,238,.75);text-transform:uppercase}
  .icon-btn{margin-left:auto;flex:none;width:32px;height:32px;border-radius:9px;border:1px solid var(--line);
    background:rgba(255,255,255,.09);color:var(--gold);cursor:pointer;display:grid;place-items:center;transition:.2s}
  .icon-btn:hover{background:rgba(255,207,125,.2);box-shadow:0 0 12px rgba(255,207,125,.45)}
  .icon-btn svg{width:17px;height:17px}
  .icon-btn.muted{color:#8b86ad}

  .stats{display:flex;gap:6px;margin-bottom:12px}
  .stats span{flex:1;text-align:center;font-size:10.5px;padding:3px 2px;border-radius:7px;
    background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);
    font-family:ui-monospace,Consolas,monospace;white-space:nowrap}
  #fps{color:var(--cyan)} #pcount{color:var(--gold)} #rcount{color:var(--pink)}

  .row{display:flex;align-items:center;justify-content:space-between;margin:9px 0}
  .row>label{font-size:12.5px;color:var(--dim)}
  .ctrl{margin:10px 0}
  .ctrl .lab{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
  .ctrl .lab label{font-size:12.5px;color:var(--dim)}
  .ctrl output{font-size:11px;color:var(--gold);font-family:ui-monospace,Consolas,monospace}

  input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:4px;outline:none;cursor:pointer;
    background:linear-gradient(90deg,var(--gold),var(--pink) 55%,var(--cyan));box-shadow:0 0 6px rgba(255,122,209,.35)}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;
    background:radial-gradient(circle at 35% 35%,#fff,#ffe0ad);border:2px solid var(--gold);
    box-shadow:0 0 10px rgba(255,207,125,.9);transition:transform .15s}
  input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.25)}
  input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:#ffe9c4;border:2px solid var(--gold);box-shadow:0 0 10px rgba(255,207,125,.9)}
  input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--gold),var(--pink),var(--cyan))}

  select{width:100%;padding:6px 8px;border-radius:9px;border:1px solid var(--line);color:var(--txt);
    background:rgba(255,255,255,.08);font-size:12.5px;cursor:pointer;outline:none}
  select:hover{border-color:rgba(255,207,125,.5)}
  select option{background:#14173a;color:var(--txt)}

  .sw{position:relative;width:37px;height:20px;flex:none}
  .sw input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:2}
  .sw i{display:block;width:100%;height:100%;border-radius:20px;background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.18);transition:.25s;pointer-events:none}
  .sw i::after{content:'';position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#cfc8ee;transition:.25s}
  .sw input:checked+i{background:linear-gradient(90deg,var(--gold),var(--pink));border-color:transparent}
  .sw input:checked+i::after{left:20px;background:#fff;box-shadow:0 0 8px rgba.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论