代码语言：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, viewport-fit=cover">
<meta name="theme-color" content="#f2ede6">
<title>海港沙盘 · Harbor Diorama</title>

<!-- Three.js importmap：仅从 CDN 引入 three 与 addons，其余全部内联 -->
<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{
  --bg:#f2ede6; --panel:#fbf7f0; --panel2:#f5eee2;
  --ink:#4a3b2e; --ink2:#8a7663; --line:#e6dac8; --track:#ece2d2;
  --teal:#2aa79b; --teal2:#35c4b5; --red:#d94f3d; --amber:#e8a13a; --blue:#2f6fb2;
  --shadow:0 10px 30px rgba(93,64,45,.14), 0 2px 6px rgba(93,64,45,.08);
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%; overflow:hidden;}
body{
  background:var(--bg); color:var(--ink);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",system-ui,sans-serif;
  font-size:14px; -webkit-font-smoothing:antialiased;
}
#stage{position:fixed; inset:0; z-index:0;}
#stage canvas{display:block; touch-action:none;}
/* 轻微暗角，营造微缩摄影棚质感 */
#vignette{position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%, transparent 52%, rgba(93,64,45,.13) 100%);}

/* ============ 左上标题 ============ */
#brand{position:fixed; top:16px; left:16px; z-index:3; display:flex; gap:11px; align-items:flex-start;
  background:rgba(251,247,240,.9); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:16px; padding:12px 16px 11px 12px; box-shadow:var(--shadow);
  animation:drop .7s cubic-bezier(.2,.9,.3,1.2) both;}
#brand .logo{width:38px; height:38px; flex:none; border-radius:11px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--teal2),var(--blue)); box-shadow:0 3px 8px rgba(42,167,155,.35);}
#brand .logo svg{width:22px; height:22px; stroke:#fff; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
#brand h1{font-size:18px; letter-spacing:.02em; line-height:1.2;}
#brand h1 .en{font-family:Georgia,"Times New Roman",serif; font-style:italic; font-weight:400; font-size:13px; color:var(--teal); margin-left:2px;}
#brand .bar{height:3px; width:64px; border-radius:2px; margin:6px 0 6px;
  background:linear-gradient(90deg,var(--teal2),var(--amber),var(--red));}
#brand .hints{font-size:11px; color:var(--ink2); letter-spacing:.03em;}
#brand .hints b{color:var(--ink); font-weight:600;}
@keyframes drop{from{opacity:0; transform:translateY(-14px);}to{opacity:1; transform:none;}}

/* ============ 顶部声音按钮 ============ */
#soundBtn{position:fixed; top:16px; right:16px; z-index:4; display:flex; align-items:center; gap:8px;
  background:rgba(251,247,240,.92); backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:999px;
  padding:8px 14px 8px 11px; font:600 12px/1 inherit; color:var(--ink); cursor:pointer; box-shadow:var(--shadow);
  transition:.18s; animation:drop .7s .1s cubic-bezier(.2,.9,.3,1.2) both;}
#soundBtn:hover{transform:translateY(-1px); border-color:var(--teal);}
#soundBtn svg{width:16px; height:16px; stroke:var(--teal); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
#soundBtn .dot{width:7px; height:7px; border-radius:50%; background:var(--teal2); box-shadow:0 0 0 0 rgba(53,196,181,.5); animation:pulse 2s infinite;}
#soundBtn.off .dot{background:#c9b8a3; animation:none; box-shadow:none;}
#soundBtn.off svg{stroke:var(--ink2);}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(53,196,181,.45);}70%{box-shadow:0 0 0 7px rgba(53,196,181,0);}100%{box-shadow:0 0 0 0 rgba(53,196,181,0);}}

/* ============ 右侧常驻控制面板 ============ */
#panel{position:fixed; top:64px; right:16px; bottom:16px; width:288px; z-index:3; display:flex; flex-direction:column;
  background:rgba(251,247,240,.93); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); overflow:hidden;
  animation:slidein .7s .15s cubic-bezier(.2,.9,.3,1.1) both;}
@keyframes slidein{from{opacity:0; transform:translateX(24px);}to{opacity:1; transform:none;}}
.p-head{display:flex; align-items:center; justify-content:space-between; padding:13px 16px 11px;
  border-bottom:1px solid var(--line); background:linear-gradient(180deg,rgba(53,196,181,.08),transparent);}
.p-head .t{font-size:14px; font-weight:700; letter-spacing:.05em;}
.p-head .s{font-size:10px; letter-spacing:.22em; color:var(--ink2); margin-top:2px;}
.p-head .live{display:flex; align-items:center; gap:5px; font-size:10px; color:var(--teal); font-weight:700; letter-spacing:.1em;}
.p-head .live i{width:7px; height:7px; border-radius:50%; background:var(--teal2); animation:pulse 2s infinite;}
.p-body{flex:1; overflow-y:auto; overflow-x:hidden; padding:2px 16px 12px;
  scrollbar-width:thin; scrollbar-color:#c9b8a3 #efe7db;}
.p-body::-webkit-scrollbar{width:8px;}
.p-body::-webkit-scrollbar-track{background:#efe7db; border-radius:8px;}
.p-body::-webkit-scrollbar-thumb{background:#c9b8a3; border-radius:8px; border:2px solid #efe7db;}
.p-body::-webkit-scrollbar-thumb:hover{background:var(--teal);}
.p-foot{display:flex; justify-content:space-between; padding:8px 16px; border-top:1px solid var(--line);
  font-size:10.5px; color:var(--ink2); letter-spacing:.04em; background:var(--panel2); font-variant-numeric:tabular-nums;}
.p-foot b{color:var(--teal); font-weight:700;}

.sec{display:flex; align-items:center; gap:6px; margin:13px 0 3px; font-size:10.5px; font-weight:700;
  letter-spacing:.18em; color:var(--ink2);}
.sec svg{width:13px; height:13px; stroke:var(--teal); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none;}
.sec::after{content:''; flex:1; height:1px; background:var(--line);}

.slider{padding:5px 0 2px;}
.slider .lab{display:flex; justify-content:space-between; align-items:center; font-size:12.5px; margin-bottom:1px;}
.val{font-size:11px; font-weight:700; color:var(--teal); background:rgba(53,196,181,.13);
  padding:1px 8px; border-radius:8px; font-variant-numeric:tabular-nums; transition:background .2s;}
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:20px; background:transparent; cursor:pointer; --p:50%;}
input[type=range]::-webkit-slider-runnable-track{height:5px; border-radius:3px;
  background:linear-gradient(to right,var(--teal2) var(--p),var(--track) var(--p));}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:15px; height:15px; border-radius:50%;
  background:#fff; border:3px solid var(--teal); margin-top:-5px; box-shadow:0 1px 4px rgba(74,59,46,.35); transition:transform .15s;}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.18);}
input[type=range]::-moz-range-track{height:5px; border-radius:3px; background:var(--track);}
input[type=range]::-moz-range-progress{height:5px; border-radius:3px; background:var(--teal2);}
input[type=range]::-moz-range-thumb{width:9px; height:9px; border-radius:50%; background:#fff; border:3px solid var(--teal); box-shadow:0 1px 4px rgba(74,59,46,.35);}
input[type=range]:focus-visible{outline:2px solid var(--blue); outline-offset:2px; border-radius:6px;}

.toggles{display:grid; grid-template-columns:1fr 1fr; gap:0 12px;}
.ctl{display:flex; justify-content:space-between; align-items:center; gap:8px; padding:7px 0; font-size:12.5px;}
.switch{position:relative; width:36px; height:20px; flex:none;}
.switch input{position:absolute; inset:0; opacity:0; margin:0; cursor.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论