three三维三层别墅场景代码
代码语言：html
所属分类：其他
代码由minimx-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" />
<title>云顶华府 · 三维豪华别墅自由漫游</title>
<style>
:root{
--gold:#e8c47a;
--gold-dim:#a98b4e;
--panel:rgba(14,18,26,.58);
--stroke:rgba(232,196,122,.22);
--txt:#eef3fb;
--muted:rgba(238,243,251,.62);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#05070c;color:var(--txt);
font-family:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;}
canvas{display:block;position:fixed;inset:0}
#ui{position:fixed;inset:0;pointer-events:none;z-index:10}
.pnl{background:var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
border:1px solid var(--stroke);border-radius:14px;box-shadow:0 10px 34px rgba(0,0,0,.42)}
/* ---------- HUD 左上 ---------- */
#hud{position:absolute;left:16px;top:16px;padding:13px 15px;min-width:212px;font-size:12.5px;line-height:1.75}
#hud .ttl{font-size:13px;font-weight:700;letter-spacing:2.5px;color:var(--gold);
padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--stroke);display:flex;align-items:center;gap:7px}
#hud .ttl i{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold);font-style:normal}
#hud .row{display:flex;justify-content:space-between;gap:16px}
#hud .k{color:var(--muted)}
#hud .v{color:var(--txt);font-variant-numeric:tabular-nums}
#hud .big{font-size:19px;font-weight:600;color:var(--gold);letter-spacing:1px}
/* ---------- 提示 ---------- */
#cross{position:absolute;left:50%;top:50%;width:20px;height:20px;transform:translate(-50%,-50%);
pointer-events:none;opacity:.9;transition:transform .18s,opacity .18s}
#cross:before,#cross:after{content:"";position:absolute;background:rgba(255,255,255,.9);box-shadow:0 0 4px rgba(0,0,0,.6)}
#cross:before{left:9px;top:2px;width:2px;height:16px}
#cross:after{left:2px;top:9px;width:16px;height:2px}
#cross.hit{transform:translate(-50%,-50%) scale(1.45) rotate(45deg);opacity:1}
#cross.hit:before,#cross.hit:after{background:var(--gold)}
#prompt{position:absolute;left:50%;top:calc(50% + 46px);transform:translateX(-50%);
padding:8px 15px;border-radius:999px;font-size:13px;letter-spacing:.5px;white-space:nowrap;
opacity:0;transition:opacity .18s;background:rgba(10,14,22,.72);border:1px solid var(--stroke)}
#prompt.on{opacity:1}
#prompt b{color:var(--gold);font-weight:600}
/* ---------- 右下按键 ---------- */
#help{position:absolute;right:16px;bottom:16px;padding:12px 14px;font-size:12px;line-height:1.85;
color:var(--muted);max-width:250px}
#help b{color:var(--txt);font-weight:600}
#help .kb{display:inline-block;min-width:19px;text-align:center;padding:0 5px;margin-right:3px;
background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-bottom-width:2px;
border-radius:5px;color:var(--gold);font-size:11px;font-weight:600}
#help .hd{color:var(--gold);font-weight:700;letter-spacing:1.6px;margin-bottom:7px;
padding-bottom:6px;border-bottom:1px solid var(--stroke);font-size:12px}
#help.min .bd{display:none}
/* ---------- 右上车况 ---------- */
#wx{position:absolute;right:16px;top:16px;padding:12px 14px;font-size:12.5px;min-width:158px;text-align:right}
#wx .t{font-size:24px;font-weight:300;letter-spacing:1px;color:var(--gold);font-variant-numeric:tabular-nums}
#wx .s{margin-top:5px;font-size:12.5px}
#wx .m{margin-top:6px;color:var(--muted);font-size:11.5px;letter-spacing:.4px}
#flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
/* ---------- 视角快捷 ---------- */
#views{position:absolute;left:16px;bottom:16px;display:flex;gap:7px;pointer-events:auto;flex-wrap:wrap;max-width:min(560px,60vw)}
#views .vb{padding:7px 12px;border-radius:10px;font-size:12px;color:var(--muted);cursor:pointer;
background:var(--panel);border:1px solid var(--stroke);backdrop-filter:blur(12px);transition:.18s;user-select:none}
#views .vb:hover{color:var(--txt);border-color:var(--gold);background:rgba(232,196,122,.14)}
#views .vb.on{color:#1a1408;background:var(--gold);border-color:var(--gold);font-weight:600}
/* ---------- toast ---------- */
#toast{position:absolute;left:50%;top:76px;transform:translate(-50%,-8px);padding:9px 18px;border-radius:999px;
font-size:13px;opacity:0;transition:.3s;background:rgba(10,14,22,.8);border:1px solid var(--stroke);letter-spacing:.5px}
#toast.on{opacity:1;transform:translate(-50%,0)}
/* ---------- 淡入淡出 ---------- */
#fade{position:absolute;inset:0;background:#05070c;opacity:0;transition:opacity .45s;pointer-events:none}
/* ---------- 开场 ---------- */
#start{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;
background:radial-gradient(ellipse at 50% 42%,#16223a 0%,#080b12 62%,#04060a 100%);transition:opacity .7s}
#start.gone{opacity:0;pointer-events:none}
#start .logo{font-size:min(7.6vw,54px);letter-spacing:16px;font-weight:200;color:var(--gold);
text-shadow:0 0 34px rgba(232,196,122,.42);margin-bottom:6px;text-indent:16px}
#start .sub{font-size:12.5px;letter-spacing:7px;color:var(--muted);margin-bottom:34px;text-indent:7px}
#start .card{width:min(560px,88vw);padding:26px 30px;border-radius:18px;background:rgba(12,16,24,.6);
border:1px solid var(--stroke);backdrop-filter:blur(16px);margin-bottom:28px}
#start .card h3{font-size:13px;color:var(--gold);letter-spacing:3px;margin:0 0 16px;font-weight:600;text-align:center}
#start .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px 22px;font-size:12.5px;color:var(--muted)}
#start .grid span{color:var(--txt)}
#go{padding:14px 52px;border-radius:999px;border:1px solid var(--gold);background:transparent;color:var(--gold);
font-size:14px;letter-spacing:6px;cursor:pointer;transition:.28s;font-family:inherit;text-indent:6px}
#go:hover{background:var(--gold);color:#14100a;box-shadow:0 0 40px rgba(232,196,122,.5)}
#go[disabled]{opacity:.4;cursor:wait;border-color:#666}
#load{margin-top:18px;font-size:12px;color:var(--muted);letter-spacing:2px;height:16px}
#bar{width:min(560px,88vw);height:2px;background:rgba(255,255,255,.09);border-radius:2px;overflow:hidden;margin-top:10px}
#bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-dim),var(--gold));
transition:width .25s;box-shadow:0 0 12px rgba(232,196,122,.8)}
/* ---------- 触屏 ---------- */
#touch{position:absolute;inset:0;display:none}
#touch.on{display:block}
#stick{position:absolute;left:26px;bottom:96px;width:112px;height:112px;border-radius:50%;
background:rgba(255,255,255,.07);border:1px solid var(--stroke);pointer-events:auto}
#stick i{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;
background:rgba(232,196,122,.34);border:1px solid var(--gold)}
.tbtn{position:absolute;pointer-events:auto;width:62px;height:62px;border-radius:50%;display:flex;align-items:center;
justify-content:center;font-size:12px;color:var(--gold);background:rgba(14,18,26,.6);border:1px solid var(--stroke)}
#tE{right:28px;bottom:110px}
#tJ{right:104px;bottom:104px;font-size:20px}
#tH{right:28px;bottom:34px;width:auto;height:34px;padding:0 15px;border-radius:999px;font-size:11.5px}
#tH.min .bd{display:none}
@media (max-width:720px){
#help,#hud{font-size:11px;padding:9px 11px;min-width:0}
#hud .big{font-size:15px}
#wx{padding:8px 10px;min-width:0}#wx .t{font-size:17px}
#views{bottom:auto;top:auto;left:12px;bottom:12px;max-width:52vw;gap:5px}
#views .vb{padding:5px 9px;font-size:11px}
}
</style>
</head>
<body>
<div id="ui">
<div id="hud" class="pnl">
<div class="ttl"><i></i>云顶华府 · 实景漫游</div>
<div class="row"><span class="k">当前时刻</span><span class="v big" id="hTime">08:00</span></div>
<div class="row"><span class="k">天气</span><span class="v" id="hWx">晴</span></div>
<div class="row"><span class="k">所在楼层</span><span class="v" id="hFl">1F · 门厅</span></div>
<div class="row"><span class="k">坐标</span><span class="v" id="hPos">0, 0</span></div>
</div>
<div id="wx" class="pnl">
<div class="t" id="wTime">08:00</div>
<div class="s" id="wWx">☀️ 晴朗</div>
<div class="m" id="wX">室外 24°C · 风 1 级</div>
</div>
<div id="cross"></div>
<div id="prompt"></div>
<div id="toast"></div>
<div id="fade"></div>
<div id="flash"></div>
<div id="views">
<div class="vb" data-v="0">大门外</div>
<div class="vb" data-v="1">庭院全景</div>
<div class="vb" data-v="2">客厅</div>
<div class="vb" data-v="3">二楼阳台</div>
<div class="vb" data-v="4">主卧</div>
<div class="vb" data-v="5">屋顶露台</div>
</div>
<div id="help" class="pnl">
<div class="hd">操作指南</div>
<div class="bd">
<div><span class="kb">W</span><span class="kb">A</span><span class="kb">S</span><span class="kb">D</span> 移动 / 方向键</div>
<div><span class="kb">Shift</span> 奔跑 <span class="kb">空格</span> 跳跃</div>
<div><span class="kb">E</span> 开关门窗 · 开关灯</div>
<div><span class="kb">F</span> 手电筒 <span class="kb">L</span> 全屋灯光</div>
<div><span class="kb">T</span> 加速时间 <span class="kb">M</span> 手动换天气</div>
<div><span class="kb">C</span> 俯瞰全屋 <span class="kb">1</span>–<span class="kb">6</span> 场景传送</div>
<div><span class="kb">H</span> 收起面板 <span class="kb">Esc</span> 释放鼠标</div>
</div>
</div>
<div id="touch">
<div id="stick"><i></i></div>
<div class="tbtn" id="tE">开 / 关</div>
<div class="tbtn" id="tJ">↑</div>
<div class="tbtn" id="tH">帮助</div>
</div>
</div>
<div id="start">
<div class="logo">云顶华府</div>
<div class="sub">THREE-FLOOR VILLA · 自由漫游</div>
<div class="card">
<h3>庭 院 与 建 筑 一 览</h3>
<div class="grid">
<div><span>三层独栋</span> · 现代精装</div>
<div><span>庭院</span> · 菜园 / 池塘 / 假山</div.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0