代码语言：html

所属分类：其他

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

代码描述：三维海上浮屋景色

代码标签： three 三维 海上 浮屋 景色 场景 代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="theme-color" content="#2f7fd0">
<title>海上浮屋 · The Floating House</title>
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%232f7fd0'/%3E%3Ccircle cx='47' cy='16' r='7' fill='%23ffd98f'/%3E%3Crect x='18' y='24' width='24' height='16' fill='%232fbfb3'/%3E%3Crect x='15' y='21' width='30' height='4' fill='%238a5a38'/%3E%3Ccircle cx='30' cy='14' r='8' fill='%233fa653'/%3E%3Crect x='28' y='18' width='4' height='8' fill='%236f4b33'/%3E%3Cpath d='M6 46q6-5 12 0t12 0 12 0 12 0' stroke='%23eaf6fb' stroke-width='4' fill='none'/%3E%3Cpath d='M20 40v8M40 40v8' stroke='%237c543a' stroke-width='4'/%3E%3C/svg%3E">

<!-- ============ Three.js importmap（CDN，three@0.160.0） ============ -->
<script type="importmap">
{
  "imports": {
    "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
  }
}
</script>

<style>
/* ================= 场景色板 ================= */
:root{
  --sky:#2f7fd0; --sky-deep:#1b5fa8; --sea-navy:#153a58;
  --turq:#2fbfb3; --turq-deep:#128f86;
  --terra:#d96f32; --terra-deep:#b85520;
  --wood:#8a5a38; --wood-deep:#5f3c24;
  --cream:#f7f1e3; --cream-2:#efe6d2;
  --ink:#22333f; --ink-soft:#4a6070;
  --ok:#3f9d4f; --warn:#e8a13c; --danger:#e63946; --info:#2f7fd0;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#7fc4e8;
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased}
::selection{background:var(--turq);color:var(--cream)}
#app{position:fixed;inset:0}
#app canvas{display:block;touch-action:none;cursor:grab}
#app canvas:active{cursor:grabbing}

/* 轻微暗角，聚焦画面中心 */
#vignette{position:fixed;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(ellipse at 50% 46%, transparent 55%, rgba(21,58,88,.20) 100%)}

/* ================= 左下标题 ================= */
#brand{position:fixed;left:22px;bottom:22px;z-index:5;max-width:min(560px,calc(100vw - 340px));
  padding:14px 18px 13px;border-radius:16px;color:var(--cream);
  background:linear-gradient(135deg,rgba(21,58,88,.42),rgba(21,58,88,.20));
  border:1px solid rgba(247,241,227,.28);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  box-shadow:0 10px 32px rgba(21,58,88,.28);
  animation:riseIn .9s .2s cubic-bezier(.2,.8,.2,1) both}
#brand .overline{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:3px;
  color:#bfe9e4;text-transform:uppercase;margin-bottom:5px}
#brand h1{font-family:"Songti SC","STSong","SimSun",Georgia,serif;font-size:29px;line-height:1.15;
  font-weight:700;text-shadow:0 2px 14px rgba(10,40,66,.6)}
#brand h1 em{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;
  font-size:15px;color:#ffe9c9;margin-left:8px;letter-spacing:.5px}
#brand .hint{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;font-size:11.5px;color:rgba(247,241,227,.92)}
#brand .hint span{display:inline-flex;align-items:center;gap:5px}
#brand .hint svg{width:14px;height:14px;stroke:#9fdcd5;flex:none}
@keyframes riseIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ================= 右上静音按钮 ================= */
#audioBtn{position:fixed;top:16px;right:16px;z-index:6;display:flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:999px;border:1px solid rgba(138,90,56,.30);cursor:pointer;
  background:linear-gradient(150deg,rgba(247,241,227,.95),rgba(239,230,210,.92));
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:var(--wood-deep);font-size:12px;font-weight:700;font-family:inherit;
  box-shadow:0 6px 20px rgba(21,58,88,.22);transition:transform .15s,box-shadow .15s;
  animation:riseIn .8s .35s cubic-bezier(.2,.8,.2,1) both}
#audioBtn:hover{transform:translateY(-1px);box-shadow:0 9px 24px rgba(21,58,88,.3)}
#audioBtn:active{transform:scale(.97)}
#audioBtn svg{width:17px;height:17px;stroke:var(--turq-deep);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
#audioBtn.muted svg{stroke:var(--danger)}
#audioBtn .eq{display:flex;align-items:flex-end;gap:2px;height:12px}
#audioBtn .eq i{width:3px;border-radius:2px;background:var(--turq);animation:eq 1s ease-in-out infinite}
#audioBtn .eq i:nth-child(1){height:6px;animation-delay:0s}
#audioBtn .eq i:nth-child(2){height:11px;animation-delay:.25s}
#audioBtn .eq i:nth-child(3){height:8px;animation-delay:.5s}
#audioBtn.muted .eq,#audioBtn.idle .eq{display:none}
@keyframes eq{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
.hidden{display:none!important}

/* ================= 右侧常驻控制面板 ================= */
#panel{position:fixed;top:72px;right:16px;bottom:16px;width:284px;z-index:5;display:flex;flex-direction:column;
  border-radius:20px;border:1px solid rgba(138,90,56,.28);overflow:hidden;
  background:linear-gradient(165deg,rgba(247,241,227,.94),rgba(239,230,210,.90));
  backdrop-filter:blur(10px) saturate(1.1);-webkit-backdrop-filter:blur(10px) saturate(1.1);
  box-shadow:0 14px 44px rgba(21,58,88,.28);
  animation:slideIn .8s .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes slideIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
#panel header{display:flex;align-items:center;gap:10px;padding:13px 16px 11px;
  border-bottom:1px dashed rgba(138,90,56,.35)}
#panel header svg{width:32px;height:32px;flex:none}
#panel header h2{font-size:15px;color:var(--wood-deep);letter-spacing:1px}
#panel header small{display:block;font-size:8.5px;letter-spacing:2.5px;color:var(--turq-deep);margin-top:2px}
.panel-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:6px 16px 14px;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--turq) rgba(138,90,56,.14)}
.panel-scroll::-webkit-scrollbar{width:8px}
.panel-scroll::-webkit-scrollbar-track{background:rgba(138,90,56,.14);border-radius:4px}
.panel-scroll::-webkit-scrollbar-thumb{background:linear-gradient(var(--turq),var(--turq-deep));border-radius:4px}
.panel-scroll::-webkit-scrollbar-thumb:hover{background:var(--terra)}
section{padding:9px 0 4px;border-bottom:1px dashed rgba(138,90,56,.22)}
section:last-of-type{border-bottom:none}
.sec-t{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;color:var(--wood-deep);
  letter-spacing:2px;margin-bottom:7px}
.sec-t svg{width:14px;height:10px;stroke:var(--turq-deep);fill:none;stroke-width:2;stroke-linecap:round}
.row{margin-bottom:9px}
.row .lab{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}
.row .lab label{font-size:12px;color:var(--ink)}
.row .lab output{font-size:10.5px;font-weight:700;color:var(--turq-deep);font-variant-numeric:tabular-nums;
  background:rgba(47,191,179,.15);padding:1px 8px;border-radius:6px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:4px;outline:none;
  background:linear-gradient(90deg,var(--turq) 50%,rgba(138,90,56,.22) 50%);cursor:pointer;display:block}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:17px;height:17px;border-radius:50%;
  background:var(--cream);border:3.5px solid var(--terra);box-shadow:0 2px 6px rgba(95,60,36,.4);
  transition:transform .12s}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.18)}
input[type=range]::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:var(--cream);
  border:3.5px solid var(--terra);box-shadow:0 2px 6px rgba(95,60,36,.4)}
input[type=range]::-moz-range-track{background:transparent}
input[type=range]:focus-visible{outline:2px solid var(--turq);outline-offset:3px}
/* 开关 */
.switch{display:flex;align-items:center;gap:9px;margin-bottom:9px;cursor:pointer;user-select:none}
.switch input{position:absolute;opacity:0;width:0}
.switch .track{width:35px;height:20px;border-radius:10px;background:rgba(138,90,56,.30);position:relative;
  transition:background .2s;flex:none}
.switch .track::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:var(--cream);box-shadow:0 1px 4px rgba(95,60,36,.45);transition:transform .2s}
.switch input:checked+.track{background:var(--turq)}
.switch input:checked+.track::after{transform:translateX(15px)}
.switch input:focus-visible+.track{outline:2px solid var(--turq);outline-offset:2px}
.switch .lbl{font-size:12px;color:var(--in.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论