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" />
<meta name="theme-color" content="#0d1117" />
<title>现代简约 · 三室两厅一卫一厨 | 3D 户型沙盘</title>
<style>
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  html, body { margin: 0; height: 100%; overflow: hidden; background: #0b0e13;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
                 "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
    color: #e8eef7; user-select: none; }
  canvas#c { position: fixed; inset: 0; display: block; width: 100%; height: 100%; }

  /* ---------- 通用面板 ---------- */
  .panel {
    position: fixed; z-index: 20;
    background: rgba(14, 18, 26, .62);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px;
    box-shadow: 0 10px 34px rgba(0,0,0,.42);
  }
  body.hideui .panel, body.hideui #crosshair, body.hideui #toast { opacity: 0; pointer-events: none; }
  .panel, #toast { transition: opacity .35s ease; }

  /* ---------- 左上：标题 / 房间 ---------- */
  #topL { top: 16px; left: 16px; padding: 13px 16px 12px; min-width: 214px; }
  #topL .brand { font-size: 11.5px; letter-spacing: .18em; color: #8ea0b8; text-transform: uppercase; }
  #topL .title { font-size: 17px; font-weight: 700; margin-top: 5px; letter-spacing: .02em; }
  #topL .meta { margin-top: 9px; display: flex; align-items: center; gap: 8px; }
  #roomName {
    font-size: 20px; font-weight: 700; color: #ff9a5c;
    border-left: 3px solid #ff8a4d; padding-left: 9px; line-height: 1.1;
  }
  #modeName { font-size: 11.5px; color: #93a4bb; background: rgba(255,255,255,.07);
    padding: 3px 8px; border-radius: 20px; }

  /* ---------- 右上：控制 ---------- */
  #topR { top: 16px; right: 16px; padding: 12px; display: flex; flex-direction: column; gap: 8px; width: 214px; }
  .btnrow { display: flex; gap: 8px; }
  button {
    font-family: inherit; font-size: 12.5px; color: #dbe4f0; cursor: pointer;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
    border-radius: 9px; padding: 8px 10px; transition: all .18s ease; white-space: nowrap;
  }
  button:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.22); transform: translateY(-1px); }
  button:active { transform: translateY(0); }
  button.on { background: rgba(255,138,77,.2); border-color: rgba(255,138,77,.55); color: #ffbb92; }
  .btnrow button { flex: 1; }
  #btnTime, #btnMode, #btnTour, #btnFurn, #btnReset { width: 100%; }
  #timeSlider { width: 100%; accent-color: #ff8a4d; margin-top: 2px; }
  .sliderRow { display: flex; align-items: center; gap: 9px; padding: 2px 2px 0; }
  #timeLabel { font-size: 12px; color: #9fb0c6; min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; }
  .tip { font-size: 10.5px; color: #6f8199; line-height: 1.55; }

  /* ---------- 房间导航 ---------- */
  #navPanel { top: 190px; left: 16px; padding: 11px 12px; width: 214px; }
  #navPanel h4 { margin: 0 0 8px; font-size: 11px; letter-spacing: .14em; color: #8ea0b8; font-weight: 600; }
  #roomNav { display: flex; flex-wrap: wrap; gap: 6px; }
  #roomNav button { padding: 5px 9px; font-size: 11.5px; border-radius: 7px; }
  #roomNav button.on { background: rgba(255,138,77,.22); border-color: rgba(255,138,77,.6); color: #ffbb92; }

  /* ---------- 左下：小地图 ---------- */
  #mapPanel { left: 16px; bottom: 16px; padding: 9px; }
  #minimap { display: block; border-radius: 8px; }
  #mapPanel .cap { font-size: 10.5px; color: #7f90a7; margin-top: 7px; text-align: center; letter-spacing: .06em; }

  /* ---------- 右下：提示 ---------- */
  #helpPanel { right: 16px; bottom: 16px; padding: 11px 13px; max-width: 268px; }
  #helpPanel b { color: #ffb185; font-weight: 600; }
  #helpPanel div { font-size: 11.5px; color: #9db0c8; line-height: 1.85; }
  kbd {
    display: inline-block; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16);
    border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; font-size: 10.5px;
    font-family: ui-monospace, Menlo, monospace; color: #d8e3f0; margin: 0 1px;
  }

  /* ---------- 准星 / 提示 ---------- */
  #crosshair {
    position: fixed; left: 50%; top: 50%; width: 16px; height: 16px; z-index: 15;
    transform: translate(-50%, -50%); pointer-events: none; opacity: 0; transition: opacity .3s;
  }
  #crosshair::before, #crosshair::after {
    content: ''; position: absolute; background: rgba(255,255,255,.85);
    box-shadow: 0 0 4px rgba(0,0,0,.6);
  }
  #crosshair::before { left: 50%; top: 0; width: 1.5px; height: 100%; transform: translateX(-50%); }
  #crosshair::after { top: 50%; left: 0; height: 1.5px; width: 100%; transform: translateY(-50%); }
  #lockHint {
    position: fixed; left: 50%; top: 58%; transform: translateX(-50%); z-index: 16;
    font-size: 12.5px; color: #ffcdb0; background: rgba(14,18,26,.7); padding: 8px 16px;
    border-radius: 30px; border: 1px solid rgba(255,138,77,.35); opacity: 0; transition: opacity .3s;
    pointer-events: none; backdrop-filter: blur(8px);
  }
  #toast {
    position: fixed; left: 50%; bottom: 34px; transform: translate(-50%, 16px); z-index: 30;
    background: rgba(14,18,26,.82); border: 1px solid rgba(255,255,255,.12); color: #e3ebf6;
    padding: 10px 18px; border-radius: 30px; font-size: 12.5px; opacity: 0;
    transition: all .35s ease; pointer-events: none; backdrop-filter: blur(12px);
  }
  #toast.show { opacity: 1; transform: translate(-50%, 0); }

  /* ---------- 移动端方向键 ---------- */
  #dpad { position: fixed; right: 18px; bottom: 150px; z-index: 18; display: none; gap: 6px;
    grid-template-columns: repeat(3, 46px); }
  #dpad button { width: 46px; height: 46px; font-size: 16px; border-radius: 12px; background: rgba(14,18,26,.6); }
  #dpad .u { grid-column: 2; } #dpad .l { grid-column: 1; grid-row: 2; }
  #dpad .d { grid-column: 2; grid-row: 2; } #dpad .r { grid-column: 3; grid-row: 2; }

  /* ---------- 引导页 ---------- */
  #intro {
    position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 22px; text-align: center;
    background: radial-gradient(120% 90% at 50% 30%, rgba(26,34,48,.82), rgba(6,9,14,.95));
    backdrop-filter: blur(6px); transition: opacity .6s ease, visibility .6s;
  }
  #intro.hidden { opacity: 0; visibility: hidden; }
  #intro .badge { font-size: 11px; letter-spacing: .32em; color: #ff9a5c; text-transform: uppercase; }
  #intro h1 { margin: 0; font-size: 40px; font-weight: 800; letter-spacing: .04em;
    background: linear-gradient(100deg, #ffffff 20%, #ffb98c 85%);
    -webkit-background-clip: text; background-clip: text; color: transparent; }
  #intro h2 { margin: -10px 0 0; font-size: 14px; font-weight: 400; color: #9db0c8; letter-spacing: .1em; }
  #intro .facts { display: flex; gap: 26px; margin-top: 4px; }
  #intro .facts div { font-size: 12px; color: #7f90a7; }
  #intro .facts b { display: block; font-size: 21px; color: #e8eef7; font-weight: 700; margin-bottom: 2px; }
  #intro .acts { display: flex; gap: 12px; margin-top: 10px; }
  #intro .acts button { padding: 13px 28px; font-size: 14px; border-radius: 12px; }
  #btnStartFP { background: rgba(255,138,77,.2); border-color: rgba(255,138,77,.55); color: #ffbb92; }
  #intro .note { font-size: 11.5px; color: #67788f; line-height: 1.9; max-width: 520px; }

  /* ---------- 加载 ---------- */
  #loading {
    position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 16px; background: #0b0e13; transition: opacity .5s ease, visibility .5s;
  }
  #loading.hidden { opacity: 0; visibility: hidden; }
  .spin { width: 34px; height: 34px; border: 2.5px solid rgba(255,255,255,.14);
    border-top-color: #ff8a4d; border-radius: 50%; animation: sp 1s linear infinite; }
  @keyframes sp { to { transform: rotate(360deg); } }
  #bootMsg { font-size: 12.5px; color: #8ea0b8; text-align: center; line-height: 1.8; }

  @media (max-width: 860px) {
    #navPanel, #helpPanel { display: none; }
    #topL, #topR { width: 172px; padding: 10px 12px; }
    #topL .title { font-size: 14px; }
    #roomName { font-size: 17px; }
    #intro h1 { font-size: 27px; }
    #mapPanel { transform: scale(.82); transform-origin: left bottom; }
  }
</style>
</head>
<body>

<canvas id="c"></canvas>

<!-- 加载 -->
<div id="loading">
  <div class="spin"></div>
  <div id="bootMsg">正在构建 3D 户型沙盘…</div>
</div>

<!-- 引导页 -->
<div id="intro">
  <div class="badge">Modern Minimal Apartment</div>
  <h1>现代简约 · 三室两厅</h1>
  <h2>一卫一厨 · 全景沙盘漫游</h2>
  <div class="facts">
    <div><b>3</b>室</div>
    <div><b>2</b>厅</div>
    <div><b>1</b>卫</div>
    <div><b>1</b>厨</div>
    <div><b>18</b>0㎡+</div>
  </div>
  <div class="acts">
    <button id="btnStart">进入沙盘总览</button>
.........完整代码请登录后点击上方下载按钮下载查看