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

代码语言：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: #060b18;
            overflow: hidden;
            font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
            color: #fff;
        }
        #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: 70px; z-index: 10;
            display: flex; align-items: center; justify-content: center;
            background: linear-gradient(180deg, rgba(6,11,24,0.97) 0%, rgba(6,11,24,0) 100%);
        }
        .header-title {
            font-size: 26px; font-weight: bold; letter-spacing: 6px;
            background: linear-gradient(90deg, #00d4ff, #7b2fff, #00d4ff);
            background-size: 200% auto;
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            animation: shineText 3s linear infinite;
        }
        @keyframes shineText { to { background-position: 200% center; } }
        .header-line {
            position: absolute; bottom: 0; left: 10%; width: 80%; height: 1px;
            background: linear-gradient(90deg, transparent, #00d4ff, #7b2fff, #00d4ff, transparent);
        }
        .header-time {
            position: absolute; right: 30px; font-size: 13px; color: #667788;
        }
        .header-left-info {
            position: absolute; left: 30px; font-size: 13px; color: #667788;
        }

        .panel {
            position: fixed; z-index: 10;
            background: rgba(4, 12, 30, 0.88);
            border: 1px solid rgba(0,212,255,0.15);
            border-radius: 8px;
            backdrop-filter: blur(12px);
        }
        .panel::before {
            content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
            background: linear-gradient(90deg, transparent, #00d4ff, transparent);
        }
        .panel-title {
            padding: 12px 16px 6px; font-size: 13px; font-weight: bold;
            color: #00d4ff; letter-spacing: 2px;
            display: flex; align-items: center; gap: 8px;
        }
        .panel-title .dot {
            width: 7px; height: 7px; background: #00d4ff;
            border-radius: 50%; box-shadow: 0 0 8px #00d4ff;
            animation: pulse 2s infinite;
        }
        @keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.3;} }
        .panel-content { padding: 6px 16px 14px; }

        .corner { position: absolute; width: 10px; height: 10px; }
        .corner.tl { top:-1px;left:-1px;border-top:2px solid #00d4ff;border-left:2px solid #00d4ff; }
        .corner.tr { top:-1px;right:-1px;border-top:2px solid #00d4ff;border-right:2px solid #00d4ff; }
        .corner.bl { bottom:-1px;left:-1px;border-bottom:2px solid #00d4ff;border-left:2px solid #00d4ff; }
        .corner.br { bottom:-1px;right:-1px;border-bottom:2px solid #00d4ff;border-right:2px solid #00d4ff; }

        .panel-status { top: 80px; left: 20px; width: 270px; }
        .status-row {
            display: flex; justify-content: space-between; align-items: center;
            padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
            font-size: 12.5px;
        }
        .status-label { color: #7788aa; }
        .status-val { font-weight: bold; }
        .c-green { color: #00ff88; text-shadow: 0 0 8px rgba(0,255,136,0.4); }
        .c-cyan { color: #00d4ff; text-shadow: 0 0 8px rgba(0,212,255,0.3); }
        .c-yellow { color: #ffaa00; }
        .c-purple { color: #a855f7; }

        .panel-stats { top: 350px; left: 20px; width: 270px; }
        .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .stat-box {
            background: rgba(0,212,255,0.04); border: 1px solid rgba(0,212,255,0.08);
            border-radius: 6px; padding: 12px 8px; text-align: center;
        }
        .stat-num { font-size: 22px; font-weight: bold; }
        .stat-lbl { font-size: 10px; color: #5577aa; margin-top: 3px; }

        .panel-arm { top: 80px; right: 20px; width: 270px; }
        .joint-row { margin-bottom: 9px; }
        .joint-header { display: flex; justify-content: space-between; margin-bottom: 3px; }
        .joint-name { font-size: 11.5px; color: #7788aa; }
        .joint-val { font-size: 11.5px; color: #00d4ff; font-family: 'Consolas', monospace; }
        .joint-bar { height: 3px; backgrou.........完整代码请登录后点击上方下载按钮下载查看