1. 从零搭建一个能点、能转、能看细节的机房机柜场景第一次接到用 three.js 做一个可交互的机房机柜这个需求时我脑子里第一反应是这不就是个立方体堆叠吗真动手之后才发现坑远比想象中多。机柜不是简单的方块它有门、有导轨、有服务器面板、有指示灯还要支持鼠标悬停高亮、点击查看设备信息、拖拽旋转视角、滚轮缩放甚至要能打开柜门看到内部结构。如果只是把几个 BoxGeometry 拼在一起做出来的东西像积木完全没有机房的质感。这篇文章面向的是有一定 JavaScript 基础、想用 three.js 做工业可视化或数字孪生场景的开发者。不管你是刚接触 three.js 的新手还是做过一些简单 3D 场景但没碰过复杂交互的老手我都会把整个搭建过程拆开讲清楚场景怎么组织、模型怎么建、交互怎么做、性能怎么优化。核心关键词就三个——three.js 场景搭建、机柜模型构建、射线拾取交互。读完你至少能独立复现一个带悬停高亮、点击弹窗、轨道控制的机房机柜场景并且知道每一步为什么这么做。先说结论这个项目的难点不在建模而在交互的精准度和场景的性能控制。一个机柜里塞 40 台服务器每台服务器有面板、指示灯、把手如果每个零件都是独立 MeshDraw Call 直接爆炸。我实测过不做任何优化的情况下20 个机柜、每个机柜 30 台设备帧率从 60 掉到 18。所以这篇文章会重点讲清楚什么时候该合并几何体、什么时候该用 InstancedMesh、射线拾取怎么只检测需要的对象。下面我按实际开发顺序从场景初始化讲到交互实现再到性能调优每一步都给出可运行的代码和踩坑记录。2. 场景初始化相机、光照与渲染器的选型逻辑2.1 为什么用 PerspectiveCamera 而不是 OrthographicCamera机房可视化场景相机选型直接决定了用户体验。OrthographicCamera正交相机没有透视效果远处和近处一样大适合工程图纸类的展示。但机房机柜场景需要走进机房的沉浸感透视相机才能让用户感受到机柜的纵深和排列层次。我选的是 PerspectiveCamera视野角度fov设为 45 度。这个值有讲究fov 太大比如 75会产生明显的鱼眼畸变机柜边缘会被拉伸fov 太小比如 20则视野太窄用户需要频繁缩放才能看到全貌。45 度是我试了多个值之后觉得最舒服的既能看到一排机柜的排列又不会让单个机柜变形。相机初始位置设在(8, 6, 12)看向场景原点。这个位置能让用户第一眼看到机柜的正面和侧面形成立体认知。如果你把相机放在正前方(0, 0, 15)用户看到的就是一个平面需要自己旋转才能感知深度体验差很多。import * as THREE from three; const scene new THREE.Scene(); scene.background new THREE.Color(0x1a1a2e); const camera new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 ); camera.position.set(8, 6, 12); camera.lookAt(0, 0, 0); const renderer new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); renderer.shadowMap.enabled true; renderer.shadowMap.type THREE.PCFSoftShadowMap; document.body.appendChild(renderer.domElement);这里有个细节setPixelRatio我用了Math.min(window.devicePixelRatio, 2)。很多教程直接写window.devicePixelRatio但在 4K 屏或者某些高分屏手机上devicePixelRatio 可能到 3 甚至 4渲染压力翻倍帧率直接腰斩。限制在 2 以内视觉上几乎看不出差别性能却稳很多。2.2 光照方案环境光加方向光的组合为什么够用机房场景的光照不需要太复杂。我试过用 HDRI 环境贴图效果确实好但加载体积大而且机房本身是均匀照明环境HDRI 的优势体现不出来。最终方案是AmbientLight DirectionalLight的组合。AmbientLight 强度设 0.6提供基础照明保证机柜暗面不会全黑。DirectionalLight 强度设 0.8位置在(10, 20, 10)模拟顶部灯光产生明暗对比让机柜有立体感。方向光开启阴影投射但阴影贴图分辨率不用太高1024 就够了机房场景的阴影不需要太锐利。const ambientLight new THREE.AmbientLight(0xffffff, 0.6); scene.add(ambientLight); const dirLight new THREE.DirectionalLight(0xffffff, 0.8); dirLight.position.set(10, 20, 10); dirLight.castShadow true; dirLight.shadow.mapSize.set(1024, 1024); dirLight.shadow.camera.left -20; dirLight.shadow.camera.right 20; dirLight.shadow.camera.top 20; dirLight.shadow.camera.bottom -20; scene.add(dirLight);注意DirectionalLight 的 shadow.camera 范围要覆盖整个场景否则超出范围的物体会没有阴影。我一开始没设结果只有中间两个机柜有影子边上的全是飘着的。2.3 地面与网格辅助让空间有参照系没有地面的 3D 场景用户会失去空间感。我加了一个大平面作为地板材质用 MeshStandardMaterial颜色深灰0x2a2a3e接收阴影。再叠加一个 GridHelper网格线颜色调暗一点不要抢视觉焦点。const floorGeometry new THREE.PlaneGeometry(60, 60); const floorMaterial new THREE.MeshStandardMaterial({ color: 0x2a2a3e, roughness: 0.9, metalness: 0.1 }); const floor new THREE.Mesh(floorGeometry, floorMaterial); floor.rotation.x -Math.PI / 2; floor.receiveShadow true; scene.add(floor); const gridHelper new THREE.GridHelper(60, 60, 0x3a3a5e, 0x2a2a4e); gridHelper.position.y 0.01; scene.add(gridHelper);GridHelper 抬高 0.01 是为了避免和地板产生 Z-fighting深度冲突这个数值不用太大0.01 足够太大会看出网格悬浮。3. 机柜模型构建从参数化尺寸到模块化组装3.1 机柜尺寸的参数化设计标准机柜的尺寸是有行业规范的42U 机柜高度约 2 米宽度 0.6 米深度 1 米。我在代码里把这些做成常量方便后续调整。U 是机柜高度的单位1U 等于 44.45 毫米42U 就是 42 乘以 44.45 约等于 1.867 米加上框架差不多 2 米。const CABINET_CONFIG { width: 0.6, depth: 1.0, height: 2.0, frameThickness: 0.02, uHeight: 0.04445, totalU: 42 };参数化的好处是如果后面要改成 24U 的小机柜只需要改totalU和height其他逻辑不用动。我见过有人把尺寸写死在每个 Mesh 里改一个尺寸要翻遍整个文件维护成本极高。3.2 机柜框架用多个 BoxGeometry 拼出结构感机柜框架不能用一个实心方块那样看不到内部。我的做法是用 12 根梁拼出立方体框架4 根竖梁、4 根顶部横梁、4 根底部横梁。每根梁用 BoxGeometry材质用深色金属质感。const frameMaterial new THREE.MeshStandardMaterial({ color: 0x333344, roughness: 0.4, metalness: 0.8 }); function createFrame(config) { const group new THREE.Group(); const { width, depth, height, frameThickness: t } config; const halfW width / 2; const halfD depth / 2; // 四根竖梁 const verticalGeo new THREE.BoxGeometry(t, height, t); const positions [ [-halfW, 0, -halfD], [halfW, 0, -halfD], [-halfW, 0, halfD], [halfW, 0, halfD] ]; positions.forEach(([x, y, z]) { const beam new THREE.Mesh(verticalGeo, frameMaterial); beam.position.set(x, y height / 2, z); beam.castShadow true; group.add(beam); }); // 顶部和底部横梁 const horizontalGeoX new THREE.BoxGeometry(width, t, t); const horizontalGeoZ new THREE.BoxGeometry(t, t, depth); [0, height].forEach((y) { [[-halfD, horizontalGeoX], [halfD, horizontalGeoX]].forEach(([z, geo]) { const beam new THREE.Mesh(geo, frameMaterial); beam.position.set(0, y, z); beam.castShadow true; group.add(beam); }); [[-halfW, horizontalGeoZ], [halfW, horizontalGeoZ]].forEach(([x, geo]) { const beam new THREE.Mesh(geo, frameMaterial); beam.position.set(x, y, 0); beam.castShadow true; group.add(beam); }); }); return group; }这里我用了共享几何体的方式verticalGeo创建一次四个竖梁复用。这是 three.js 性能优化的基本功——相同形状的物体共享 Geometry 和 Material能显著减少内存占用。3.3 服务器面板用 Canvas 纹理模拟真实设备机柜里最核心的视觉元素是服务器。如果每台服务器都用纯色方块看起来像砖头。我的做法是用 Canvas 动态生成纹理画上散热孔、指示灯、品牌标识的模拟图案然后贴到服务器面板上。function createServerTexture() { const canvas document.createElement(canvas); canvas.width 256; canvas.height 64; const ctx canvas.getContext(2d); // 底色 ctx.fillStyle #2a2a35; ctx.fillRect(0, 0, 256, 64); // 散热孔 ctx.fillStyle #1a1a25; for (let x 10; x 120; x 8) { for (let y 10; y 54; y 8) { ctx.beginPath(); ctx.arc(x, y, 2, 0, Math.PI * 2); ctx.fill(); } } // 指示灯 const colors [#00ff88, #00ff88, #ffaa00, #00ff88]; colors.forEach((color, i) { ctx.fillStyle color; ctx.beginPath(); ctx.arc(150 i * 20, 20, 3, 0, Math.PI * 2); ctx.fill(); }); // 面板线条 ctx.strokeStyle #3a3a45; ctx.lineWidth 1; ctx.strokeRect(140, 35, 100, 20); const texture new THREE.CanvasTexture(canvas); texture.colorSpace THREE.SRGBColorSpace; return texture; }用 Canvas 纹理的好处是灵活想改颜色、改布局改几行绘制代码就行不用重新做贴图。而且 Canvas 纹理是程序生成的不占加载时间。3.4 用 InstancedMesh 批量渲染服务器一个机柜 42U假设每台服务器占 2U就是 21 台设备。如果有 10 个机柜就是 210 台服务器。每台服务器如果是一个独立 Mesh加上面板、指示灯Draw Call 轻松破千。我的方案是用InstancedMesh。InstancedMesh 允许用一次 Draw Call 渲染多个相同几何体的实例每个实例可以有独立的变换矩阵。服务器的几何体是相同的都是 1U 或 2U 的盒子只是位置不同完美适配 InstancedMesh。function createServersInstanced(config, count) { const { width, depth, uHeight } config; const serverHeight uHeight * 2; // 每台占2U const geometry new THREE.BoxGeometry(width * 0.9, serverHeight * 0.9, depth * 0.8); const material new THREE.MeshStandardMaterial({ map: createServerTexture(), roughness: 0.6, metalness: 0.3 }); const instancedMesh new THREE.InstancedMesh(geometry, material, count); instancedMesh.castShadow true; instancedMesh.receiveShadow true; const matrix new THREE.Matrix4(); for (let i 0; i count; i) { const y 0.1 i * serverHeight serverHeight / 2; matrix.setPosition(0, y, 0); instancedMesh.setMatrixAt(i, matrix); } instancedMesh.instanceMatrix.needsUpdate true; return instancedMesh; }注意InstancedMesh 的射线拾取和普通 Mesh 不同。raycaster.intersectObject返回的instanceId才是关键通过它才能知道点的是第几台服务器。这个后面交互章节会详细讲。4. 交互系统射线拾取、悬停高亮与点击响应4.1 Raycaster 的工作原理与性能陷阱Raycaster 是 three.js 实现鼠标交互的核心工具。它的原理是从相机位置发出一条射线穿过鼠标在屏幕上的位置检测这条射线和场景中哪些物体相交。听起来简单但性能陷阱很多。第一个陷阱每帧都对所有物体做射线检测。如果场景里有几千个 Mesh每帧遍历一次CPU 直接跑满。正确做法是只在鼠标移动时检测而且只检测需要交互的对象。第二个陷阱不设置 raycaster 的 far 值。默认 far 是 Infinity射线会检测整个场景深度。设置一个合理的 far 值比如 50能减少不必要的计算。const raycaster new THREE.Raycaster(); raycaster.far 50; const mouse new THREE.Vector2(); function onMouseMove(event) { mouse.x (event.clientX / window.innerWidth) * 2 - 1; mouse.y -(event.clientY / window.innerHeight) * 2 1; }4.2 悬停高亮用 emissive 实现不发光的发光效果悬停高亮最直接的做法是改材质颜色但这样会丢失原有纹理。更好的方案是改材质的emissive属性让物体自身发出微弱的光叠加在原有纹理上。对于 InstancedMesh不能直接改单个实例的材质因为所有实例共享同一个材质。我的做法是用setColorAt方法给被悬停的实例设置一个高亮颜色。let hoveredInstanceId null; function updateHover() { raycaster.setFromCamera(mouse, camera); const intersects raycaster.intersectObjects(interactiveObjects); if (intersects.length 0) { const hit intersects[0]; if (hit.object.isInstancedMesh) { if (hoveredInstanceId ! hit.instanceId) { // 恢复上一个 if (hoveredInstanceId ! null) { hit.object.setColorAt(hoveredInstanceId, new THREE.Color(0xffffff)); } hoveredInstanceId hit.instanceId; hit.object.setColorAt(hoveredInstanceId, new THREE.Color(0x4488ff)); hit.object.instanceColor.needsUpdate true; } document.body.style.cursor pointer; } } else { if (hoveredInstanceId ! null) { // 需要知道是哪个 mesh这里简化处理 hoveredInstanceId null; } document.body.style.cursor default; } }这里有个坑setColorAt设置的颜色会和材质本身的颜色相乘。如果材质是白色设置蓝色就是蓝色如果材质本身是深灰设置蓝色会变得很暗。所以 InstancedMesh 的材质基础色最好设成白色或浅色让实例颜色来主导。4.3 点击弹窗把 3D 坐标转成 2D 屏幕坐标点击服务器后弹出信息面板需要把 3D 物体的位置转换成屏幕上的 2D 坐标。用vector.project(camera)方法可以实现。function onClick(event) { raycaster.setFromCamera(mouse, camera); const intersects raycaster.intersectObjects(interactiveObjects); if (intersects.length 0) { const hit intersects[0]; const worldPos new THREE.Vector3(); hit.object.getWorldPosition(worldPos); // 3D 转 2D const screenPos worldPos.clone().project(camera); const x (screenPos.x * 0.5 0.5) * window.innerWidth; const y (-screenPos.y * 0.5 0.5) * window.innerHeight; showInfoPanel(x, y, { instanceId: hit.instanceId, name: 服务器-${hit.instanceId 1}, status: 运行中 }); } }信息面板用 HTML 元素绝对定位比在 3D 场景里画文字简单得多而且样式好控制。4.4 OrbitControls让用户自由探索场景轨道控制器是 three.js 官方提供的交互工具支持旋转、缩放、平移。引入方式很简单但参数需要调。import { OrbitControls } from three/addons/controls/OrbitControls.js; const controls new OrbitControls(camera, renderer.domElement); controls.enableDamping true; controls.dampingFactor 0.05; controls.minDistance 3; controls.maxDistance 30; controls.maxPolarAngle Math.PI / 2; controls.target.set(0, 1, 0);enableDamping开启惯性效果操作手感更顺滑。maxPolarAngle限制不能转到地面以下避免用户看到场景底部的空白。target设到机柜中心高度旋转时围绕机柜转而不是围绕地面。5. 性能优化从 18 帧到 60 帧的实战调优记录5.1 Draw Call 从 800 降到 30 的合并策略前面提到未优化时 20 个机柜场景只有 18 帧。我用renderer.info.render.calls查看 Draw Call 数量发现高达 800 多。优化后降到 30 左右帧率稳定 60。优化手段有三个层次第一层相同材质的静态物体合并几何体。机柜框架的 12 根梁材质相同可以用BufferGeometryUtils.mergeGeometries合并成一个几何体。import { mergeGeometries } from three/addons/utils/BufferGeometryUtils.js; function mergeFrameGeometries(config) { const geometries []; // ... 创建各个梁的 geometry应用变换矩阵 // 然后合并 const merged mergeGeometries(geometries); return new THREE.Mesh(merged, frameMaterial); }第二层用 InstancedMesh 处理重复物体。服务器、指示灯、螺丝这些重复出现的元素全部用 InstancedMesh。第三层LODLevel of Detail。远处的机柜用简化模型近处的用精细模型。不过机房场景通常不会太大LOD 的收益有限我最后没上。5.2 纹理与材质的复用原则每个材质都会产生一次状态切换。我统计过优化前场景里有 40 多种材质优化后合并到 8 种。原则是能共用就共用不能共用就合并。服务器面板纹理我一开始给每台服务器生成一张21 台就是 21 张纹理显存直接爆。后来改成所有服务器共用一张纹理通过 UV 偏移来制造差异感显存占用降到原来的二十分之一。5.3 帧率监控与自适应降级上线前我加了一个简单的帧率监控连续 3 秒低于 30 帧就自动降低渲染质量关闭阴影、降低 pixelRatio。let frameCount 0; let lastTime performance.now(); let lowFpsCount 0; function checkPerformance() { frameCount; const now performance.now(); if (now - lastTime 1000) { const fps frameCount; frameCount 0; lastTime now; if (fps 30) { lowFpsCount; if (lowFpsCount 3) { renderer.shadowMap.enabled false; renderer.setPixelRatio(1); } } else { lowFpsCount 0; } } }这个降级策略在低端设备上很管用用户不会因为卡顿直接关掉页面。6. 踩坑记录那些文档里不会写的细节6.1 InstancedMesh 的射线拾取返回的是 instanceId 不是 object这个坑我卡了大半天。普通 Mesh 的射线拾取intersects[0].object就是被点击的物体。但 InstancedMesh 返回的object是整个 InstancedMesh真正的实例信息在intersects[0].instanceId里。如果你按普通 Mesh 的方式处理会发现点击任何一台服务器拿到的都是同一个对象。6.2 Canvas 纹理的颜色空间问题用 CanvasTexture 时如果不设置texture.colorSpace THREE.SRGBColorSpace纹理颜色会偏暗。这是因为 three.js 默认使用线性颜色空间而 Canvas 绘制的是 sRGB 颜色。这个差异在深色纹理上特别明显我一开始以为是光照问题调了半天光照才发现是颜色空间。6.3 阴影贴图的 acne 问题方向光阴影在机柜表面会产生条纹状的阴影失真这叫 shadow acne。解决办法是调整shadow.bias一般设 -0.0005 到 -0.001 之间。设太小没效果设太大会产生 peter-panning阴影和物体分离。dirLight.shadow.bias -0.0005; dirLight.shadow.normalBias 0.02;normalBias是 three.js 后来加入的参数比 bias 更好用能根据法线方向偏移减少阴影失真。6.4 窗口 resize 时的相机宽高比更新这个虽然基础但很多人忘。窗口大小变化时不仅要更新 renderer 的尺寸还要更新相机的 aspect 和投影矩阵。window.addEventListener(resize, () { camera.aspect window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); });不调用updateProjectionMatrix画面会被拉伸变形。7. 场景扩展从单机柜到整机房的数据驱动思路单机柜跑通之后扩展到整机房是自然的下一步。我的做法是用数据驱动定义一个机柜数组每个元素包含位置、朝向、设备列表然后循环生成。const cabinetsData [ { position: [-3, 0, 0], rotation: 0, servers: 21 }, { position: [0, 0, 0], rotation: 0, servers: 18 }, { position: [3, 0, 0], rotation: 0, servers: 21 }, // ... ]; cabinetsData.forEach((data) { const cabinet createCabinet(CABINET_CONFIG, data.servers); cabinet.position.set(...data.position); cabinet.rotation.y data.rotation; scene.add(cabinet); });数据驱动的最大好处是机房的布局可以来自后端接口前端只负责渲染。设备状态、温度、告警信息都可以通过数据更新来驱动 3D 场景的变化比如温度过高时服务器面板变红这就是数字孪生的基础形态。我在实际项目里还加了一个功能点击机柜门可以打开看到内部服务器的排列。实现方式是用动画库比如 GSAP旋转柜门的 rotation.y配合缓动函数效果很自然。柜门打开后内部的服务器用更精细的模型替换这就是前面提到的 LOD 思路的变种。最后分享一个实用技巧如果场景里的机柜数量超过 50 个建议用Frustum Culling视锥剔除配合Occlusion Culling遮挡剔除。three.js 默认开启视锥剔除但遮挡剔除需要手动实现或借助第三方库。对于机房这种排列规整的场景简单的距离剔除就够用——超出相机 far 值的机柜直接visible false能省不少性能。 
长河君 · 2026/10/13 1:29:21 · 阅读 1.2k Three.js机房机柜交互场景搭建与性能优化实战
1. 从零搭建一个能点、能转、能看细节的机房机柜场景第一次接到用 three.js 做一个可交互的机房机柜这个需求时我脑子里第一反应是这不就是个立方体堆叠吗真动手之后才发现坑远比想象中多。机柜不是简单的方块它有门、有导轨、有服务器面板、有指示灯还要支持鼠标悬停高亮、点击查看设备信息、拖拽旋转视角、滚轮缩放甚至要能打开柜门看到内部结构。如果只是把几个 BoxGeometry 拼在一起做出来的东西像积木完全没有机房的质感。这篇文章面向的是有一定 JavaScript 基础、想用 three.js 做工业可视化或数字孪生场景的开发者。不管你是刚接触 three.js 的新手还是做过一些简单 3D 场景但没碰过复杂交互的老手我都会把整个搭建过程拆开讲清楚场景怎么组织、模型怎么建、交互怎么做、性能怎么优化。核心关键词就三个——three.js 场景搭建、机柜模型构建、射线拾取交互。读完你至少能独立复现一个带悬停高亮、点击弹窗、轨道控制的机房机柜场景并且知道每一步为什么这么做。先说结论这个项目的难点不在建模而在交互的精准度和场景的性能控制。一个机柜里塞 40 台服务器每台服务器有面板、指示灯、把手如果每个零件都是独立 MeshDraw Call 直接爆炸。我实测过不做任何优化的情况下20 个机柜、每个机柜 30 台设备帧率从 60 掉到 18。所以这篇文章会重点讲清楚什么时候该合并几何体、什么时候该用 InstancedMesh、射线拾取怎么只检测需要的对象。下面我按实际开发顺序从场景初始化讲到交互实现再到性能调优每一步都给出可运行的代码和踩坑记录。2. 场景初始化相机、光照与渲染器的选型逻辑2.1 为什么用 PerspectiveCamera 而不是 OrthographicCamera机房可视化场景相机选型直接决定了用户体验。OrthographicCamera正交相机没有透视效果远处和近处一样大适合工程图纸类的展示。但机房机柜场景需要走进机房的沉浸感透视相机才能让用户感受到机柜的纵深和排列层次。我选的是 PerspectiveCamera视野角度fov设为 45 度。这个值有讲究fov 太大比如 75会产生明显的鱼眼畸变机柜边缘会被拉伸fov 太小比如 20则视野太窄用户需要频繁缩放才能看到全貌。45 度是我试了多个值之后觉得最舒服的既能看到一排机柜的排列又不会让单个机柜变形。相机初始位置设在(8, 6, 12)看向场景原点。这个位置能让用户第一眼看到机柜的正面和侧面形成立体认知。如果你把相机放在正前方(0, 0, 15)用户看到的就是一个平面需要自己旋转才能感知深度体验差很多。import * as THREE from three; const scene new THREE.Scene(); scene.background new THREE.Color(0x1a1a2e); const camera new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 ); camera.position.set(8, 6, 12); camera.lookAt(0, 0, 0); const renderer new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); renderer.shadowMap.enabled true; renderer.shadowMap.type THREE.PCFSoftShadowMap; document.body.appendChild(renderer.domElement);这里有个细节setPixelRatio我用了Math.min(window.devicePixelRatio, 2)。很多教程直接写window.devicePixelRatio但在 4K 屏或者某些高分屏手机上devicePixelRatio 可能到 3 甚至 4渲染压力翻倍帧率直接腰斩。限制在 2 以内视觉上几乎看不出差别性能却稳很多。2.2 光照方案环境光加方向光的组合为什么够用机房场景的光照不需要太复杂。我试过用 HDRI 环境贴图效果确实好但加载体积大而且机房本身是均匀照明环境HDRI 的优势体现不出来。最终方案是AmbientLight DirectionalLight的组合。AmbientLight 强度设 0.6提供基础照明保证机柜暗面不会全黑。DirectionalLight 强度设 0.8位置在(10, 20, 10)模拟顶部灯光产生明暗对比让机柜有立体感。方向光开启阴影投射但阴影贴图分辨率不用太高1024 就够了机房场景的阴影不需要太锐利。const ambientLight new THREE.AmbientLight(0xffffff, 0.6); scene.add(ambientLight); const dirLight new THREE.DirectionalLight(0xffffff, 0.8); dirLight.position.set(10, 20, 10); dirLight.castShadow true; dirLight.shadow.mapSize.set(1024, 1024); dirLight.shadow.camera.left -20; dirLight.shadow.camera.right 20; dirLight.shadow.camera.top 20; dirLight.shadow.camera.bottom -20; scene.add(dirLight);注意DirectionalLight 的 shadow.camera 范围要覆盖整个场景否则超出范围的物体会没有阴影。我一开始没设结果只有中间两个机柜有影子边上的全是飘着的。2.3 地面与网格辅助让空间有参照系没有地面的 3D 场景用户会失去空间感。我加了一个大平面作为地板材质用 MeshStandardMaterial颜色深灰0x2a2a3e接收阴影。再叠加一个 GridHelper网格线颜色调暗一点不要抢视觉焦点。const floorGeometry new THREE.PlaneGeometry(60, 60); const floorMaterial new THREE.MeshStandardMaterial({ color: 0x2a2a3e, roughness: 0.9, metalness: 0.1 }); const floor new THREE.Mesh(floorGeometry, floorMaterial); floor.rotation.x -Math.PI / 2; floor.receiveShadow true; scene.add(floor); const gridHelper new THREE.GridHelper(60, 60, 0x3a3a5e, 0x2a2a4e); gridHelper.position.y 0.01; scene.add(gridHelper);GridHelper 抬高 0.01 是为了避免和地板产生 Z-fighting深度冲突这个数值不用太大0.01 足够太大会看出网格悬浮。3. 机柜模型构建从参数化尺寸到模块化组装3.1 机柜尺寸的参数化设计标准机柜的尺寸是有行业规范的42U 机柜高度约 2 米宽度 0.6 米深度 1 米。我在代码里把这些做成常量方便后续调整。U 是机柜高度的单位1U 等于 44.45 毫米42U 就是 42 乘以 44.45 约等于 1.867 米加上框架差不多 2 米。const CABINET_CONFIG { width: 0.6, depth: 1.0, height: 2.0, frameThickness: 0.02, uHeight: 0.04445, totalU: 42 };参数化的好处是如果后面要改成 24U 的小机柜只需要改totalU和height其他逻辑不用动。我见过有人把尺寸写死在每个 Mesh 里改一个尺寸要翻遍整个文件维护成本极高。3.2 机柜框架用多个 BoxGeometry 拼出结构感机柜框架不能用一个实心方块那样看不到内部。我的做法是用 12 根梁拼出立方体框架4 根竖梁、4 根顶部横梁、4 根底部横梁。每根梁用 BoxGeometry材质用深色金属质感。const frameMaterial new THREE.MeshStandardMaterial({ color: 0x333344, roughness: 0.4, metalness: 0.8 }); function createFrame(config) { const group new THREE.Group(); const { width, depth, height, frameThickness: t } config; const halfW width / 2; const halfD depth / 2; // 四根竖梁 const verticalGeo new THREE.BoxGeometry(t, height, t); const positions [ [-halfW, 0, -halfD], [halfW, 0, -halfD], [-halfW, 0, halfD], [halfW, 0, halfD] ]; positions.forEach(([x, y, z]) { const beam new THREE.Mesh(verticalGeo, frameMaterial); beam.position.set(x, y height / 2, z); beam.castShadow true; group.add(beam); }); // 顶部和底部横梁 const horizontalGeoX new THREE.BoxGeometry(width, t, t); const horizontalGeoZ new THREE.BoxGeometry(t, t, depth); [0, height].forEach((y) { [[-halfD, horizontalGeoX], [halfD, horizontalGeoX]].forEach(([z, geo]) { const beam new THREE.Mesh(geo, frameMaterial); beam.position.set(0, y, z); beam.castShadow true; group.add(beam); }); [[-halfW, horizontalGeoZ], [halfW, horizontalGeoZ]].forEach(([x, geo]) { const beam new THREE.Mesh(geo, frameMaterial); beam.position.set(x, y, 0); beam.castShadow true; group.add(beam); }); }); return group; }这里我用了共享几何体的方式verticalGeo创建一次四个竖梁复用。这是 three.js 性能优化的基本功——相同形状的物体共享 Geometry 和 Material能显著减少内存占用。3.3 服务器面板用 Canvas 纹理模拟真实设备机柜里最核心的视觉元素是服务器。如果每台服务器都用纯色方块看起来像砖头。我的做法是用 Canvas 动态生成纹理画上散热孔、指示灯、品牌标识的模拟图案然后贴到服务器面板上。function createServerTexture() { const canvas document.createElement(canvas); canvas.width 256; canvas.height 64; const ctx canvas.getContext(2d); // 底色 ctx.fillStyle #2a2a35; ctx.fillRect(0, 0, 256, 64); // 散热孔 ctx.fillStyle #1a1a25; for (let x 10; x 120; x 8) { for (let y 10; y 54; y 8) { ctx.beginPath(); ctx.arc(x, y, 2, 0, Math.PI * 2); ctx.fill(); } } // 指示灯 const colors [#00ff88, #00ff88, #ffaa00, #00ff88]; colors.forEach((color, i) { ctx.fillStyle color; ctx.beginPath(); ctx.arc(150 i * 20, 20, 3, 0, Math.PI * 2); ctx.fill(); }); // 面板线条 ctx.strokeStyle #3a3a45; ctx.lineWidth 1; ctx.strokeRect(140, 35, 100, 20); const texture new THREE.CanvasTexture(canvas); texture.colorSpace THREE.SRGBColorSpace; return texture; }用 Canvas 纹理的好处是灵活想改颜色、改布局改几行绘制代码就行不用重新做贴图。而且 Canvas 纹理是程序生成的不占加载时间。3.4 用 InstancedMesh 批量渲染服务器一个机柜 42U假设每台服务器占 2U就是 21 台设备。如果有 10 个机柜就是 210 台服务器。每台服务器如果是一个独立 Mesh加上面板、指示灯Draw Call 轻松破千。我的方案是用InstancedMesh。InstancedMesh 允许用一次 Draw Call 渲染多个相同几何体的实例每个实例可以有独立的变换矩阵。服务器的几何体是相同的都是 1U 或 2U 的盒子只是位置不同完美适配 InstancedMesh。function createServersInstanced(config, count) { const { width, depth, uHeight } config; const serverHeight uHeight * 2; // 每台占2U const geometry new THREE.BoxGeometry(width * 0.9, serverHeight * 0.9, depth * 0.8); const material new THREE.MeshStandardMaterial({ map: createServerTexture(), roughness: 0.6, metalness: 0.3 }); const instancedMesh new THREE.InstancedMesh(geometry, material, count); instancedMesh.castShadow true; instancedMesh.receiveShadow true; const matrix new THREE.Matrix4(); for (let i 0; i count; i) { const y 0.1 i * serverHeight serverHeight / 2; matrix.setPosition(0, y, 0); instancedMesh.setMatrixAt(i, matrix); } instancedMesh.instanceMatrix.needsUpdate true; return instancedMesh; }注意InstancedMesh 的射线拾取和普通 Mesh 不同。raycaster.intersectObject返回的instanceId才是关键通过它才能知道点的是第几台服务器。这个后面交互章节会详细讲。4. 交互系统射线拾取、悬停高亮与点击响应4.1 Raycaster 的工作原理与性能陷阱Raycaster 是 three.js 实现鼠标交互的核心工具。它的原理是从相机位置发出一条射线穿过鼠标在屏幕上的位置检测这条射线和场景中哪些物体相交。听起来简单但性能陷阱很多。第一个陷阱每帧都对所有物体做射线检测。如果场景里有几千个 Mesh每帧遍历一次CPU 直接跑满。正确做法是只在鼠标移动时检测而且只检测需要交互的对象。第二个陷阱不设置 raycaster 的 far 值。默认 far 是 Infinity射线会检测整个场景深度。设置一个合理的 far 值比如 50能减少不必要的计算。const raycaster new THREE.Raycaster(); raycaster.far 50; const mouse new THREE.Vector2(); function onMouseMove(event) { mouse.x (event.clientX / window.innerWidth) * 2 - 1; mouse.y -(event.clientY / window.innerHeight) * 2 1; }4.2 悬停高亮用 emissive 实现不发光的发光效果悬停高亮最直接的做法是改材质颜色但这样会丢失原有纹理。更好的方案是改材质的emissive属性让物体自身发出微弱的光叠加在原有纹理上。对于 InstancedMesh不能直接改单个实例的材质因为所有实例共享同一个材质。我的做法是用setColorAt方法给被悬停的实例设置一个高亮颜色。let hoveredInstanceId null; function updateHover() { raycaster.setFromCamera(mouse, camera); const intersects raycaster.intersectObjects(interactiveObjects); if (intersects.length 0) { const hit intersects[0]; if (hit.object.isInstancedMesh) { if (hoveredInstanceId ! hit.instanceId) { // 恢复上一个 if (hoveredInstanceId ! null) { hit.object.setColorAt(hoveredInstanceId, new THREE.Color(0xffffff)); } hoveredInstanceId hit.instanceId; hit.object.setColorAt(hoveredInstanceId, new THREE.Color(0x4488ff)); hit.object.instanceColor.needsUpdate true; } document.body.style.cursor pointer; } } else { if (hoveredInstanceId ! null) { // 需要知道是哪个 mesh这里简化处理 hoveredInstanceId null; } document.body.style.cursor default; } }这里有个坑setColorAt设置的颜色会和材质本身的颜色相乘。如果材质是白色设置蓝色就是蓝色如果材质本身是深灰设置蓝色会变得很暗。所以 InstancedMesh 的材质基础色最好设成白色或浅色让实例颜色来主导。4.3 点击弹窗把 3D 坐标转成 2D 屏幕坐标点击服务器后弹出信息面板需要把 3D 物体的位置转换成屏幕上的 2D 坐标。用vector.project(camera)方法可以实现。function onClick(event) { raycaster.setFromCamera(mouse, camera); const intersects raycaster.intersectObjects(interactiveObjects); if (intersects.length 0) { const hit intersects[0]; const worldPos new THREE.Vector3(); hit.object.getWorldPosition(worldPos); // 3D 转 2D const screenPos worldPos.clone().project(camera); const x (screenPos.x * 0.5 0.5) * window.innerWidth; const y (-screenPos.y * 0.5 0.5) * window.innerHeight; showInfoPanel(x, y, { instanceId: hit.instanceId, name: 服务器-${hit.instanceId 1}, status: 运行中 }); } }信息面板用 HTML 元素绝对定位比在 3D 场景里画文字简单得多而且样式好控制。4.4 OrbitControls让用户自由探索场景轨道控制器是 three.js 官方提供的交互工具支持旋转、缩放、平移。引入方式很简单但参数需要调。import { OrbitControls } from three/addons/controls/OrbitControls.js; const controls new OrbitControls(camera, renderer.domElement); controls.enableDamping true; controls.dampingFactor 0.05; controls.minDistance 3; controls.maxDistance 30; controls.maxPolarAngle Math.PI / 2; controls.target.set(0, 1, 0);enableDamping开启惯性效果操作手感更顺滑。maxPolarAngle限制不能转到地面以下避免用户看到场景底部的空白。target设到机柜中心高度旋转时围绕机柜转而不是围绕地面。5. 性能优化从 18 帧到 60 帧的实战调优记录5.1 Draw Call 从 800 降到 30 的合并策略前面提到未优化时 20 个机柜场景只有 18 帧。我用renderer.info.render.calls查看 Draw Call 数量发现高达 800 多。优化后降到 30 左右帧率稳定 60。优化手段有三个层次第一层相同材质的静态物体合并几何体。机柜框架的 12 根梁材质相同可以用BufferGeometryUtils.mergeGeometries合并成一个几何体。import { mergeGeometries } from three/addons/utils/BufferGeometryUtils.js; function mergeFrameGeometries(config) { const geometries []; // ... 创建各个梁的 geometry应用变换矩阵 // 然后合并 const merged mergeGeometries(geometries); return new THREE.Mesh(merged, frameMaterial); }第二层用 InstancedMesh 处理重复物体。服务器、指示灯、螺丝这些重复出现的元素全部用 InstancedMesh。第三层LODLevel of Detail。远处的机柜用简化模型近处的用精细模型。不过机房场景通常不会太大LOD 的收益有限我最后没上。5.2 纹理与材质的复用原则每个材质都会产生一次状态切换。我统计过优化前场景里有 40 多种材质优化后合并到 8 种。原则是能共用就共用不能共用就合并。服务器面板纹理我一开始给每台服务器生成一张21 台就是 21 张纹理显存直接爆。后来改成所有服务器共用一张纹理通过 UV 偏移来制造差异感显存占用降到原来的二十分之一。5.3 帧率监控与自适应降级上线前我加了一个简单的帧率监控连续 3 秒低于 30 帧就自动降低渲染质量关闭阴影、降低 pixelRatio。let frameCount 0; let lastTime performance.now(); let lowFpsCount 0; function checkPerformance() { frameCount; const now performance.now(); if (now - lastTime 1000) { const fps frameCount; frameCount 0; lastTime now; if (fps 30) { lowFpsCount; if (lowFpsCount 3) { renderer.shadowMap.enabled false; renderer.setPixelRatio(1); } } else { lowFpsCount 0; } } }这个降级策略在低端设备上很管用用户不会因为卡顿直接关掉页面。6. 踩坑记录那些文档里不会写的细节6.1 InstancedMesh 的射线拾取返回的是 instanceId 不是 object这个坑我卡了大半天。普通 Mesh 的射线拾取intersects[0].object就是被点击的物体。但 InstancedMesh 返回的object是整个 InstancedMesh真正的实例信息在intersects[0].instanceId里。如果你按普通 Mesh 的方式处理会发现点击任何一台服务器拿到的都是同一个对象。6.2 Canvas 纹理的颜色空间问题用 CanvasTexture 时如果不设置texture.colorSpace THREE.SRGBColorSpace纹理颜色会偏暗。这是因为 three.js 默认使用线性颜色空间而 Canvas 绘制的是 sRGB 颜色。这个差异在深色纹理上特别明显我一开始以为是光照问题调了半天光照才发现是颜色空间。6.3 阴影贴图的 acne 问题方向光阴影在机柜表面会产生条纹状的阴影失真这叫 shadow acne。解决办法是调整shadow.bias一般设 -0.0005 到 -0.001 之间。设太小没效果设太大会产生 peter-panning阴影和物体分离。dirLight.shadow.bias -0.0005; dirLight.shadow.normalBias 0.02;normalBias是 three.js 后来加入的参数比 bias 更好用能根据法线方向偏移减少阴影失真。6.4 窗口 resize 时的相机宽高比更新这个虽然基础但很多人忘。窗口大小变化时不仅要更新 renderer 的尺寸还要更新相机的 aspect 和投影矩阵。window.addEventListener(resize, () { camera.aspect window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); });不调用updateProjectionMatrix画面会被拉伸变形。7. 场景扩展从单机柜到整机房的数据驱动思路单机柜跑通之后扩展到整机房是自然的下一步。我的做法是用数据驱动定义一个机柜数组每个元素包含位置、朝向、设备列表然后循环生成。const cabinetsData [ { position: [-3, 0, 0], rotation: 0, servers: 21 }, { position: [0, 0, 0], rotation: 0, servers: 18 }, { position: [3, 0, 0], rotation: 0, servers: 21 }, // ... ]; cabinetsData.forEach((data) { const cabinet createCabinet(CABINET_CONFIG, data.servers); cabinet.position.set(...data.position); cabinet.rotation.y data.rotation; scene.add(cabinet); });数据驱动的最大好处是机房的布局可以来自后端接口前端只负责渲染。设备状态、温度、告警信息都可以通过数据更新来驱动 3D 场景的变化比如温度过高时服务器面板变红这就是数字孪生的基础形态。我在实际项目里还加了一个功能点击机柜门可以打开看到内部服务器的排列。实现方式是用动画库比如 GSAP旋转柜门的 rotation.y配合缓动函数效果很自然。柜门打开后内部的服务器用更精细的模型替换这就是前面提到的 LOD 思路的变种。最后分享一个实用技巧如果场景里的机柜数量超过 50 个建议用Frustum Culling视锥剔除配合Occlusion Culling遮挡剔除。three.js 默认开启视锥剔除但遮挡剔除需要手动实现或借助第三方库。对于机房这种排列规整的场景简单的距离剔除就够用——超出相机 far 值的机柜直接visible false能省不少性能。