简介《ThreeJS实现3D可视化机房》是一套面向Web前端与Three.js学习者的交互式3D项目源码借助WebGL在浏览器中还原机房场景支持第一人称漫游与设备布局查看可用于学习三维渲染、后期效果合成和基础交互设计。压缩包共176个文件约8.54MB以JavaScript模块与脚本为主配合PNG、JPG贴图、GLTF/FBX/3DS模型、HTML页面及Markdown说明文档覆盖场景资源、代码组织和项目说明等部分。已有6031人学习下载。项目重点展示EffectComposer辉光合成、抗锯齿开启及MaskPass遮罩等效果并保留新旧版本结构便于读者对照理解模块化与非模块化写法从中掌握Three.js场景搭建、渲染优化与后期处理的实践思路。1. 从一张机房平面图到 3D 可视化先想清楚三件事机房里两百个机柜运维盯着一张大屏上的红绿方块谁也说不清 A 区第 7 排靠里那台到底热不热。用 ThreeJS 把机房搬进浏览器做成 3D 可视化是这几年 Web 开发里很常见的一类需求也是这份 JS/Ajax 源代码包要落地的事。它不追求影视级渲染目标很明确机柜的位置、朝向、运行状态和告警要在同一个视图里说得清鼠标点得中接口换数据时画面跟得上。适合谁做后台管理系统、需要把机房/设备间/仓储这类空间数据可视化的前端手上有 Three.js 基础但一到批量物体就卡的人以及拿到一份 3D 场景源代码、想弄清它为什么这么组织的人。动手前先定三件事后面所有代码都围着它们转坐标单位用什么、机柜是逐个 Mesh 还是实例化、状态数据走轮询还是推送。这三件事想岔了写到一半推倒重来是常事。2. 场景骨架与坐标约定为什么我坚持 1 单位 1 米场景骨架看着简单真正翻车的地方往往在初始化之后容器一变尺寸画面就糊、相机拉远模型开始闪烁、金属机柜黑成一块。这一章把渲染器、相机、坐标系和光照按顺序钉死后面建模才有稳定的地基。2.1 渲染器、相机与 resize 的最小闭环先看一段可以直接跑起来的最小闭环。注意这里用ResizeObserver而不是window.resize因为机房大屏经常嵌在带侧边栏的布局里容器尺寸变了但窗口没变监听 window 是收不到事件的。import * as THREE from three; import { OrbitControls } from three/addons/controls/OrbitControls.js; const container document.getElementById(scene); const renderer new THREE.WebGLRenderer({ antialias: true, powerPreference: high-performance, alpha: false, }); // 高 DPI 屏幕上不限制 dpr像素量直接翻 4 倍 renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); renderer.setSize(container.clientWidth, container.clientHeight); renderer.outputColorSpace THREE.SRGBColorSpace; // r152老版本是 outputEncoding renderer.toneMapping THREE.ACESFilmicToneMapping; renderer.toneMappingExposure 1.15; container.appendChild(renderer.domElement); const scene new THREE.Scene(); scene.background new THREE.Color(0x0a1018); scene.fog new THREE.Fog(0x0a1018, 40, 120); // 远处淡出省得画边界 const camera new THREE.PerspectiveCamera( 45, container.clientWidth / container.clientHeight, 0.1, 300 // far 不要盲目给 5000 ); camera.position.set(18, 16, 24); const controls new OrbitControls(camera, renderer.domElement); controls.enableDamping true; controls.dampingFactor 0.08; controls.maxPolarAngle Math.PI / 2 - 0.05; // 不让相机钻到地板下面 controls.minDistance 6; controls.maxDistance 90; controls.target.set(0, 1.2, 0); const resize () { const w container.clientWidth; const h container.clientHeight; if (w 0 || h 0) return; // 隐藏的 tab 里宽高是 0会报错 camera.aspect w / h; camera.updateProjectionMatrix(); renderer.setSize(w, h); }; new ResizeObserver(resize).observe(container);几个参数的含义值得单独说。setPixelRatio上限卡在 2是因为 3 倍屏上像素量是 1 倍屏的 9 倍而 3D 可视化机房的画面细节根本不值得这个代价。far给 300 而不是更大是因为深度缓冲精度随 near/far 比值恶化比值超过 1e5 之后远处的机柜边缘就会出现那种一闪一闪的 z-fighting。maxPolarAngle少给 0.05 弧度是为了防止相机贴地时地板和机柜底面共面产生的花屏。tonemapping和outputColorSpace这两行不是可选项。默认不设的情况下你从设计稿里取的十六进制色值渲染出来会偏亮偏灰很多人以为是材质问题其实卡在色彩空间这一步。2.2 坐标系先钉死再谈建模坐标单位这件事我踩过一次很难受的坑。最早图省事按「1 单位 10 厘米」建一个 600mm 宽的机柜就是 6 单位24 米机房是 240 单位。跑起来才发现两个问题一是相机 far 得给到 800深度精度直线下降二是从后端拿到的坐标是米制小数每次都要乘 10四舍五入误差累积后相邻机柜之间的 3 毫米缝隙时有时无。后来统一成 1 单位 1 米数值全落在 0.1 到 100 这个区间浮点精度绰绰有余。具体约定我一般写成常量文件团队里谁建模都按这个来export const UNIT 1; // 1 单位 1 米 export const CABINET { w: 0.6, // 600mm 标准机柜宽 d: 1.2, // 1200mm 深 h: 2.0, // 2000mm 高42U 常见高度 gapX: 0.12, // 同排机柜间距 rowGapZ: 1.4, // 冷热通道间距 }; export const ROOM { w: 24, d: 16, h: 3.2 };原点放在机房中心的地面Y 轴向上机柜正面统一朝 Z。这条「正面朝 Z」的约定看着不起眼但它决定了你后面贴门板、挂状态指示灯、算相机默认视角时不用每次重新推导旋转角度。机柜朝向只允许 0、90、180、270 四个值用rotation.y直接给弧度不做任意角度机房场景里没这个需求反而会让拾取和标签定位复杂一圈。还有一处容易忽略的机柜几何体的原点。BoxGeometry默认原点在几何中心摆到场景里得手动加半个高度。我习惯在造几何体时就translate到底面中心这样position.y 0就是落地写循环时干净很多。2.3 光照配置三盏灯加一张环境贴图别急着开阴影金属质感的机柜在只有环境光时会黑成一片在只有平行光时又会死板得像纸片。我的固定搭配是半球光打底、平行光定方向、环境贴图负责反射。import { RoomEnvironment } from three/addons/environments/RoomEnvironment.js; // 环境贴图让 metalness 有东西可反射 const pmrem new THREE.PMREMGenerator(renderer); scene.environment pmrem.fromScene(new RoomEnvironment(), 0.04).texture; const hemi new THREE.HemisphereLight(0x93b7ff, 0x1a2230, 0.85); scene.add(hemi); const key new THREE.DirectionalLight(0xffffff, 1.6); key.position.set(12, 20, 10); key.castShadow false; // 先关理由见下 scene.add(key); const fill new THREE.DirectionalLight(0x6f8cff, 0.5); fill.position.set(-14, 8, -12); scene.add(fill);RoomEnvironment是 Three.js 自带的程序化室内环境不用下载 HDR 文件生成一次大概几十毫秒很适合机房这种封闭空间。生成的纹理用完记得pmrem.dispose()否则切换页面时会漏一块显存。阴影为什么建议先关两百个机柜如果每个都投影阴影贴图要么分辨率不够全是锯齿要么开到 4096 后每帧多一次全场景深度渲染中端笔记本直接从 60 帧掉到 25 帧。机房场景里机柜之间的空间关系靠地板网格线和走线槽就能表达清楚。真想要接触阴影用一个带径向渐变 CanvasTexture 的平面贴在每个机柜底部成本几乎为零。3. 机柜建模与实例化200 台机柜压到 3 个 draw call 的做法逐个new THREE.Mesh摆两百个机柜是这类项目最常见的性能分水岭。两百个 Mesh 意味着两百次 draw call 加两百次矩阵更新在集显机器上转个视角就能感觉到粘手。这一章从单台机柜的几何封装讲到 InstancedMesh 的逐实例着色把主体压到一次绘制。3.1 把单台机柜封装成参数化几何体先写几何体工厂。这里有两个刻意的选择分段数全部保持 1因为机柜是纯方块多一段都是浪费几何体原点平移到底面中心方便按行列摆放。import * as THREE from three; import { CABINET } from ./constants.js; export function createCabinetGeometry({ w, d, h }) { const geo new THREE.BoxGeometry(w, h, d, 1, 1, 1); // 原点移到底面中心position.y 0 即落地 geo.translate(0, h / 2, 0); geo.computeBoundingSphere(); return geo; } // 正面门板一块贴在机柜前脸外 1cm 的薄片 export function createDoorGeometry({ w, d, h }) { const thickness 0.02; const geo new THREE.BoxGeometry(w * 0.92, h * 0.94, thickness); geo.translate(0, h / 2, d / 2 thickness / 2); return geo; }门板单独做一层几何体不是为了好看是为了给状态色留一个独立的着色通道。机柜主体用深灰金属材质门板用带自发光的状态色两者分开后改状态只动门板这一层主体材质永远是共享的同一份省内存也省编译。材质方面MeshStandardMaterial的metalness给 0.35、roughness给 0.55 是个比较稳的区间。metalness 拉到 1 会强烈依赖环境贴图一旦环境贴图没生成成功就是纯黑给 0 又完全没有金属感看着像塑料收纳箱。const bodyMaterial new THREE.MeshStandardMaterial({ color: 0x2b3444, metalness: 0.35, roughness: 0.55, }); const doorMaterial new THREE.MeshStandardMaterial({ color: 0xffffff, // 必须白色否则实例色会被相乘变暗 metalness: 0.1, roughness: 0.4, emissive: 0x000000, });doorMaterial.color必须是纯白这是 InstancedMesh 逐实例着色的硬性前提最终颜色等于material.color × instanceColor。如果这里给了个灰蓝色所有告警红都会被压成暗红调色调半天调不出来。3.2 InstancedMesh 批量摆放与逐实例着色摆放逻辑用两层循环生成矩阵一次性写进instanceMatrix。关键是最后两行的包围球计算和needsUpdate这是最容易漏的地方。import { createCabinetGeometry, createDoorGeometry } from ./geometry.js; import { CABINET, ROOM } from ./constants.js; const ROWS 8; const COLS 25; const COUNT ROWS * COLS; // ---- 主体 ---- const bodyGeo createCabinetGeometry(CABINET); const bodyMesh new THREE.InstancedMesh(bodyGeo, bodyMaterial, COUNT); bodyMesh.instanceMatrix.setUsage(THREE.StaticDrawUsage); // ---- 门板状态色层---- const doorGeo createDoorGeometry(CABINET); const doorMesh new THREE.InstancedMesh(doorGeo, doorMaterial, COUNT); doorMesh.instanceMatrix.setUsage(THREE.StaticDrawUsage); const dummy new THREE.Object3D(); const tmpColor new THREE.Color(); const totalW COLS * CABINET.w (COLS - 1) * CABINET.gapX; const totalD ROWS * CABINET.d (ROWS - 1) * CABINET.rowGapZ; const startX -totalW / 2 CABINET.w / 2; const startZ -totalD / 2 CABINET.d / 2; let i 0; for (let r 0; r ROWS; r) { for (let c 0; c COLS; c) { dummy.position.set( startX c * (CABINET.w CABINET.gapX), 0, startZ r * (CABINET.d CABINET.rowGapZ) ); dummy.rotation.set(0, 0, 0); // 统一朝 Z dummy.scale.set(1, 1, 1); dummy.updateMatrix(); bodyMesh.setMatrixAt(i, dummy.matrix); doorMesh.setMatrixAt(i, dummy.matrix); // 初始化实例色必须在第一帧渲染前完成 bodyMesh.setColorAt(i, tmpColor.setHex(0x2b3444)); doorMesh.setColorAt(i, tmpColor.setHex(0x3ddc97)); i; } } bodyMesh.instanceMatrix.needsUpdate true; doorMesh.instanceMatrix.needsUpdate true; bodyMesh.instanceColor.needsUpdate true; doorMesh.instanceColor.needsUpdate true; // 关键InstancedMesh 的包围球默认按单个几何体算不重算会被错误剔除 bodyMesh.computeBoundingSphere(); doorMesh.computeBoundingSphere(); scene.add(bodyMesh, doorMesh);几个点展开说。StaticDrawUsage是告诉 GPU 这个矩阵缓冲区不会每帧改驱动可以放到显存里优化如果后面有动画要每帧改矩阵就换成DynamicDrawUsage。setColorAt的调用时机有讲究。它在第一次调用时会自动创建instanceColor属性但如果材质已经编译过比如画面已经渲染了一帧新加的属性不会自动进入着色器表现为「颜色设置了但画面没变」。所以初始化着色一定放在scene.add之前或者改完之后补一句doorMaterial.needsUpdate true。computeBoundingSphere()是血泪经验。InstancedMesh 继承自 Mesh它的boundingSphere默认由单个几何体决定也就是一个 0.6×2×1.2 的球。相机转到某个角度这个小球跑出视锥整批两百个机柜会被一起剔除掉画面瞬间空掉——很多人第一次遇到会以为是自己矩阵算错了。要么重算包围球要么直接frustumCulled false前者更省性能。这样一算机柜主体 1 次 draw call门板 1 次地板 1 次总共 3 次跟机柜数量无关。3.3 地板、走线槽与墙体用纹理和薄片换面数地板不要用几十段细分的网格去画格线一个PlaneGeometry配一张程序化生成的CanvasTexture就够了。function createFloorTexture(size 512) { const canvas document.createElement(canvas); canvas.width canvas.height size; const ctx canvas.getContext(2d); ctx.fillStyle #11161f; ctx.fillRect(0, 0, size, size); ctx.strokeStyle #1e2836; ctx.lineWidth 4; ctx.strokeRect(0, 0, size, size); // 铺开后就是 600mm 地砖格 const tex new THREE.CanvasTexture(canvas); tex.wrapS tex.wrapT THREE.RepeatWrapping; tex.repeat.set(ROOM.w / 0.6, ROOM.d / 0.6); tex.colorSpace THREE.SRGBColorSpace; // 纹理也要声明色彩空间 tex.anisotropy renderer.capabilities.getMaxAnisotropy(); return tex; } const floorGeo new THREE.PlaneGeometry(ROOM.w, ROOM.d); const floorMat new THREE.MeshStandardMaterial({ map: createFloorTexture(), metalness: 0.1, roughness: 0.9, }); const floor new THREE.Mesh(floorGeo, floorMat); floor.rotation.x -Math.PI / 2; scene.add(floor);anisotropy这一行决定了斜视角下地板格线糊不糊开到硬件上限代价很小。走线槽用细长的BoxGeometry合并成一个几何体比逐个添加省得多import { mergeGeometries } from three/addons/utils/BufferGeometryUtils.js; function createCableTrays(rows, rowGapZ, roomW) { const parts []; for (let r 0; r rows - 1; r) { const g new THREE.BoxGeometry(roomW * 0.9, 0.08, 0.25); g.translate(0, 0.04, (r 0.5) * rowGapZ - (rows * rowGapZ) / 2 0.7); parts.push(g); } return mergeGeometries(parts, false); }墙体我一般只做两面而且用transparent: true加低透明度或者干脆用LineSegments描个边。四面实墙会把相机挡在外面转个视角全是墙还得额外写相机碰撞——机房可视化里没人真的关心墙长什么样。4. 数据驱动与交互温度、负载、告警怎么落到颜色和点击上模型摆好只是静态场景。真正让它变成「可视化」的是每个机柜背后那一条状态数据。这一章讲阈值映射、差分更新和拾取标签三件事都是接上真实接口后绕不开的。4.1 状态字典与阈值映射不要在前端散着写if (temp 32)这种判断阈值一旦要改就是满项目找。我习惯把它抽成一张表顺便给每种状态配好颜色和文案状态码触发条件门板色说明normal在线且温度 28 且负载 70#3ddc97正常运行warning温度 2832 或负载 7085#ffc857需要关注danger温度 ≥ 32 或负载 ≥ 85#ff5a5f触发告警offline心跳超时#5a6472设备离线不参与阈值判断export const STATUS { normal: { color: 0x3ddc97, level: 0 }, warning: { color: 0xffc857, level: 1 }, danger: { color: 0xff5a5f, level: 2 }, offline: { color: 0x5a6472, level: 3 }, }; export function resolveStatus(m) { if (!m.online) return offline; if (m.temp 32 || m.load 85) return danger; if (m.temp 28 || m.load 70) return warning; return normal; }离线判断要放在最前面。这是实际运维里很常见的一个需求场景设备断电后温度上报的是最后一次的缓存值如果先判温度一台已经掉线的过热机器会一直显示红色告警值班的人会一直去查一台已经关机的设备。颜色用THREE.Color直接设置即可r152 之后setHex默认按 sRGB 解释再转线性跟 CSS 色值能对上。如果要做预警到告警的平滑过渡可以用lerpColorsconst cA new THREE.Color(0xffc857); const cB new THREE.Color(0xff5a5f); const mixed new THREE.Color().lerpColors(cA, cB, t); // t ∈ [0,1]不过说实话机柜状态这种离散分级直接跳变更符合运维直觉渐变反而让人犹豫「这到底是黄还是红」。4.2 差分更新只改变化的那几个实例数据每秒刷新一次两百个机柜里可能只有三五个状态变了。每次都全量重设一遍instanceColor再标脏等于每秒上传 2400 个浮点数还要重算一遍颜色对象纯属浪费。const CODE { normal: 0, warning: 1, danger: 2, offline: 3 }; const prev new Uint8Array(COUNT).fill(255); // 255 表示尚未初始化 const colorCache { 0: new THREE.Color(STATUS.normal.color), 1: new THREE.Color(STATUS.warning.color), 2: new THREE.Color(STATUS.danger.color), 3: new THREE.Color(STATUS.offline.color), }; let colorDirty false; function applyStatus(index, statusName) { const code CODE[statusName]; if (prev[index] code) return; // 没变就跳过 prev[index] code; doorMesh.setColorAt(index, colorCache[code]); colorDirty true; } function flushColors() { if (!colorDirty) return; doorMesh.instanceColor.needsUpdate true; colorDirty false; }colorCache预建四个Color实例避免在循环里反复new。prev用Uint8Array而不是普通数组两百个元素时差别不大但如果机房规模上到两千个类型数组的遍历速度优势就出来了。数据拉取部分轮询和 WebSocket 两种都常见async function poll() { try { const res await fetch(/api/room/cabinets, { cache: no-store }); if (!res.ok) throw new Error(HTTP ${res.status}); const list await res.json(); list.forEach((item, idx) { if (idx COUNT) return; // 防止后端多返回越界 applyStatus(idx, resolveStatus(item)); // 顺带更新悬浮卡片需要的数据 meta[idx] item; }); flushColors(); } catch (err) { console.warn([poll] 拉取失败保留上一帧状态, err); } finally { setTimeout(poll, 5000); } } poll();cache: no-store一定要加否则某些浏览器会拿 304 缓存画面看着在转但数据永远是旧的。请求失败时保留上一帧状态而不是清空也是实际经验网络抖一下整个机房变灰值班的人会以为全挂了。4.3 Raycaster 拾取与 CSS2D 标签的密度控制点击拾取这块InstancedMesh的intersectObject会返回instanceId拿它去查meta就能出详情。const raycaster new THREE.Raycaster(); const pointer new THREE.Vector2(); let downPos null; renderer.domElement.addEventListener(pointerdown, (e) { downPos { x: e.clientX, y: e.clientY }; }); renderer.domElement.addEventListener(pointerup, (e) { if (!downPos) return; const moved Math.hypot(e.clientX - downPos.x, e.clientY - downPos.y); downPos null; if (moved 5) return; // 拖动旋转不算点击 const rect renderer.domElement.getBoundingClientRect(); pointer.x ((e.clientX - rect.left) / rect.width) * 2 - 1; pointer.y -((e.clientY - rect.top) / rect.height) * 2 1; raycaster.setFromCamera(pointer, camera); const hit raycaster.intersectObject(doorMesh, false)[0]; if (hit) openPanel(hit.instanceId); });位移阈值 5 像素那条判断不能省。OrbitControls的旋转同样会触发pointerdown和pointerup不加阈值的话每次转完视角都会顺手弹出一个详情面板体验极差。这是我自己在手机上试出来的——手指滑动总是有几像素抖动。标签用CSS2DRenderer好处是能用普通 HTML 写样式和绑定事件字体渲染也比 Sprite 清晰。import { CSS2DRenderer, CSS2DObject } from three/addons/renderers/CSS2DRenderer.js; const labelRenderer new CSS2DRenderer(); labelRenderer.setSize(container.clientWidth, container.clientHeight); labelRenderer.domElement.style.position absolute; labelRenderer.domElement.style.top 0; labelRenderer.domElement.style.left 0; labelRenderer.domElement.style.pointerEvents none; // 不挡住鼠标拾取 container.appendChild(labelRenderer.domElement);标签的密度是这类项目的隐形杀手。两百个机柜每个挂一个 DOM 节点浏览器光排版就要掉十几帧。我的做法是只给三类机柜挂标签告警中的、当前鼠标悬停的、当前选中的。const labelPool new Map(); // instanceId - CSS2DObject function ensureLabel(instanceId, text, cls) { let obj labelPool.get(instanceId); if (!obj) { const el document.createElement(div); el.className scene-label ${cls}; obj new CSS2DObject(el); const pos new THREE.Vector3(); doorMesh.getMatrixAt(instanceId, dummy.matrix); dummy.matrix.decompose(pos, new THREE.Quaternion(), new THREE.Vector3()); obj.position.set(pos.x, CABINET.h 0.3, pos.z); labelPool.set(instanceId, obj); scene.add(obj); } obj.element.textContent text; return obj; }pointerEvents: none加在容器上、单个标签再设pointerEvents: auto这样标签能点但不会挡住场景拾取。标签的增删要跟着状态走从告警恢复正常的机柜scene.remove之后还要把CSS2DObject从labelPool里删掉不然这个 Map 会越滚越大。5. 上线前排查5 个把我卡了半天的坑这一章把我在不同项目里反复撞到的五个问题列出来每条都按「现象 → 原因 → 解决」写。它们大多不会报错只是画面不对或者越跑越慢靠自己盯着代码找非常费时间。5.1 五个高频翻车现场第一条相机一转机柜成片消失。现象是画面初始正常把相机拉远或者转到某个角度整批机柜毫无征兆地不见了转回来又出现。原因是InstancedMesh的视锥剔除用的是单几何体的包围球一个 0.6 米宽的机柜球体显然覆盖不了 24 米长的机房相机稍一移动它就判定「不在视野内」一次剔除全部实例。解决有两步摆完矩阵后调用mesh.computeBoundingSphere()重算如果矩阵后续还会变就在每次修改后重算或者临时设mesh.frustumCulled false。后者简单但有代价——所有实例永远参与渲染管线规模上千时能测出差别。第二条状态色改了画面纹丝不动。现象是控制台里instanceColor的值确实是红的画面上门板还是绿的。原因通常有三个。一是材质color不是纯白实例色被相乘压暗看着像没生效。二是instanceColor在材质编译之后才创建着色器里没开启对应宏。三是改完setColorAt忘了instanceColor.needsUpdate true。解决材质color固定在0xffffff所有setColorAt初始化放在第一次render之前改色后统一在下一次渲染前标脏并补一句doorMaterial.needsUpdate true强制重编译一次。最省事的排查方式是临时把材质换成MeshBasicMaterial如果颜色出来了说明问题在光照或色彩空间不在实例色。第三条点击机柜没反应或者点哪都弹出同一个。现象是点击后详情面板内容永远是第一个机柜的数据。原因之一是射线检测传了recursive true却传了InstancedMesh本身实例化对象的intersectObject不支持递归子对象返回的是空的或错位的。原因之二是getBoundingClientRect用了window坐标而不是 canvas 的页面有滚动条或者容器带偏移时归一化坐标整体偏了。解决intersectObject(doorMesh, false)第二参数固定false坐标计算严格用renderer.domElement.getBoundingClientRect()顺手加一句raycaster.far 200限制检测距离减少无谓计算。第四条页面停留两分钟后风扇狂转内存一路涨。现象是刚打开很流畅切了几次视角、开关几次详情面板之后开始掉帧任务管理器里内存持续增长不回落。原因基本是资源没释放每次打开面板都new一个CSS2DObject却从不remove事件监听挂在window上没解绑ResizeObserver没disconnect切换数据源时旧的环境贴图没dispose。解决给所有动态创建的 DOM 和 3D 对象配一个destroy()renderer.info.memory里的geometries和textures数量应该是稳定的如果每次操作都涨就一定漏了。我在组件卸载时固定走一遍清单移除全部CSS2DObject、controls.dispose()、resizeObserver.disconnect()、遍历scene释放几何体和材质、renderer.dispose()。第五条金属机柜黑成一块或者亮得发白。现象是机柜正面完全没有细节或者环境贴图加载后整片过曝。原因是metalness给到了 0.9 以上但scene.environment没设置金属材质在没有环境反射时只能反射黑色反过来环境贴图生成了但toneMappingExposure还是默认的 1配上强平行光就一片死白。解决metalness控制在 0.30.5scene.environment用RoomEnvironment生成toneMapping开ACESFilmicexposure从 1.0 开始微调每次只动 0.05。还有一个容易误判的情况环境贴图生成了但没在添加物体之前赋值材质的envMap就没绑上看着像是环境光没起作用。5.2 排查顺序从控制台到 GPU遇到「画面不对」时我的固定顺序是先看renderer.info.render再看材质最后才怀疑几何体。calls数量跟机柜数量同比例增长说明该实例化的没实例化triangles异常大说明某个几何体的分段数给多了geometries和textures随时间上涨就是泄漏。材质问题最快的验证方式是把MeshStandardMaterial换成MeshBasicMaterial。基础材质不参与光照计算如果在它下面颜色和形状都正常问题一定出在光照、环境贴图或色彩空间三选一不用去翻矩阵代码。几何体问题则用scene.overrideMaterial new THREE.MeshNormalMaterial()一眼看出来。法线材质会把每个面染成不同颜色朝向错了、面片翻转了、位置重叠了都无所遁形。这两招在排查 3D 可视化机房这类场景时比逐行读代码快得多。6. 帧率与内存的验证方法把「感觉不卡」变成数字「在我机器上挺流畅的」这句话在验收会上没有任何说服力。上线前我一般会插一段轻量的采样器把帧率、draw call、三角形数和显存占用打成一组数字跟验收方一起看。const stats { fps: 0, calls: 0, tris: 0, geo: 0, tex: 0 }; let frames 0; let lastTick performance.now(); function sample() { frames; const now performance.now(); if (now - lastTick 1000) { stats.fps Math.round((frames * 1000) / (now - lastTick)); stats.calls renderer.info.render.calls; stats.tris renderer.info.render.triangles; stats.geo renderer.info.memory.geometries; stats.tex renderer.info.memory.textures; document.getElementById(stat).textContent FPS ${stats.fps} | CALL ${stats.calls} | TRI ${stats.tris} | GEO ${stats.geo} | TEX ${stats.tex}; frames 0; lastTick now; } } function animate() { requestAnimationFrame(animate); controls.update(); renderer.render(scene, camera); labelRenderer.render(scene, camera); sample(); } animate();看这几个数怎么判断calls稳定在个位数说明实例化生效了tris在两万以内对一个机房场景是健康的geo和tex在任何交互之后都不应该有净增长。帧率掉到 40 以下时按下面的顺序降级改一项测一次降级项改动预期收益代价像素比setPixelRatio(1)高 DPI 屏帧率提升接近 2 倍边缘略糊抗锯齿antialias: false中低端设备提升 15%30%斜边有锯齿标签数量只保留告警 选中DOM 排版开销大幅下降信息密度降低环境贴图换成固定色scene.environment null省一次 PMREM 生成和采样金属感变弱雾效缩短fog.far远处物体提前剔除视野边界感变强真正需要保底的是像素比和标签数这两项它们的效果最直接视觉代价也最容易接受。抗锯齿关了之后可以在后处理里补一个便宜的 FXAA但我一般懒得加机房场景以方块为主锯齿不明显。从那以后我每次交付这类项目都会在验收前把这段采样器打开跑一轮完整操作路径初始视角、拉远、转一圈、连续点十个机柜、切一次数据源全程录下这五个数的变化。只要geo和tex是一条平线帧率没跌破 40我就敢让对方自己去点。这套动作现在成了我的固定习惯省下的扯皮时间远比写这段代码多。希望帮到你。本文还有配套的精品资源点击获取
简介《ThreeJS实现3D可视化机房》是一套面向Web前端与Three.js学习者的交互式3D项目源码借助WebGL在浏览器中还原机房场景支持第一人称漫游与设备布局查看可用于学习三维渲染、后期效果合成和基础交互设计。压缩包共176个文件约8.54MB以JavaScript模块与脚本为主配合PNG、JPG贴图、GLTF/FBX/3DS模型、HTML页面及Markdown说明文档覆盖场景资源、代码组织和项目说明等部分。已有6031人学习下载。项目重点展示EffectComposer辉光合成、抗锯齿开启及MaskPass遮罩等效果并保留新旧版本结构便于读者对照理解模块化与非模块化写法从中掌握Three.js场景搭建、渲染优化与后期处理的实践思路。1. 从一张机房平面图到 3D 可视化先想清楚三件事机房里两百个机柜运维盯着一张大屏上的红绿方块谁也说不清 A 区第 7 排靠里那台到底热不热。用 ThreeJS 把机房搬进浏览器做成 3D 可视化是这几年 Web 开发里很常见的一类需求也是这份 JS/Ajax 源代码包要落地的事。它不追求影视级渲染目标很明确机柜的位置、朝向、运行状态和告警要在同一个视图里说得清鼠标点得中接口换数据时画面跟得上。适合谁做后台管理系统、需要把机房/设备间/仓储这类空间数据可视化的前端手上有 Three.js 基础但一到批量物体就卡的人以及拿到一份 3D 场景源代码、想弄清它为什么这么组织的人。动手前先定三件事后面所有代码都围着它们转坐标单位用什么、机柜是逐个 Mesh 还是实例化、状态数据走轮询还是推送。这三件事想岔了写到一半推倒重来是常事。2. 场景骨架与坐标约定为什么我坚持 1 单位 1 米场景骨架看着简单真正翻车的地方往往在初始化之后容器一变尺寸画面就糊、相机拉远模型开始闪烁、金属机柜黑成一块。这一章把渲染器、相机、坐标系和光照按顺序钉死后面建模才有稳定的地基。2.1 渲染器、相机与 resize 的最小闭环先看一段可以直接跑起来的最小闭环。注意这里用ResizeObserver而不是window.resize因为机房大屏经常嵌在带侧边栏的布局里容器尺寸变了但窗口没变监听 window 是收不到事件的。import * as THREE from three; import { OrbitControls } from three/addons/controls/OrbitControls.js; const container document.getElementById(scene); const renderer new THREE.WebGLRenderer({ antialias: true, powerPreference: high-performance, alpha: false, }); // 高 DPI 屏幕上不限制 dpr像素量直接翻 4 倍 renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); renderer.setSize(container.clientWidth, container.clientHeight); renderer.outputColorSpace THREE.SRGBColorSpace; // r152老版本是 outputEncoding renderer.toneMapping THREE.ACESFilmicToneMapping; renderer.toneMappingExposure 1.15; container.appendChild(renderer.domElement); const scene new THREE.Scene(); scene.background new THREE.Color(0x0a1018); scene.fog new THREE.Fog(0x0a1018, 40, 120); // 远处淡出省得画边界 const camera new THREE.PerspectiveCamera( 45, container.clientWidth / container.clientHeight, 0.1, 300 // far 不要盲目给 5000 ); camera.position.set(18, 16, 24); const controls new OrbitControls(camera, renderer.domElement); controls.enableDamping true; controls.dampingFactor 0.08; controls.maxPolarAngle Math.PI / 2 - 0.05; // 不让相机钻到地板下面 controls.minDistance 6; controls.maxDistance 90; controls.target.set(0, 1.2, 0); const resize () { const w container.clientWidth; const h container.clientHeight; if (w 0 || h 0) return; // 隐藏的 tab 里宽高是 0会报错 camera.aspect w / h; camera.updateProjectionMatrix(); renderer.setSize(w, h); }; new ResizeObserver(resize).observe(container);几个参数的含义值得单独说。setPixelRatio上限卡在 2是因为 3 倍屏上像素量是 1 倍屏的 9 倍而 3D 可视化机房的画面细节根本不值得这个代价。far给 300 而不是更大是因为深度缓冲精度随 near/far 比值恶化比值超过 1e5 之后远处的机柜边缘就会出现那种一闪一闪的 z-fighting。maxPolarAngle少给 0.05 弧度是为了防止相机贴地时地板和机柜底面共面产生的花屏。tonemapping和outputColorSpace这两行不是可选项。默认不设的情况下你从设计稿里取的十六进制色值渲染出来会偏亮偏灰很多人以为是材质问题其实卡在色彩空间这一步。2.2 坐标系先钉死再谈建模坐标单位这件事我踩过一次很难受的坑。最早图省事按「1 单位 10 厘米」建一个 600mm 宽的机柜就是 6 单位24 米机房是 240 单位。跑起来才发现两个问题一是相机 far 得给到 800深度精度直线下降二是从后端拿到的坐标是米制小数每次都要乘 10四舍五入误差累积后相邻机柜之间的 3 毫米缝隙时有时无。后来统一成 1 单位 1 米数值全落在 0.1 到 100 这个区间浮点精度绰绰有余。具体约定我一般写成常量文件团队里谁建模都按这个来export const UNIT 1; // 1 单位 1 米 export const CABINET { w: 0.6, // 600mm 标准机柜宽 d: 1.2, // 1200mm 深 h: 2.0, // 2000mm 高42U 常见高度 gapX: 0.12, // 同排机柜间距 rowGapZ: 1.4, // 冷热通道间距 }; export const ROOM { w: 24, d: 16, h: 3.2 };原点放在机房中心的地面Y 轴向上机柜正面统一朝 Z。这条「正面朝 Z」的约定看着不起眼但它决定了你后面贴门板、挂状态指示灯、算相机默认视角时不用每次重新推导旋转角度。机柜朝向只允许 0、90、180、270 四个值用rotation.y直接给弧度不做任意角度机房场景里没这个需求反而会让拾取和标签定位复杂一圈。还有一处容易忽略的机柜几何体的原点。BoxGeometry默认原点在几何中心摆到场景里得手动加半个高度。我习惯在造几何体时就translate到底面中心这样position.y 0就是落地写循环时干净很多。2.3 光照配置三盏灯加一张环境贴图别急着开阴影金属质感的机柜在只有环境光时会黑成一片在只有平行光时又会死板得像纸片。我的固定搭配是半球光打底、平行光定方向、环境贴图负责反射。import { RoomEnvironment } from three/addons/environments/RoomEnvironment.js; // 环境贴图让 metalness 有东西可反射 const pmrem new THREE.PMREMGenerator(renderer); scene.environment pmrem.fromScene(new RoomEnvironment(), 0.04).texture; const hemi new THREE.HemisphereLight(0x93b7ff, 0x1a2230, 0.85); scene.add(hemi); const key new THREE.DirectionalLight(0xffffff, 1.6); key.position.set(12, 20, 10); key.castShadow false; // 先关理由见下 scene.add(key); const fill new THREE.DirectionalLight(0x6f8cff, 0.5); fill.position.set(-14, 8, -12); scene.add(fill);RoomEnvironment是 Three.js 自带的程序化室内环境不用下载 HDR 文件生成一次大概几十毫秒很适合机房这种封闭空间。生成的纹理用完记得pmrem.dispose()否则切换页面时会漏一块显存。阴影为什么建议先关两百个机柜如果每个都投影阴影贴图要么分辨率不够全是锯齿要么开到 4096 后每帧多一次全场景深度渲染中端笔记本直接从 60 帧掉到 25 帧。机房场景里机柜之间的空间关系靠地板网格线和走线槽就能表达清楚。真想要接触阴影用一个带径向渐变 CanvasTexture 的平面贴在每个机柜底部成本几乎为零。3. 机柜建模与实例化200 台机柜压到 3 个 draw call 的做法逐个new THREE.Mesh摆两百个机柜是这类项目最常见的性能分水岭。两百个 Mesh 意味着两百次 draw call 加两百次矩阵更新在集显机器上转个视角就能感觉到粘手。这一章从单台机柜的几何封装讲到 InstancedMesh 的逐实例着色把主体压到一次绘制。3.1 把单台机柜封装成参数化几何体先写几何体工厂。这里有两个刻意的选择分段数全部保持 1因为机柜是纯方块多一段都是浪费几何体原点平移到底面中心方便按行列摆放。import * as THREE from three; import { CABINET } from ./constants.js; export function createCabinetGeometry({ w, d, h }) { const geo new THREE.BoxGeometry(w, h, d, 1, 1, 1); // 原点移到底面中心position.y 0 即落地 geo.translate(0, h / 2, 0); geo.computeBoundingSphere(); return geo; } // 正面门板一块贴在机柜前脸外 1cm 的薄片 export function createDoorGeometry({ w, d, h }) { const thickness 0.02; const geo new THREE.BoxGeometry(w * 0.92, h * 0.94, thickness); geo.translate(0, h / 2, d / 2 thickness / 2); return geo; }门板单独做一层几何体不是为了好看是为了给状态色留一个独立的着色通道。机柜主体用深灰金属材质门板用带自发光的状态色两者分开后改状态只动门板这一层主体材质永远是共享的同一份省内存也省编译。材质方面MeshStandardMaterial的metalness给 0.35、roughness给 0.55 是个比较稳的区间。metalness 拉到 1 会强烈依赖环境贴图一旦环境贴图没生成成功就是纯黑给 0 又完全没有金属感看着像塑料收纳箱。const bodyMaterial new THREE.MeshStandardMaterial({ color: 0x2b3444, metalness: 0.35, roughness: 0.55, }); const doorMaterial new THREE.MeshStandardMaterial({ color: 0xffffff, // 必须白色否则实例色会被相乘变暗 metalness: 0.1, roughness: 0.4, emissive: 0x000000, });doorMaterial.color必须是纯白这是 InstancedMesh 逐实例着色的硬性前提最终颜色等于material.color × instanceColor。如果这里给了个灰蓝色所有告警红都会被压成暗红调色调半天调不出来。3.2 InstancedMesh 批量摆放与逐实例着色摆放逻辑用两层循环生成矩阵一次性写进instanceMatrix。关键是最后两行的包围球计算和needsUpdate这是最容易漏的地方。import { createCabinetGeometry, createDoorGeometry } from ./geometry.js; import { CABINET, ROOM } from ./constants.js; const ROWS 8; const COLS 25; const COUNT ROWS * COLS; // ---- 主体 ---- const bodyGeo createCabinetGeometry(CABINET); const bodyMesh new THREE.InstancedMesh(bodyGeo, bodyMaterial, COUNT); bodyMesh.instanceMatrix.setUsage(THREE.StaticDrawUsage); // ---- 门板状态色层---- const doorGeo createDoorGeometry(CABINET); const doorMesh new THREE.InstancedMesh(doorGeo, doorMaterial, COUNT); doorMesh.instanceMatrix.setUsage(THREE.StaticDrawUsage); const dummy new THREE.Object3D(); const tmpColor new THREE.Color(); const totalW COLS * CABINET.w (COLS - 1) * CABINET.gapX; const totalD ROWS * CABINET.d (ROWS - 1) * CABINET.rowGapZ; const startX -totalW / 2 CABINET.w / 2; const startZ -totalD / 2 CABINET.d / 2; let i 0; for (let r 0; r ROWS; r) { for (let c 0; c COLS; c) { dummy.position.set( startX c * (CABINET.w CABINET.gapX), 0, startZ r * (CABINET.d CABINET.rowGapZ) ); dummy.rotation.set(0, 0, 0); // 统一朝 Z dummy.scale.set(1, 1, 1); dummy.updateMatrix(); bodyMesh.setMatrixAt(i, dummy.matrix); doorMesh.setMatrixAt(i, dummy.matrix); // 初始化实例色必须在第一帧渲染前完成 bodyMesh.setColorAt(i, tmpColor.setHex(0x2b3444)); doorMesh.setColorAt(i, tmpColor.setHex(0x3ddc97)); i; } } bodyMesh.instanceMatrix.needsUpdate true; doorMesh.instanceMatrix.needsUpdate true; bodyMesh.instanceColor.needsUpdate true; doorMesh.instanceColor.needsUpdate true; // 关键InstancedMesh 的包围球默认按单个几何体算不重算会被错误剔除 bodyMesh.computeBoundingSphere(); doorMesh.computeBoundingSphere(); scene.add(bodyMesh, doorMesh);几个点展开说。StaticDrawUsage是告诉 GPU 这个矩阵缓冲区不会每帧改驱动可以放到显存里优化如果后面有动画要每帧改矩阵就换成DynamicDrawUsage。setColorAt的调用时机有讲究。它在第一次调用时会自动创建instanceColor属性但如果材质已经编译过比如画面已经渲染了一帧新加的属性不会自动进入着色器表现为「颜色设置了但画面没变」。所以初始化着色一定放在scene.add之前或者改完之后补一句doorMaterial.needsUpdate true。computeBoundingSphere()是血泪经验。InstancedMesh 继承自 Mesh它的boundingSphere默认由单个几何体决定也就是一个 0.6×2×1.2 的球。相机转到某个角度这个小球跑出视锥整批两百个机柜会被一起剔除掉画面瞬间空掉——很多人第一次遇到会以为是自己矩阵算错了。要么重算包围球要么直接frustumCulled false前者更省性能。这样一算机柜主体 1 次 draw call门板 1 次地板 1 次总共 3 次跟机柜数量无关。3.3 地板、走线槽与墙体用纹理和薄片换面数地板不要用几十段细分的网格去画格线一个PlaneGeometry配一张程序化生成的CanvasTexture就够了。function createFloorTexture(size 512) { const canvas document.createElement(canvas); canvas.width canvas.height size; const ctx canvas.getContext(2d); ctx.fillStyle #11161f; ctx.fillRect(0, 0, size, size); ctx.strokeStyle #1e2836; ctx.lineWidth 4; ctx.strokeRect(0, 0, size, size); // 铺开后就是 600mm 地砖格 const tex new THREE.CanvasTexture(canvas); tex.wrapS tex.wrapT THREE.RepeatWrapping; tex.repeat.set(ROOM.w / 0.6, ROOM.d / 0.6); tex.colorSpace THREE.SRGBColorSpace; // 纹理也要声明色彩空间 tex.anisotropy renderer.capabilities.getMaxAnisotropy(); return tex; } const floorGeo new THREE.PlaneGeometry(ROOM.w, ROOM.d); const floorMat new THREE.MeshStandardMaterial({ map: createFloorTexture(), metalness: 0.1, roughness: 0.9, }); const floor new THREE.Mesh(floorGeo, floorMat); floor.rotation.x -Math.PI / 2; scene.add(floor);anisotropy这一行决定了斜视角下地板格线糊不糊开到硬件上限代价很小。走线槽用细长的BoxGeometry合并成一个几何体比逐个添加省得多import { mergeGeometries } from three/addons/utils/BufferGeometryUtils.js; function createCableTrays(rows, rowGapZ, roomW) { const parts []; for (let r 0; r rows - 1; r) { const g new THREE.BoxGeometry(roomW * 0.9, 0.08, 0.25); g.translate(0, 0.04, (r 0.5) * rowGapZ - (rows * rowGapZ) / 2 0.7); parts.push(g); } return mergeGeometries(parts, false); }墙体我一般只做两面而且用transparent: true加低透明度或者干脆用LineSegments描个边。四面实墙会把相机挡在外面转个视角全是墙还得额外写相机碰撞——机房可视化里没人真的关心墙长什么样。4. 数据驱动与交互温度、负载、告警怎么落到颜色和点击上模型摆好只是静态场景。真正让它变成「可视化」的是每个机柜背后那一条状态数据。这一章讲阈值映射、差分更新和拾取标签三件事都是接上真实接口后绕不开的。4.1 状态字典与阈值映射不要在前端散着写if (temp 32)这种判断阈值一旦要改就是满项目找。我习惯把它抽成一张表顺便给每种状态配好颜色和文案状态码触发条件门板色说明normal在线且温度 28 且负载 70#3ddc97正常运行warning温度 2832 或负载 7085#ffc857需要关注danger温度 ≥ 32 或负载 ≥ 85#ff5a5f触发告警offline心跳超时#5a6472设备离线不参与阈值判断export const STATUS { normal: { color: 0x3ddc97, level: 0 }, warning: { color: 0xffc857, level: 1 }, danger: { color: 0xff5a5f, level: 2 }, offline: { color: 0x5a6472, level: 3 }, }; export function resolveStatus(m) { if (!m.online) return offline; if (m.temp 32 || m.load 85) return danger; if (m.temp 28 || m.load 70) return warning; return normal; }离线判断要放在最前面。这是实际运维里很常见的一个需求场景设备断电后温度上报的是最后一次的缓存值如果先判温度一台已经掉线的过热机器会一直显示红色告警值班的人会一直去查一台已经关机的设备。颜色用THREE.Color直接设置即可r152 之后setHex默认按 sRGB 解释再转线性跟 CSS 色值能对上。如果要做预警到告警的平滑过渡可以用lerpColorsconst cA new THREE.Color(0xffc857); const cB new THREE.Color(0xff5a5f); const mixed new THREE.Color().lerpColors(cA, cB, t); // t ∈ [0,1]不过说实话机柜状态这种离散分级直接跳变更符合运维直觉渐变反而让人犹豫「这到底是黄还是红」。4.2 差分更新只改变化的那几个实例数据每秒刷新一次两百个机柜里可能只有三五个状态变了。每次都全量重设一遍instanceColor再标脏等于每秒上传 2400 个浮点数还要重算一遍颜色对象纯属浪费。const CODE { normal: 0, warning: 1, danger: 2, offline: 3 }; const prev new Uint8Array(COUNT).fill(255); // 255 表示尚未初始化 const colorCache { 0: new THREE.Color(STATUS.normal.color), 1: new THREE.Color(STATUS.warning.color), 2: new THREE.Color(STATUS.danger.color), 3: new THREE.Color(STATUS.offline.color), }; let colorDirty false; function applyStatus(index, statusName) { const code CODE[statusName]; if (prev[index] code) return; // 没变就跳过 prev[index] code; doorMesh.setColorAt(index, colorCache[code]); colorDirty true; } function flushColors() { if (!colorDirty) return; doorMesh.instanceColor.needsUpdate true; colorDirty false; }colorCache预建四个Color实例避免在循环里反复new。prev用Uint8Array而不是普通数组两百个元素时差别不大但如果机房规模上到两千个类型数组的遍历速度优势就出来了。数据拉取部分轮询和 WebSocket 两种都常见async function poll() { try { const res await fetch(/api/room/cabinets, { cache: no-store }); if (!res.ok) throw new Error(HTTP ${res.status}); const list await res.json(); list.forEach((item, idx) { if (idx COUNT) return; // 防止后端多返回越界 applyStatus(idx, resolveStatus(item)); // 顺带更新悬浮卡片需要的数据 meta[idx] item; }); flushColors(); } catch (err) { console.warn([poll] 拉取失败保留上一帧状态, err); } finally { setTimeout(poll, 5000); } } poll();cache: no-store一定要加否则某些浏览器会拿 304 缓存画面看着在转但数据永远是旧的。请求失败时保留上一帧状态而不是清空也是实际经验网络抖一下整个机房变灰值班的人会以为全挂了。4.3 Raycaster 拾取与 CSS2D 标签的密度控制点击拾取这块InstancedMesh的intersectObject会返回instanceId拿它去查meta就能出详情。const raycaster new THREE.Raycaster(); const pointer new THREE.Vector2(); let downPos null; renderer.domElement.addEventListener(pointerdown, (e) { downPos { x: e.clientX, y: e.clientY }; }); renderer.domElement.addEventListener(pointerup, (e) { if (!downPos) return; const moved Math.hypot(e.clientX - downPos.x, e.clientY - downPos.y); downPos null; if (moved 5) return; // 拖动旋转不算点击 const rect renderer.domElement.getBoundingClientRect(); pointer.x ((e.clientX - rect.left) / rect.width) * 2 - 1; pointer.y -((e.clientY - rect.top) / rect.height) * 2 1; raycaster.setFromCamera(pointer, camera); const hit raycaster.intersectObject(doorMesh, false)[0]; if (hit) openPanel(hit.instanceId); });位移阈值 5 像素那条判断不能省。OrbitControls的旋转同样会触发pointerdown和pointerup不加阈值的话每次转完视角都会顺手弹出一个详情面板体验极差。这是我自己在手机上试出来的——手指滑动总是有几像素抖动。标签用CSS2DRenderer好处是能用普通 HTML 写样式和绑定事件字体渲染也比 Sprite 清晰。import { CSS2DRenderer, CSS2DObject } from three/addons/renderers/CSS2DRenderer.js; const labelRenderer new CSS2DRenderer(); labelRenderer.setSize(container.clientWidth, container.clientHeight); labelRenderer.domElement.style.position absolute; labelRenderer.domElement.style.top 0; labelRenderer.domElement.style.left 0; labelRenderer.domElement.style.pointerEvents none; // 不挡住鼠标拾取 container.appendChild(labelRenderer.domElement);标签的密度是这类项目的隐形杀手。两百个机柜每个挂一个 DOM 节点浏览器光排版就要掉十几帧。我的做法是只给三类机柜挂标签告警中的、当前鼠标悬停的、当前选中的。const labelPool new Map(); // instanceId - CSS2DObject function ensureLabel(instanceId, text, cls) { let obj labelPool.get(instanceId); if (!obj) { const el document.createElement(div); el.className scene-label ${cls}; obj new CSS2DObject(el); const pos new THREE.Vector3(); doorMesh.getMatrixAt(instanceId, dummy.matrix); dummy.matrix.decompose(pos, new THREE.Quaternion(), new THREE.Vector3()); obj.position.set(pos.x, CABINET.h 0.3, pos.z); labelPool.set(instanceId, obj); scene.add(obj); } obj.element.textContent text; return obj; }pointerEvents: none加在容器上、单个标签再设pointerEvents: auto这样标签能点但不会挡住场景拾取。标签的增删要跟着状态走从告警恢复正常的机柜scene.remove之后还要把CSS2DObject从labelPool里删掉不然这个 Map 会越滚越大。5. 上线前排查5 个把我卡了半天的坑这一章把我在不同项目里反复撞到的五个问题列出来每条都按「现象 → 原因 → 解决」写。它们大多不会报错只是画面不对或者越跑越慢靠自己盯着代码找非常费时间。5.1 五个高频翻车现场第一条相机一转机柜成片消失。现象是画面初始正常把相机拉远或者转到某个角度整批机柜毫无征兆地不见了转回来又出现。原因是InstancedMesh的视锥剔除用的是单几何体的包围球一个 0.6 米宽的机柜球体显然覆盖不了 24 米长的机房相机稍一移动它就判定「不在视野内」一次剔除全部实例。解决有两步摆完矩阵后调用mesh.computeBoundingSphere()重算如果矩阵后续还会变就在每次修改后重算或者临时设mesh.frustumCulled false。后者简单但有代价——所有实例永远参与渲染管线规模上千时能测出差别。第二条状态色改了画面纹丝不动。现象是控制台里instanceColor的值确实是红的画面上门板还是绿的。原因通常有三个。一是材质color不是纯白实例色被相乘压暗看着像没生效。二是instanceColor在材质编译之后才创建着色器里没开启对应宏。三是改完setColorAt忘了instanceColor.needsUpdate true。解决材质color固定在0xffffff所有setColorAt初始化放在第一次render之前改色后统一在下一次渲染前标脏并补一句doorMaterial.needsUpdate true强制重编译一次。最省事的排查方式是临时把材质换成MeshBasicMaterial如果颜色出来了说明问题在光照或色彩空间不在实例色。第三条点击机柜没反应或者点哪都弹出同一个。现象是点击后详情面板内容永远是第一个机柜的数据。原因之一是射线检测传了recursive true却传了InstancedMesh本身实例化对象的intersectObject不支持递归子对象返回的是空的或错位的。原因之二是getBoundingClientRect用了window坐标而不是 canvas 的页面有滚动条或者容器带偏移时归一化坐标整体偏了。解决intersectObject(doorMesh, false)第二参数固定false坐标计算严格用renderer.domElement.getBoundingClientRect()顺手加一句raycaster.far 200限制检测距离减少无谓计算。第四条页面停留两分钟后风扇狂转内存一路涨。现象是刚打开很流畅切了几次视角、开关几次详情面板之后开始掉帧任务管理器里内存持续增长不回落。原因基本是资源没释放每次打开面板都new一个CSS2DObject却从不remove事件监听挂在window上没解绑ResizeObserver没disconnect切换数据源时旧的环境贴图没dispose。解决给所有动态创建的 DOM 和 3D 对象配一个destroy()renderer.info.memory里的geometries和textures数量应该是稳定的如果每次操作都涨就一定漏了。我在组件卸载时固定走一遍清单移除全部CSS2DObject、controls.dispose()、resizeObserver.disconnect()、遍历scene释放几何体和材质、renderer.dispose()。第五条金属机柜黑成一块或者亮得发白。现象是机柜正面完全没有细节或者环境贴图加载后整片过曝。原因是metalness给到了 0.9 以上但scene.environment没设置金属材质在没有环境反射时只能反射黑色反过来环境贴图生成了但toneMappingExposure还是默认的 1配上强平行光就一片死白。解决metalness控制在 0.30.5scene.environment用RoomEnvironment生成toneMapping开ACESFilmicexposure从 1.0 开始微调每次只动 0.05。还有一个容易误判的情况环境贴图生成了但没在添加物体之前赋值材质的envMap就没绑上看着像是环境光没起作用。5.2 排查顺序从控制台到 GPU遇到「画面不对」时我的固定顺序是先看renderer.info.render再看材质最后才怀疑几何体。calls数量跟机柜数量同比例增长说明该实例化的没实例化triangles异常大说明某个几何体的分段数给多了geometries和textures随时间上涨就是泄漏。材质问题最快的验证方式是把MeshStandardMaterial换成MeshBasicMaterial。基础材质不参与光照计算如果在它下面颜色和形状都正常问题一定出在光照、环境贴图或色彩空间三选一不用去翻矩阵代码。几何体问题则用scene.overrideMaterial new THREE.MeshNormalMaterial()一眼看出来。法线材质会把每个面染成不同颜色朝向错了、面片翻转了、位置重叠了都无所遁形。这两招在排查 3D 可视化机房这类场景时比逐行读代码快得多。6. 帧率与内存的验证方法把「感觉不卡」变成数字「在我机器上挺流畅的」这句话在验收会上没有任何说服力。上线前我一般会插一段轻量的采样器把帧率、draw call、三角形数和显存占用打成一组数字跟验收方一起看。const stats { fps: 0, calls: 0, tris: 0, geo: 0, tex: 0 }; let frames 0; let lastTick performance.now(); function sample() { frames; const now performance.now(); if (now - lastTick 1000) { stats.fps Math.round((frames * 1000) / (now - lastTick)); stats.calls renderer.info.render.calls; stats.tris renderer.info.render.triangles; stats.geo renderer.info.memory.geometries; stats.tex renderer.info.memory.textures; document.getElementById(stat).textContent FPS ${stats.fps} | CALL ${stats.calls} | TRI ${stats.tris} | GEO ${stats.geo} | TEX ${stats.tex}; frames 0; lastTick now; } } function animate() { requestAnimationFrame(animate); controls.update(); renderer.render(scene, camera); labelRenderer.render(scene, camera); sample(); } animate();看这几个数怎么判断calls稳定在个位数说明实例化生效了tris在两万以内对一个机房场景是健康的geo和tex在任何交互之后都不应该有净增长。帧率掉到 40 以下时按下面的顺序降级改一项测一次降级项改动预期收益代价像素比setPixelRatio(1)高 DPI 屏帧率提升接近 2 倍边缘略糊抗锯齿antialias: false中低端设备提升 15%30%斜边有锯齿标签数量只保留告警 选中DOM 排版开销大幅下降信息密度降低环境贴图换成固定色scene.environment null省一次 PMREM 生成和采样金属感变弱雾效缩短fog.far远处物体提前剔除视野边界感变强真正需要保底的是像素比和标签数这两项它们的效果最直接视觉代价也最容易接受。抗锯齿关了之后可以在后处理里补一个便宜的 FXAA但我一般懒得加机房场景以方块为主锯齿不明显。从那以后我每次交付这类项目都会在验收前把这段采样器打开跑一轮完整操作路径初始视角、拉远、转一圈、连续点十个机柜、切一次数据源全程录下这五个数的变化。只要geo和tex是一条平线帧率没跌破 40我就敢让对方自己去点。这套动作现在成了我的固定习惯省下的扯皮时间远比写这段代码多。希望帮到你。本文还有配套的精品资源点击获取
部署与MNIST手写数字识别)
