three实现异步电机三维可视化运行拆解动画代码-html代码-BFW代码库

three实现异步电机三维可视化运行拆解动画代码

代码语言：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>
*{margin:0;padding:0;box-sizing:border-box}
body{overflow:hidden;background:#0a0e17;font-family:"Microsoft YaHei",sans-serif;color:#c8d6e5}
canvas{display:block}

/* 标题 */
.title-bar{
    position:fixed;top:0;left:0;right:0;z-index:10;
    display:flex;justify-content:center;align-items:center;
    padding:14px;pointer-events:none;
    background:linear-gradient(180deg,rgba(10,14,23,.9),transparent);
}
.title-bar h1{
    font-size:24px;letter-spacing:6px;font-weight:400;
    background:linear-gradient(90deg,#4fc3f7,#81d4fa,#4dd0e1);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    text-shadow:0 0 30px rgba(79,195,247,.3);
}

/* 控制面板 */
.ctrl-panel{
    position:fixed;left:16px;top:70px;z-index:10;
    background:rgba(15,20,35,.88);
    border:1px solid rgba(79,195,247,.2);
    border-radius:14px;
    padding:18px 22px;
    min-width:240px;
    backdrop-filter:blur(12px);
    box-shadow:0 8px 32px rgba(0,0,0,.4);
}
.ctrl-panel h3{
    font-size:14px;color:#4fc3f7;margin-bottom:12px;
    letter-spacing:3px;border-bottom:1px solid rgba(79,195,247,.15);
    padding-bottom:8px;
}
.ctrl-row{
    display:flex;align-items:center;justify-content:space-between;
    margin:10px 0;font-size:13px;
}
.ctrl-row label{color:#8899aa;flex-shrink:0;width:80px}
.ctrl-row input[type=range]{
    flex:1;margin:0 8px;accent-color:#4fc3f7;cursor:pointer;
}
.ctrl-row .val{color:#4fc3f7;min-width:50px;text-align:right;font-size:12px}

.btn-row{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.btn{
    padding:7px 16px;border:1px solid rgba(79,195,247,.3);
    background:rgba(79,195,247,.08);color:#4fc3f7;
    border-radius:8px;cursor:pointer;font-size:12px;
    transition:.2s;letter-spacing:1px;
}
.btn:hover{background:rgba(79,195,247,.2);border-color:#4fc3f7}
.btn.active{background:rgba(79,195,247,.25);border-color:#4fc3f7;color:#fff}

/* 信息面板 */
.info-panel{
    position:fixed;right:16px;top:70px;z-index:10;
    background:rgba(15,20,35,.88);
    border:1px solid rgba(79,195,247,.2);
    border-radius:14px;
    padding:18px 22px;
    min-width:220px;
    backdrop-filter:blur(12px);
    box-shadow:0 8px 32px rgba(0,0,0,.4);
}
.info-panel h3{
    font-size:14px;color:#4fc3f7;margin-bottom:12px;
    letter-spacing:3px;border-bottom:1px solid rgba(79,195,247,.15);
    padding-bottom:8px;
}
.info-item{
    display:flex;justify-content:space-between;
    margin:8px 0;font-size:13px;
}
.info-item .lbl{color:#667788}
.info-item .v{color:#4fc3f7;font-weight:600}

.legend{margin-top:14px;border-top:1px solid rgba(79,195,247,.1);padding-top:10px}
.legend-item{display:flex;align-items:center;margin:5px 0;font-size:11px;color:#8899aa}
.legend-dot{width:12px;height:12px;border-radius:50%;margin-right:8px;flex-shrink:0}

/* 底部说明 */
.bottom-info{
    position:fixed;bottom:14px;left:50%;transform:translateX(-50%);
    z-index:10;font-size:11px;color:rgba(150,170,190,.5);
    pointer-events:none;letter-spacing:1px;
}
</style>
</head>
<body>

<div class="title-bar">
    <h1>⚡ 异步电动机 三维可视化</h1>
</div>

<div class.........完整代码请登录后点击上方下载按钮下载查看