three实现3d数字工厂仓储机械臂搬运数字孪生大屏亮色简洁代码-html代码-BFW代码库

three实现3d数字工厂仓储机械臂搬运数字孪生大屏亮色简洁代码

代码语言：html

所属分类：图表

代码描述：three实现3d数字工厂仓储机械臂搬运数字孪生大屏亮色简洁代码

下面为部分代码预览，完整代码请点击下载或在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>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            background: #f0f2f5;
            overflow: hidden;
            font-family: -apple-system, 'SF Pro Display', 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif;
            color: #2c3e50;
            -webkit-font-smoothing: antialiased;
        }
        #canvas-container {
            position: absolute; top: 0; left: 0;
            width: 100%; height: 100%; z-index: 1;
        }

        /* ── 顶栏 ── */
        .header {
            position: fixed; top: 0; left: 0; width: 100%; height: 56px; z-index: 10;
            display: flex; align-items: center; justify-content: center;
            background: rgba(255,255,255,0.72);
            backdrop-filter: blur(24px) saturate(1.4);
            border-bottom: 1px solid rgba(0,0,0,0.06);
        }
        .header-title {
            font-size: 17px; font-weight: 600; letter-spacing: 3px; color: #334155;
        }
        .header-time {
            position: absolute; right: 24px; font-size: 12px; color: #94a3b8;
            font-variant-numeric: tabular-nums;
        }
        .header-badge {
            position: absolute; left: 24px; font-size: 11px; color: #94a3b8;
            display: flex; align-items: center; gap: 6px;
        }
        .header-badge .live {
            width: 6px; height: 6px; border-radius: 50%;
            background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.15);
            animation: livePulse 2s infinite;
        }
        @keyframes livePulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} }

        /* ── 面板 ── */
        .panel {
            position: fixed; z-index: 10;
            background: rgba(255,255,255,0.65);
            backdrop-filter: blur(20px) saturate(1.3);
            border: 1px solid rgba(255,255,255,0.8);
            border-radius: 14px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.04);
        }
        .panel-head {
            padding: 14px 18px 8px;
            font-size: 12px; font-weight: 600; color: #64748b;
            letter-spacing: 1.5px; text-transform: uppercase;
        }
        .panel-body { padding: 4px 18px 16px; }

        /* ── 行 ── */
        .row {
            display: flex; justify-content: space-between; align-items: center;
            padding: 6px 0;
        }
        .row + .row { border-top: 1px solid rgba(0,0,0,0.04); }
        .row-label { font-size: 12px; color: #94a3b8; }
        .row-val { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
        .v-green { color: #16a34a; }
        .v-blue { color: #3b82f6; }
        .v-amber { color: #d97706; }
        .v-slate { color: #475569; }
        .v-violet { color: #7c3aed; }

        /* ── 统计卡 ── */
        .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
        .stat-card {
            background: rgba(255,255,255,0.5);
            border: 1px solid rgba(0,0,0,0.04);
            border-radius: 10px; padding: 14px 10px; text-align: center;
        }
        .stat-num { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
        .stat-lbl { font-size: 10px; color: #94a3b8; margin-top: 2px; }

        /* ── 关节条 ── */
        .joint { margin-bottom: 8px; }
        .joint-top { display: flex; justify-content: space-between; margin-.........完整代码请登录后点击上方下载按钮下载查看