three做个三维三室两厅一卫一厨沙盘户型展示和第一人称漫游体验场景代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码由glm-5.3-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" />
<title>现代简约 · 三室两厅一卫一厨 · 3D交互沙盘</title>
<style>
  html,body{margin:0;height:100%;overflow:hidden;background:#0b1220;
    font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;}
  #app{position:fixed;inset:0;cursor:grab;}
  #app.fps{cursor:crosshair;}
  canvas{display:block;}
  .card{position:fixed;z-index:10;color:#fff;background:rgba(13,18,28,.68);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.14);border-radius:14px;
    box-shadow:0 8px 28px rgba(0,0,0,.3);}
  #titleCard{top:16px;left:16px;padding:12px 18px;}
  #titleCard h1{margin:0;font-size:17px;font-weight:700;letter-spacing:.5px;}
  #titleCard h1 span{color:#ffd489;}
  #titleCard p{margin:6px 0 0;font-size:11.5px;color:rgba(255,255,255,.72);letter-spacing:.3px;}
  #helpCard{top:96px;left:16px;padding:10px 14px 12px;font-size:12px;line-height:2.05;max-width:268px;}
  #helpCard b{color:#ffd489;font-weight:600;}
  .kbd{display:inline-block;padding:0 6px;margin:0 2px;border-radius:5px;
    background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);
    font-size:11px;line-height:1.7;}
  #toolbar{top:16px;right:16px;display:flex;gap:8px;z-index:11;flex-wrap:wrap;justify-content:flex-end;}
  #toolbar button{appearance:none;border:1px solid rgba(255,255,255,.2);color:#fff;
    background:rgba(255,255,255,.1);padding:9px 14px;border-radius:11px;font-size:13px;
    cursor:pointer;backdrop-filter:blur(10px);transition:.2s;letter-spacing:.5px;font-family:inherit;}
  #toolbar button:hover{background:rgba(255,255,255,.22);transform:translateY(-1px);}
  #toolbar button.primary{background:#e8a94f;border-color:#e8a94f;color:#1c1408;font-weight:700;}
  #toolbar button.primary:hover{background:#f4bb63;}
  #hud{left:50%;bottom:18px;transform:translateX(-50%);padding:8px 18px;
    font-size:12.5px;display:none;white-space:nowrap;}
  #roomChip{left:16px;bottom:18px;padding:9px 16px;font-size:14px;font-weight:700;
    display:none;letter-spacing:1px;}
  #roomChip small{font-weight:400;opacity:.65;font-size:10.5px;margin-left:8px;letter-spacing:.3px;}
  #loading{position:fixed;inset:0;z-index:99;display:flex;flex-direction:column;gap:14px;
    align-items:center;justify-content:center;background:#0b1220;color:#9fb2cc;
    font-size:14px;letter-spacing:2px;transition:opacity .6s;}
  .spin{width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.15);
    border-top-color:#e8a94f;animation:sp 1s linear infinite;}
  @keyframes sp{to{transform:rotate(360deg);}}
  @media (max-width:760px){#helpCard{display:none;}#titleCard p{display:none;}}
</style>
</head>
<body>
<div id="app"></div>

<div id="titleCard" class="card">
  <h1>现代简约 · <span>三室两厅一卫一厨</span> · 3D沙盘</h1>
  <p>Three.js 全景展示 ｜ 昼夜灯光切换 ｜ 第一人称漫游</p>
</div>

<div id="helpCard" class="card">
  <div id="helpOrbit">
    <b>🏠 沙盘模式</b><br>
    左键拖拽 旋转 · 滚轮 缩放 · 右键 平移<br>
    <span class="kbd">V</span>切换漫游 <span class="kbd">N</span>昼夜 <span class="kbd">R</span>重置视角
  </div>
  <div id="helpFps" style="display:none">
    <b>🚶 漫游模式</b><br>
    点击画面锁定鼠标视角<br>
    <span class="kbd">W</span><span class="kbd">A</span><span class="kbd">S</span><span class="kbd">D</span>移动 ·
    <span class="kbd">Shift</span>加速 · <span class="kbd">ESC</span>释放
  </div>
</div>

<div id="toolbar">
  <button id="btnNight">🌙 夜晚模式</button>
  <button id="btnMode" class="primary">🚶 第一人称漫游</button>
  <button id="btnSpin">▶ 自动旋转</button>
  <button id="btnReset">⟲ 重置视角</button>
</div>

<div id="hud" class="card">W A S D 移动 · Shift 加速 · ESC 释放鼠标 · V 返回沙盘</div>
<div id="roomChip" class="card">玄关&.........完整代码请登录后点击上方下载按钮下载查看