3D 创意工具在工业数字孪生中的应用：基于 Three.js 的实时设备热力图渲染

键盘鼓手苏苏

394人浏览 · 2026-09-17 15:25:55

键盘鼓手苏苏 · 2026-09-17 15:25:55 发布

3D 创意工具在工业数字孪生中的应用：基于 Three.js 的实时设备热力图渲染

封面信息图

在现代智慧数据中心（IDC）、智能工厂与云原生硬件机房监控大屏中，“3D 工业设备数字孪生（Industrial Digital Twins）” 是提升可观测性与运维直观度的终极形式。

当物理机房中成百上千台服务器、GPU 机架与变压器正在高负荷运转时：

运维人员希望在浏览器 3D 场景中一眼看清哪一排机架正处于局部过热（Thermal Throttling）、哪台服务器的进风口温度异常偏高；
传统的做法只是在 2D 平面看板上画几个折线图或散点图，缺乏三维空间维度的纵深感与物理设备位置感知。

将 Three.js 3D 场景渲染引擎 与 GPU 自定义热力图着色器（Custom Heatmap Shaders） 结合，通过 反距离加权插值算法（Inverse Distance Weighting, IDW） 实时接收物联网（IoT）传感器上报的温度数据流，我们能够在 3D 模型表面以 60fps 满帧实时动态渲染出平滑渐变、支持物理光影融合的高保真热力场（Thermal Heatmap）。

3D 设备表面实时热力图渲染架构

[机房 IoT 温度传感器网络 (每秒上报各探针温度: {x, y, z, temp})]
                                │
                                ▼ (通过 WebSocket 推入前端)
【反距离加权插值与 Uniform 注入 (IDW Interpolation Engine)】
  - 提取 Top-16 个核心温度热点坐标与摄氏度数值
  - 构造 GPU 结构化 Uniform 数组: `uniform vec3 u_heatPoints[16]` & `uniform float u_heatTemps[16]`
                                │
                                ▼
【Three.js 自定义 GLSL 片元着色器 (Fragment Shader)】
  - 在 GPU 核心并行计算模型表面每个像素点到所有温度探针的欧氏距离
  - 动态计算加权平均温度 $T_{\text{pixel}}$
  - 通过热力色彩映射梯度表 (Color Gradient: 蓝色 20℃ ──> 绿色 45℃ ──> 红色 85℃)
                                │
                                ▼
[屏幕输出: 随实时温度动态流动的 3D 机架物理热力大屏 (60 FPS)]

反距离加权插值（IDW）的数学模型

在三维空间中，对于 3D 模型表面的任意一个渲染像素点 $P = (x, y, z)$，其估算温度 $T(P)$ 由周围 $N$ 个传感器探针点 $S_i = (x_i, y_i, z_i)$ 及其温度值 $T_i$ 共同决定：

$$T(P) = \frac{\sum_{i=1}^N w_i(P) \cdot T_i}{\sum_{i=1}^N w_i(P)}$$

其中权重系数 $w_i(P)$ 与欧氏距离的平方成反比：

$$w_i(P) = \frac{1}{|P - S_i|^2 + \epsilon}$$

核心实现：生产级 Three.js 3D 热力图自定义着色器材质

import * as THREE from 'three';

export interface SensorPoint {
  position: THREE.Vector3;
  temperature: number; // 摄氏度
}

export function create3DHeatmapMaterial(maxSensors = 16): THREE.ShaderMaterial {
  const sensorPositions: THREE.Vector3[] = Array.from(
    { length: maxSensors },
    () => new THREE.Vector3(0, 0, 0)
  );
  const sensorTemperatures = new Float32Array(maxSensors);

  return new THREE.ShaderMaterial({
    uniforms: {
      u_sensorPositions: { value: sensorPositions },
      u_sensorTemperatures: { value: sensorTemperatures },
      u_activeSensorCount: { value: 0 },
      u_minTemp: { value: 20.0 }, // 最低温度对应蓝色 (20℃)
      u_maxTemp: { value: 85.0 }, // 最高温度对应红色 (85℃)
      u_opacity: { value: 0.85 },
    },
    vertexShader: `
      varying vec3 vWorldPosition;
      varying vec3 vNormal;

      void main() {
        vNormal = normalize(normalMatrix * normal);
        // 将顶点坐标转换至世界绝对坐标系
        vec4 worldPos = modelMatrix * vec4(position, 1.0);
        vWorldPosition = worldPos.xyz;
        gl_Position = projectionMatrix * viewMatrix * worldPos;
      }
    `,
    fragmentShader: `
      precision highp float;

      varying vec3 vWorldPosition;
      varying vec3 vNormal;

      uniform vec3 u_sensorPositions[${maxSensors}];
      uniform float u_sensorTemperatures[${maxSensors}];
      uniform int u_activeSensorCount;
      uniform float u_minTemp;
      uniform float u_maxTemp;
      uniform float u_opacity;

      // 热力色彩渐变映射函数 (蓝 ──> 青 ──> 绿 ──> 黄 ──> 红)
      vec3 getHeatmapColor(float t) {
        float normalized = clamp((t - u_minTemp) / (u_maxTemp - u_minTemp), 0.0, 1.0);
        
        vec3 c1 = vec3(0.0, 0.2, 0.8);  // 深蓝 (冷)
        vec3 c2 = vec3(0.0, 0.8, 0.8);  // 青色
        vec3 c3 = vec3(0.2, 0.9, 0.2);  // 绿色 (正常)
        vec3 c4 = vec3(0.9, 0.9, 0.0);  // 黄色 (警告)
        vec3 c5 = vec3(1.0, 0.1, 0.1);  // 红色 (过热危险)

        if (normalized < 0.25) return mix(c1, c2, normalized * 4.0);
        if (normalized < 0.50) return mix(c2, c3, (normalized - 0.25) * 4.0);
        if (normalized < 0.75) return mix(c3, c4, (normalized - 0.50) * 4.0);
        return mix(c4, c5, (normalized - 0.75) * 4.0);
      }

      void main() {
        if (u_activeSensorCount == 0) {
          gl_FragColor = vec4(0.2, 0.2, 0.25, u_opacity);
          return;
        }

        float totalWeight = 0.0;
        float weightedTempSum = 0.0;

        // 在 GPU 核心并行计算 IDW 反距离加权插值
        for (int i = 0; i < ${maxSensors}; i++) {
          if (i >= u_activeSensorCount) break;

          float dist = distance(vWorldPosition, u_sensorPositions[i]);
          // 距离加权衰减 (加 0.05 避免除以 0 奇异点)
          float weight = 1.0 / (pow(dist, 2.0) + 0.05);

          totalWeight += weight;
          weightedTempSum += weight * u_sensorTemperatures[i];
        }

        float finalTemp = weightedTempSum / max(totalWeight, 0.0001);
        vec3 heatColor = getHeatmapColor(finalTemp);

        // 叠加简单的漫反射光照，增强 3D 立体感
        vec3 lightDir = normalize(vec3(1.0, 1.5, 1.0));
        float diff = max(dot(vNormal, lightDir), 0.3);

        gl_FragColor = vec4(heatColor * diff, u_opacity);
      }
    `,
    transparent: true,
    side: THREE.DoubleSide,
  });
}

前端 React 3D 机房实时监控组件

import React, { useEffect, useRef } from 'react';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { create3DHeatmapMaterial, SensorPoint } from './heatmapMaterial';

export const ServerRack3DHeatmap: React.FC = () => {
  const mountRef = useRef<HTMLDivElement>(null);
  const materialRef = useRef<THREE.ShaderMaterial | null>(null);

  useEffect(() => {
    const container = mountRef.current;
    if (!container) return;

    // 1. 初始化 Scene, Camera, Renderer
    const scene = new THREE.Scene();
    scene.background = new THREE.Color('#030712');

    const camera = new THREE.PerspectiveCamera(60, container.clientWidth / container.clientHeight, 0.1, 100);
    camera.position.set(2.5, 3.0, 4.0);

    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(container.clientWidth, container.clientHeight);
    container.appendChild(renderer.domElement);

    const controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;

    // 2. 创建 3D 服务器机柜模型 (用复合立方体网格模拟)
    const rackGeometry = new THREE.BoxGeometry(1.2, 2.4, 1.0, 32, 32, 32); // 细分顶点以获得丝滑热力渐变
    const heatmapMat = create3DHeatmapMaterial(8);
    materialRef.current = heatmapMat;

    const rackMesh = new THREE.Mesh(rackGeometry, heatmapMat);
    scene.add(rackMesh);

    // 3. 模拟 WebSocket 实时推入 IoT 传感器温度数据流
    const updateSensors = () => {
      if (!materialRef.current) return;
      const uniforms = materialRef.current.uniforms;

      // 模拟 4 个不同高度的温度探针
      const t = Date.now() * 0.002;
      const sensors: SensorPoint[] = [
        { position: new THREE.Vector3(0, 0.8, 0.4), temperature: 68 + Math.sin(t) * 12 }, // 顶部 GPU 过热区 (80℃)
        { position: new THREE.Vector3(0, 0.0, 0.4), temperature: 42 + Math.cos(t) * 5 },  // 中部 CPU 区 (42℃)
        { position: new THREE.Vector3(0, -0.8, 0.4), temperature: 28 },                   // 底部进风口 (28℃ 正常)
      ];

      uniforms.u_activeSensorCount.value = sensors.length;
      sensors.forEach((s, idx) => {
        uniforms.u_sensorPositions.value[idx].copy(s.position);
        uniforms.u_sensorTemperatures.value[idx] = s.temperature;
      });
    };

    let animId: number;
    const animate = () => {
      animId = requestAnimationFrame(animate);
      updateSensors();
      controls.update();
      renderer.render(scene, camera);
    };

    animate();

    return () => {
      cancelAnimationFrame(animId);
      renderer.dispose();
      container.innerHTML = '';
    };
  }, []);

  return (
    <div className="relative w-full h-[550px] bg-slate-950 rounded-3xl overflow-hidden border border-slate-800 shadow-2xl">
      <div ref={mountRef} className="w-full h-full" />
      <div className="absolute top-4 left-6 p-4 bg-slate-900/80 backdrop-blur-md rounded-2xl border border-slate-700 text-xs font-mono text-cyan-300 pointer-events-none">
        <p className="font-bold text-sm text-white">🔥 GPU 机架 3D 实时热力场数字孪生</p>
        <p className="mt-1">● 空间算法: IDW 逆距离加权着色器</p>
        <p>● 渲染帧率: 60 FPS (硬件光栅化)</p>
        <div className="mt-3 flex items-center gap-2">
          <div className="w-32 h-2.5 rounded-full bg-gradient-to-r from-blue-600 via-green-500 via-yellow-400 to-red-600" />
          <span className="text-[10px] text-slate-400">20℃ ~ 85℃</span>
        </div>
      </div>
    </div>
  );
};