three实现三维古代农村龙骨水车灌溉运水场景动画代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：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">
<title>龙骨水车 · 古代移动式链式提水机械 | 三维原理动画</title>
<style>
:root{ --acc:#e8b04b; --acc2:#ffd98a; --panel:rgba(22,28,36,.86); --line:rgba(232,176,75,.35); }
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden}
body{font-family:"Noto Serif SC","Songti SC","STSong","SimSun","Microsoft YaHei",serif;
 background:linear-gradient(180deg,#8ecdea 0%,#c8e7f2 42%,#efe6cd 78%,#e6d9b8 100%);}
#stage{position:fixed;inset:0}
#stage canvas{display:block}
.panel{position:fixed;z-index:10;background:var(--panel);color:#f1e8d6;border:1px solid var(--line);
 border-radius:12px;box-shadow:0 8px 28px rgba(10,14,20,.35);backdrop-filter:blur(8px)}
.panel h2{font-size:14px;letter-spacing:2px;color:var(--acc2);padding:10px 14px;cursor:pointer;
 display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(232,176,75,.18);user-select:none}
.panel h2 .car{transition:transform .25s;font-size:11px}
.panel.closed h2 .car{transform:rotate(-90deg)}
.panel .bd{padding:10px 14px 12px}
.panel.closed .bd{display:none}
#title{top:14px;left:14px;padding:12px 18px;background:linear-gradient(135deg,rgba(30,24,14,.9),rgba(46,36,20,.84));border-color:rgba(232,176,75,.5)}
#title h1{font-size:22px;color:#ffe9bd;letter-spacing:6px}
#title p{font-size:11.5px;color:#d8c69a;letter-spacing:2px;margin-top:5px}
#legend{top:120px;left:14px;width:212px}
.lg-item{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:8px;cursor:pointer;font-size:13px;transition:background .15s}
.lg-item:hover{background:rgba(232,176,75,.16)}
.lg-item i{width:13px;height:13px;border-radius:3px;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.25) inset}
.lg-tip{font-size:11px;color:#9aa5b1;margin-top:8px;line-height:1.7}
#steps{top:14px;right:14px;width:312px}
#stepHead{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#cbb98a;margin-bottom:8px}
#stepTitle{font-size:16.5px;color:var(--acc2);letter-spacing:2px;margin-bottom:8px}
#stepText{font-size:12.8px;line-height:1.9;color:#e8e0cf;text-align:justify;min-height:118px}
#stepNav{display:flex;gap:8px;margin-top:12px}
#stepNav button{flex:1}
#autoBtn{padding:3px 9px;font-size:11px}
#bar{left:50%;transform:translateX(-50%);bottom:14px;display:flex;align-items:center;gap:6px;padding:10px 14px;flex-wrap:wrap;justify-content:center;max-width:min(96vw,1000px)}
.btn{background:#2c333d;color:#e8dfc9;border:1px solid #4a5260;border-radius:8px;padding:7px 12px;font-size:12.5px;
 cursor:pointer;letter-spacing:1px;font-family:inherit;transition:all .15s}
.btn:hover{border-color:var(--acc);color:var(--acc2)}
.btn.on{background:var(--acc);color:#26200f;border-color:var(--acc);font-weight:bold}
.btn.big{font-size:14px;padding:7px 15px}
.grp{display:flex;align-items:center;gap:6px;padding:0 8px;border-left:1px dashed rgba(255,255,255,.14)}
.grp:first-child{border-left:none}
.grp label{font-size:11.5px;color:#aab4c0;letter-spacing:1px}
input[type=range]{width:96px;accent-color:var(--acc)}
#spdVal{font-size:12px;color:var(--acc2);width:36px;text-align:center}
#help{position:fixed;right:14px;bottom:14px;font-size:11px;color:#6d7683;z-index:9;letter-spacing:1px}
#fallback{display:none;position:fixed;inset:0;z-index:99;background:#222;color:#eee;font-size:15px;align-items:center;justify-content:center;text-align:center;line-height:2;padding:20px}
@media(max-width:900px){
 #legend{top:auto;bottom:90px;left:10px;width:176px}
 #steps{width:246px;right:10px}
 #stepText{min-height:86px;font-size:12px}
 #title h1{font-size:17px}
 #help{display:none}
}
</style>
</head>
<body>
<div id="stage"></div>

<div class="panel" id="title"><h1>龙 骨 水 车</h1><p>古代移动式 · 脚踏链式提水机械 · 三维原理动画</p></div>

<div class="panel" id="legend">
 <h2>结构图例 <span class="car">▼</span></h2>
 <div class="bd"><div id="legendItems"></div>
 <div class="lg-tip">悬停高亮部件 · 点击聚焦观察<br>整机木构轻巧，两人即可抬移，随水源涨落随处架设。</div></div>
</div>

<div class="panel" id="steps">
.........完整代码请登录后点击上方下载按钮下载查看