代码语言：html

所属分类：其他

代码由minimax-m3.1-flash-p ai生成，可能有错误，仅供参考：点击查看提示词

代码描述：three实现三维九层古塔建筑修建生成过程动画代码

代码标签： 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">
<title>九层古塔 · 营造</title>
<meta name="description" content="Three.js 三维动画：从夯土筑基到鎏金宝顶，见证一座九层古塔的营造全程。">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;500;700;900&family=Outfit:wght@300;400;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
:root{
  --ink:#0a0b0d; --gold:#d9b45f; --gold-dim:#8a6f34;
  --vermilion:#c8443a; --paper:#e6dcc4; --mute:#6b7580;
  --serif:"Noto Serif SC","Songti SC","SimSun",serif;
  --sans:"Outfit","PingFang SC","Microsoft YaHei",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--sans);font-size:14px;line-height:1.6;
  overflow:hidden;-webkit-font-smoothing:antialiased;overscroll-behavior:none;
}
canvas{display:block}
#stage{position:fixed;inset:0;z-index:0}
#stage canvas{width:100%;height:100%;touch-action:none}

/* 画卷 */
.frame{position:fixed;inset:14px;z-index:5;pointer-events:none;border:1px solid rgba(217,180,95,.16)}
.frame i{position:absolute;width:22px;height:22px;border:1px solid rgba(217,180,95,.6)}
.frame i:nth-child(1){top:-1px;left:-1px;border-right:0;border-bottom:0}
.frame i:nth-child(2){top:-1px;right:-1px;border-left:0;border-bottom:0}
.frame i:nth-child(3){bottom:-1px;left:-1px;border-right:0;border-top:0}
.frame i:nth-child(4){bottom:-1px;right:-1px;border-left:0;border-top:0}
.frame::after{content:"";position:absolute;inset:5px;border:1px solid rgba(217,180,95,.08)}

/* 标题 */
.title{position:fixed;left:34px;top:30px;z-index:6;user-select:none;pointer-events:none}
.title h1{
  font-family:var(--serif);font-weight:900;font-size:38px;line-height:1.06;margin:0;letter-spacing:.14em;
  background:linear-gradient(180deg,#f6e6bd 0%,#d9b45f 48%,#8a6f34 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px rgba(217,180,95,.24));
}
.title .rule{width:52px;height:1px;background:linear-gradient(90deg,var(--gold),transparent);margin:12px 0 9px}
.title p{margin:0;font-size:12px;color:#9aa3ad;letter-spacing:.24em;font-weight:300;text-shadow:0 1px 8px rgba(0,0,0,.85),0 0 3px rgba(0,0,0,.7)}
.title .zh{margin-top:4px;font-family:var(--serif);font-size:12.5px;color:rgba(232,206,148,.85);letter-spacing:.28em;text-shadow:0 1px 8px rgba(0,0,0,.85)}
.seal{
  position:fixed;right:34px;top:30px;z-index:6;width:56px;height:56px;
  border:1.5px solid rgba(200,68,58,.72);color:#c8443a;display:grid;place-items:center;
  font-family:var(--serif);font-weight:700;font-size:16px;line-height:1.06;text-align:center;
  box-shadow:0 0 22px rgba(200,68,58,.18) inset;user-select:none;pointer-events:none;
}
.seal span{display:block;transform:translateY(1px)}

/* 当前工序 */
.phase{
  position:fixed;left:34px;top:150px;z-index:6;max-width:300px;pointer-events:none;user-select:none;
}
.phase .no{font-family:var(--mono);font-size:10.5px;color:#b08f42;letter-spacing:.2em;text-shadow:0 1px 8px rgba(0,0,0,.85)}
.phase h2{
  font-family:var(--serif);font-weight:700;font-size:27px;margin:4px 0 2px;letter-spacing:.1em;
  color:#f2e2b8;filter:drop-shadow(0 2px 12px rgba(0,0,0,.7));
}
.phase p{margin:0;font-size:12px;color:#a4aab3;letter-spacing:.06em;line-height:1.55;text-shadow:0 1px 8px rgba(0,0,0,.85)}

/* 控制台 */
.panel{
  position:fixed;right:34px;top:120px;z-index:6;width:236px;
  background:rgba(8,9,12,.7);backdrop-filter:blur(14px);
  border:1px solid rgba(217,180,95,.13);border-radius:3px;padding:14px 15px 13px;
}
.panel h2{
  margin:0 0 11px;font-family:var(--serif);font-size:12px;font-weight:500;letter-spacing:.26em;
  color:rgba(217,180,95,.82);display:flex;align-items:center;gap:8px;
}
.panel h2::after{content:"";flex:1;height:1px;background:rgba(217,180,95,.16)}
.btns{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 11px}
button{
  font-family:var(--sans);font-size:11.5px;letter-spacing:.05em;color:var(--paper);
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.1);border-radius:2px;
  padding:5px 9px;cursor:pointer;transition:all .18s ease;
}
button:hover{background:rgba(217,180,95,.1);border-color:rgba(217,180,95,.42);color:#f0dcae;transform:translateY(-1px)}
button:active{transform:translateY(0)}
button.on{background:rgba(217,180,95,.17);border-color:rgba(217,180,95,.55);color:#f2ddab}
button.wide{flex:1}
.row{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.row label{font-size:11.5px;color:var(--mute);letter-spacing:.06em;min-width:52px;flex-shrink:0}
.row .val{font-family:var(--mono);font-size:10.5px;color:rgba(217,180,95,.75);min-width:32px;text-align:right;flex-shrink:0}
input[type=range]{
  -webkit-appearance:none;appearance:none;flex:1;height:2px;background:rgba(255,255,255,.12);
  border-radius:2px;outline:none;cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 9px rgba(217,180,95,.55);cursor:pointer;
}
input[type=range]::-moz-range-thumb{
  width:12px;height:12px;border:0;border-radius:50%;background:var(--gold);cursor:pointer;
}
.sep{height:1px;background:rgba(255,255,255,.07);margin:11px 0 10px}

/* 时间轴 */
.timeline{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:6;
  width:min(760px, calc(100vw - 80px));
  background:rgba(8,9,12,.66);backdrop-filter:blur(14px);
  border:1px solid rgba(217,180,95,.13);border-radius:3px;padding:11px 16px 13px;
}
.tl-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.tl-head .nm{font-family:var(--serif);font-size:12.5px;color:rgba(217,180,95,.85);letter-spacing:.14em}
.tl-head .tm{font-family:var(--mono);font-size:10.5px;color:var(--mute)}
.tl-track{position:relative;height:26px}
.tl-track input{position:absolute;left:0;right:0;top:11px;width:100%;margin:0}
.tl-marks{position:absolute;left:0;right:0;top:0;height:26px;pointer-events:none}
.tl-marks b{
  position:absolute;top:6px;width:1px;height:6px;background:rgba(217,180,95,.3);
  transform:translateX(-.5px);transition:background .2s,height .2s;
}
.tl-marks b.done{background:rgba(217,180,95,.55);height:8px;top:5px}
.tl-marks b.cur{background:var(--gold);height:11px;top:3px;box-shadow:0 0 7px rgba(217,180,95,.85)}
.tl-marks em{
  position:absolute;top:16px;transform:translateX(-50%);font-style:normal;
  font-family:var(--serif);font-size:9.5px;color:#5a616b;letter-spacing:.06em;white-space:nowrap;
}
.tl-marks em.cur{color:#f2ddab}
.tl-legend{display:flex;justify-content:space-between;margin-top:12px;font-size:10.5px;color:#525a64;letter-spacing:.05em}
.tl-legend b{color:rgba(217,180,95,.7);font-weight:500}

.status{
  position:fixed;left:34px;bottom:26px;z-index:6;font-family:var(--mono);
  font-size:.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论