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,user-scalable=no">
<title>变形金刚 · TRANSFORMER — Three.js 变形演示</title>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Rajdhani:wght@500;600;700&family=ZCOOL+QingKe+HuangYou&display=swap" rel="stylesheet">
<style>
:root{
  --amber:#ffb42e; --cyan:#37e1ff; --red:#ff4655;
  --steel:#9fb2c4; --ink:#0b1118;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#070b10;
  font-family:'Rajdhani','Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;color:var(--steel)}
#app{position:fixed;inset:0}
canvas{display:block}

/* ---------- 全局氛围层 ---------- */
.fx-vignette{position:fixed;inset:0;pointer-events:none;z-index:5;
  background:radial-gradient(ellipse at center,transparent 52%,rgba(2,5,9,.62))}
.fx-scan{position:fixed;inset:0;pointer-events:none;z-index:5;opacity:.5;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.013) 0 1px,transparent 1px 3px)}
.fx-sweep{position:fixed;left:0;right:0;height:90px;pointer-events:none;z-index:5;
  background:linear-gradient(180deg,transparent,rgba(120,200,255,.05),transparent);
  animation:sweep 8s linear infinite}
@keyframes sweep{from{transform:translateY(-120px)}to{transform:translateY(110vh)}}
.corner{position:fixed;width:26px;height:26px;pointer-events:none;z-index:6;opacity:.75}
.c-tl{top:10px;left:10px;border-top:2px solid var(--amber);border-left:2px solid var(--amber)}
.c-tr{top:10px;right:10px;border-top:2px solid var(--cyan);border-right:2px solid var(--cyan)}
.c-bl{bottom:10px;left:10px;border-bottom:2px solid var(--cyan);border-left:2px solid var(--cyan)}
.c-br{bottom:10px;right:10px;border-bottom:2px solid var(--amber);border-right:2px solid var(--amber)}

/* ---------- 面板通用 ---------- */
.panel{position:fixed;z-index:10;padding:14px 18px;
  background:linear-gradient(165deg,rgba(14,21,31,.92),rgba(8,13,20,.86));
  border:1px solid rgba(255,180,46,.28);
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.panel::before{content:'';position:absolute;top:0;left:14px;right:0;height:2px;
  background:linear-gradient(90deg,var(--amber),transparent)}

/* ---------- 左上：标题 + 形态徽章 ---------- */
#brand{top:20px;left:20px}
.eyebrow{font-family:'Orbitron';font-size:10px;letter-spacing:.35em;color:var(--cyan)}
.eyebrow span{color:var(--steel)}
#brand h1{font-family:'ZCOOL QingKe HuangYou','Orbitron';font-weight:400;color:#fff;
  font-size:36px;letter-spacing:.12em;margin:2px 0 9px;text-shadow:0 0 22px rgba(255,180,46,.35)}
#brand h1 .sub{display:block;font-family:'Orbitron';font-size:10px;letter-spacing:.42em;color:var(--amber)}
#chip{display:inline-flex;align-items:center;gap:9px;padding:4px 12px;border:1px solid currentColor;
  color:var(--amber);font-size:14px;font-weight:600;letter-spacing:.15em;transition:color .4s}
#chip i{width:8px;height:8px;background:currentColor;animation:pulse 1.5s infinite}
#chip em{font-style:normal;font-family:'Orbitron';font-size:9px;letter-spacing:.3em;opacity:.8}
body.mode-car #chip{color:var(--cyan)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.2}}

/* ---------- 右上：遥测仪表 ---------- */
#tele{top:20px;right:20px;text-align:right;min-width:196px}
#tele .spd{font-family:'Orbitron';font-weight:900;font-size:44px;color:#fff;line-height:1;
  text-shadow:0 0 18px rgba(55,225,255,.35)}
#tele .unit{font-size:11px;letter-spacing:.25em;color:var(--steel);margin-left:6px}
#tele .bar{height:6px;background:#0d151f;margin:8px 0 12px;position:relative;overflow:hidden}
#tele .bar i{position:absolute;inset:0 auto 0 0;width:0%;
  background:linear-gradient(90deg,var(--cyan),var(--amber) 70%,var(--red));transition:width .12s}
#tele .grid{display:grid;grid-template-columns:auto auto;gap:7px 20px;font-size:12px;text-align:left}
#tele label{display:block;font-family:'Orbitron';font-size:8.5px;letter-spacing:.25em;color:var(--steel)}
#tele b{font-family:'Orbitron';font-size:14px;color:#fff;font-weight:700}
#tele .btns{grid-column:1/-1;display:flex;gap:8px;margin-top:4px}
#tele .btns button{flex:1;font-family:'Orbitr.........完整代码请登录后点击上方下载按钮下载查看