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">
<title>清風牌 · 老式落地電扇 | Three.js 交互場景</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Limelight&family=Noto+Serif+SC:wght@400;600;900&family=ZCOOL+XiaoWei&display=swap" rel="stylesheet">
<style>
:root{
  --brass:#c9a24b; --brass-hi:#eccb7c; --cream:#efe4c8; --ink:#151310;
  --panel:#1b211d; --panel2:#10150f; --red:#b23a2a; --jade:#2f6b57;
  --f-disp:'ZCOOL XiaoWei','Noto Serif SC',serif;
  --f-lat:'Limelight',serif;
  --f-body:'Noto Serif SC',serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#0e0c09;font-family:var(--f-body);color:var(--cream)}
#stage,#stage canvas{position:fixed;inset:0;display:block;cursor:grab}
#stage canvas:active{cursor:grabbing}
#vignette{position:fixed;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(ellipse at 50% 42%,transparent 52%,rgba(6,4,2,.62) 100%)}
#scrim{position:fixed;top:0;left:0;right:0;height:180px;pointer-events:none;z-index:3;
  background:linear-gradient(rgba(8,6,3,.55),transparent)}

/* ─── 品牌銘牌 ─── */
#brand{position:fixed;top:22px;left:24px;z-index:6;display:flex;gap:14px;align-items:center;
  padding:14px 20px 14px 14px;background:rgba(14,17,13,.78);
  border:1px solid rgba(201,162,75,.55);box-shadow:0 0 0 4px rgba(14,17,13,.5),0 12px 34px rgba(0,0,0,.5);
  animation:drop .9s .2s cubic-bezier(.2,.9,.3,1) both}
#brand .seal{width:46px;height:46px;background:var(--red);color:#f7ecd8;display:grid;place-items:center;
  font-family:var(--f-disp);font-size:28px;transform:rotate(-4deg);
  box-shadow:inset 0 0 0 2px rgba(247,236,216,.85),inset 0 0 12px rgba(0,0,0,.35)}
#brand h1{font-family:var(--f-disp);font-weight:400;font-size:34px;letter-spacing:6px;line-height:1;
  color:var(--cream);text-shadow:0 2px 8px rgba(0,0,0,.6)}
#brand .en{font-family:var(--f-lat);font-size:10px;letter-spacing:3.5px;color:var(--brass-hi);margin-top:6px}
#brand .sub{font-size:11px;letter-spacing:4px;color:#b9ad8f;margin-top:4px}
@keyframes drop{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}

/* ─── 右側控制面板 ─── */
#deck{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:6;
  display:flex;flex-direction:column;width:212px;
  max-height:min(92vh,660px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#6e5a2f transparent;
  padding:16px 16px;background:linear-gradient(178deg,#242c25,#151a15 60%,#10140f);
  border:1px solid rgba(201,162,75,.6);border-radius:10px;
  box-shadow:inset 0 1px 0 rgba(236,203,124,.28),inset 0 -6px 14px rgba(0,0,0,.5),0 18px 44px rgba(0,0,0,.6);
  animation:slideIn .9s .45s cubic-bezier(.2,.9,.3,1) both}
#deck::-webkit-scrollbar{width:5px}
#deck::-webkit-scrollbar-thumb{background:#6e5a2f;border-radius:3px}
@keyframes slideIn{from{opacity:0;transform:translate(34px,-50%)}to{opacity:1;transform:translate(0,-50%)}}
.deck-sep{height:1px;width:100%;margin:13px 0;
  background:linear-gradient(90deg,transparent,rgba(201,162,75,.55),transparent)}
.deck-group{display:flex;flex-direction:column;align-items:center;gap:10px;padding:2px 0}
.deck-label{font-size:10px;letter-spacing:3px;color:var(--brass-hi);display:flex;align-items:center;gap:8px;white-space:nowrap}
.deck-label i{font-family:var(--f-lat);font-style:normal;font-size:8px;color:#8f825f;letter-spacing:2px}

.jewel{width:9px;height:9px;border-radius:50%;background:#3a1512;box-shadow:inset 0 0 3px #000;transition:.3s}
.jewel.on{background:#ff5a3c;box-shadow:0 0 8px #ff5a3c,0 0 16px rgba(255,90,60,.6);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 4px #ff5a3c,0 0 8px rgba(255,90,60,.4)}}

.key-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.key{width:100%;height:54px;border:1px solid #8a713a;border-radius:4px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  background:linear-gradient(180deg,#f2e7cc,#d8c9a4 55%,#c2b18a);
  box-shadow:0 4px 0 #6e5a2f,0 6px 10px rgba(0,0,0,.5),inset 0 1px 0 #fff6dd;
  transition:transform .08s,box-shadow .08s,filter .15s;font-family:var(--f-body)}
.key .k-zh{font-family:var(--f-disp);font-size:22px;color:#1d3a30;line-height:1}
.key .k-en{font-family:var(--f-lat);font-size:7px;letter-spacing:2px;color:#6b5c38}
.key:hover{filter:brightness(1.08)}
.key:active{transform:translateY(3px)}
.key.on{transform:translateY(3px);
  background:linear-gradient(180deg,#d9caa6,#bfae87);
  box-shadow:0 1px 0 #6e5a2f,inset 0 2px 6px rgba(0,0,0,.35),0 0 12px rgba(255,170,70,.35)}
.key.on .k-zh{color:#8f2f1d}

.toggles{display:flex;flex-direction:column;gap:10px;width:100%}
.sw{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;
  cursor:pointer;user-select:none;padding:2px 2px}
.sw-name{font-size:12px;letter-spacing:3px;color:var(--cream);display:flex;align-items:baseline;gap:7px}
.sw-name i{font-family:var(--f-lat);font-style:normal;font-size:7px;letter-spacing:2px;color:#8f825f}
.sw-track{width:44px;height:20px;border-radius:10px;background:#0b0e0a;position:relative;flex:none;
  border:1px solid #7d6633;box-shadow:inset 0 2px 5px #000;transition:.25s}
.sw-knob{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:linear-gradient(145deg,#eccb7c,#9a7c3a);b.........完整代码请登录后点击上方下载按钮下载查看