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

代码语言：html

所属分类：其他

代码由qwen-3.8-max 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>澜庭 · 现代简约三居 | 三维光影沙盘</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@600;900&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
:root{
  --ink:#12151c; --panel:rgba(17,19,26,.80); --line:rgba(255,255,255,.10);
  --txt:#f2efe8; --dim:rgba(242,239,232,.62); --acc:#e2a64b; --acc2:#f0c37c;
  --serif:"Noto Serif SC",serif; --sans:"Noto Sans SC",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#0a0c11;font-family:var(--sans);color:var(--txt);-webkit-user-select:none;user-select:none}
canvas{display:block}
body[data-mode="walk"]{cursor:pointer}
body[data-mode="walk"].locked{cursor:none}
#vignette{position:fixed;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(ellipse at 50% 42%,transparent 55%,rgba(5,8,14,.38) 100%)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 10px 34px rgba(0,0,0,.38);backdrop-filter:blur(9px)}
/* ---------- 品牌区 ---------- */
#brand{position:fixed;left:26px;top:24px;z-index:10;pointer-events:none;animation:drop .9s .2s cubic-bezier(.2,.9,.3,1) both}
#brand .eyebrow{font-size:11px;letter-spacing:.34em;color:var(--acc);font-weight:500;margin-bottom:8px}
#brand h1{font-family:var(--serif);font-weight:900;font-size:30px;line-height:1.15;
  text-shadow:0 3px 18px rgba(0,0,0,.5)}
#brand h1 em{font-style:normal;color:var(--acc2)}
#brand p{margin-top:8px;font-size:12px;font-weight:300;color:var(--dim);letter-spacing:.12em}
#brand .rule{width:54px;height:2px;background:linear-gradient(90deg,var(--acc),transparent);margin-top:12px}
/* ---------- 右上控制 ---------- */
#topRight{position:fixed;right:24px;top:24px;z-index:10;display:flex;gap:10px;align-items:center}
#envToggle{display:flex;align-items:center;gap:10px;padding:8px 14px;cursor:pointer;transition:transform .25s,border-color .25s}
#envToggle:hover{transform:translateY(-2px);border-color:rgba(226,166,75,.5)}
#envToggle .track{width:52px;height:26px;border-radius:99px;background:#0c0f16;border:1px solid var(--line);position:relative;transition:background .6s}
#envToggle .thumb{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#ffe9ad,var(--acc));box-shadow:0 0 10px rgba(226,166,75,.7);
  transition:left .45s cubic-bezier(.6,-.2,.3,1.4),background .5s,box-shadow .5s}
body.night #envToggle .thumb{left:28px;background:radial-gradient(circle at 35% 35%,#f2f6ff,#9db4e0);box-shadow:0 0 10px rgba(150,180,230,.7)}
#envToggle .lab{font-size:12px;letter-spacing:.2em;color:var(--dim);min-width:34px}
body.night #envToggle .lab::after{content:"夜色"} body:not(.night) #envToggle .lab::after{content:"日光"}
.iconBtn{width:40px;height:40px;display:grid;place-items:center;cursor:pointer;color:var(--dim);transition:.25s}
.iconBtn:hover{color:var(--acc);transform:translateY(-2px)}
#compass{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;position:relative}
#compassCard{position:absolute;inset:4px;border-radius:50%;border:1px solid var(--line)}
#compassCard b{position:absolute;top:2px;left:50%;transform:translateX(-50%);font-size:10px;color:var(--acc);font-weight:700}
#compassCard i{position:absolute;left:50%;top:50%;width:2px;height:13px;background:linear-gradient(var(--acc),transparent);transform:translate(-50%,-100%)}
/* ---------- 房间提示 ---------- */
#roomBadge{position:fixed;top:24px;left:50%;transform:translate(-50%,-10px);z-index:10;padding:9px 22px;
  font-size:13px;letter-spacing:.22em;opacity:0;pointer-events:none;transition:.4s;border-radius:99px}
body[data-mode="walk"] #roomBadge{opacity:1;transform:translate(-50%,0)}
#roomBadge b{color:var(--acc);font-family:var(--serif);font-size:15px;letter-spacing:.1em;margin-left:6px}
/* ---------- 房间速达 ---------- */
#chips{position:fixed;bottom:88px;left:50%;transform:translate(-50%,14px);z-index:10;display:flex;gap:8px;flex-wrap:wrap;
  .........完整代码请登录后点击上方下载按钮下载查看