feat(3d): 添加Scene3DContext优化3D场景状态管理
refactor(3d): 重构LODManager使用ref优化性能 feat(3d): 在RackModel中添加U位刻度标识 refactor(3d): 优化Scene组件相机控制和渲染设置 refactor(3d): 重构DeviceModel使用共享几何体和材质缓存 refactor(3d): 优化Rack3DVisualization使用Scene3DContext style(dashboard): 改进响应式布局和样式 perf(3d): 优化InstancedMesh性能减少内存占用
This commit is contained in:
zhang1106
@@ -1,21 +1,153 @@
|
||||
import React, { useState, useRef, useMemo, useEffect, useCallback } from 'react';
|
||||
import { useFrame } from '@react-three/fiber';
|
||||
import { useFrame, useThree } from '@react-three/fiber';
|
||||
import * as THREE from 'three';
|
||||
|
||||
const PERFORMANCE_MODE = true;
|
||||
|
||||
// 背板渲染控制常量
|
||||
const BACK_PANEL_CONFIG = {
|
||||
// 相机在正面时不渲染背板（z > threshold）
|
||||
visibilityThreshold: -0.3,
|
||||
// 距离阈值：太远时不渲染详细背板
|
||||
detailDistanceThreshold: 3.0,
|
||||
// 简化背板距离：超过此距离只显示基础背板
|
||||
simplifiedDistanceThreshold: 1.5,
|
||||
};
|
||||
|
||||
// ==================== 全局共享几何体和材质缓存 ====================
|
||||
// 这些资源只创建一次，所有设备组件共享，大幅减少显存占用
|
||||
|
||||
// 基础几何体（使用 scale 调整大小，避免重复创建）
|
||||
const SHARED_GEOMETRIES = {
|
||||
// 1x1x1 单位立方体，使用时通过 scale 调整尺寸
|
||||
box: new THREE.BoxGeometry(1, 1, 1),
|
||||
// 圆形几何体
|
||||
circle: new THREE.CircleGeometry(1, 16),
|
||||
// 圆柱体
|
||||
cylinder: new THREE.CylinderGeometry(1, 1, 1, 16),
|
||||
};
|
||||
|
||||
// 共享材质（按类型分类，避免重复创建相同材质）
|
||||
const SHARED_MATERIALS = {
|
||||
// 机身材质 - 深灰色哑光金属
|
||||
chassis: new THREE.MeshStandardMaterial({
|
||||
color: "#333333",
|
||||
roughness: 0.9,
|
||||
metalness: 0.3
|
||||
}),
|
||||
// 面板材质 - 灰色塑料
|
||||
panel: new THREE.MeshStandardMaterial({
|
||||
color: "#555555",
|
||||
roughness: 0.8,
|
||||
metalness: 0.1
|
||||
}),
|
||||
// 面板高亮材质 - 悬停/选中时使用
|
||||
panelHover: new THREE.MeshStandardMaterial({
|
||||
color: "#666666",
|
||||
roughness: 0.8,
|
||||
metalness: 0.1
|
||||
}),
|
||||
// LED 灯材质
|
||||
led: new THREE.MeshBasicMaterial({
|
||||
toneMapped: false
|
||||
}),
|
||||
// 状态灯底座
|
||||
ledBase: new THREE.MeshStandardMaterial({
|
||||
color: "#333333"
|
||||
}),
|
||||
// 深色面板
|
||||
darkPanel: new THREE.MeshStandardMaterial({
|
||||
color: "#1e293b",
|
||||
roughness: 0.7,
|
||||
metalness: 0.5
|
||||
}),
|
||||
// 硬盘托架
|
||||
driveBay: new THREE.MeshStandardMaterial({
|
||||
color: "#334155",
|
||||
roughness: 0.6,
|
||||
metalness: 0.4
|
||||
}),
|
||||
// 装饰条
|
||||
accent: new THREE.MeshStandardMaterial({
|
||||
color: "#000000",
|
||||
roughness: 0.2
|
||||
}),
|
||||
// 金属细节
|
||||
metalDetail: new THREE.MeshStandardMaterial({
|
||||
color: "#cbd5e1"
|
||||
}),
|
||||
// 网口
|
||||
networkPort: new THREE.MeshStandardMaterial({
|
||||
color: "#1e293b",
|
||||
roughness: 0.3
|
||||
}),
|
||||
// 网口发光
|
||||
networkLed: new THREE.MeshBasicMaterial({
|
||||
color: "#10b981",
|
||||
toneMapped: false
|
||||
}),
|
||||
// 电源
|
||||
powerSupply: new THREE.MeshStandardMaterial({
|
||||
color: "#374151",
|
||||
roughness: 0.5
|
||||
}),
|
||||
// 风扇
|
||||
fan: new THREE.MeshStandardMaterial({
|
||||
color: "#1f2937",
|
||||
roughness: 0.4
|
||||
}),
|
||||
// 散热孔
|
||||
vent: new THREE.MeshStandardMaterial({
|
||||
color: "#111827"
|
||||
}),
|
||||
};
|
||||
|
||||
// InstancedMesh 共享几何体
|
||||
const SHARED_INSTANCED_GEOMETRIES = {
|
||||
// 状态灯
|
||||
statusLight: new THREE.CircleGeometry(0.0015, 8),
|
||||
// 硬盘托架
|
||||
driveBay: new THREE.BoxGeometry(0.07, 0.035, 0.004),
|
||||
// 硬盘细节
|
||||
driveDetail: new THREE.BoxGeometry(0.015, 0.025, 0.002),
|
||||
// 存储托架
|
||||
storageBay: new THREE.BoxGeometry(0.08, 0.12, 0.004),
|
||||
// 存储细节
|
||||
storageDetail: new THREE.BoxGeometry(0.06, 0.08, 0.002),
|
||||
// 网口
|
||||
networkPort: new THREE.BoxGeometry(0.012, 0.008, 0.004),
|
||||
// 网口发光
|
||||
networkLed: new THREE.BoxGeometry(0.003, 0.002, 0.001),
|
||||
// SFP端口
|
||||
sfpPort: new THREE.BoxGeometry(0.02, 0.015, 0.005),
|
||||
// SFP内部
|
||||
sfpInner: new THREE.BoxGeometry(0.016, 0.011, 0.002),
|
||||
// SFP连接器
|
||||
sfpConnector: new THREE.BoxGeometry(0.01, 0.002, 0.008),
|
||||
// SFP指示灯
|
||||
sfpLed: new THREE.ConeGeometry(0.002, 0.004, 3),
|
||||
};
|
||||
|
||||
// InstancedMesh 共享材质
|
||||
const SHARED_INSTANCED_MATERIALS = {
|
||||
// 状态灯基础材质
|
||||
statusLight: new THREE.MeshBasicMaterial({ toneMapped: false }),
|
||||
// 硬盘托架
|
||||
driveBay: new THREE.MeshStandardMaterial({ color: '#334155', roughness: 0.6, metalness: 0.4 }),
|
||||
// 硬盘细节
|
||||
driveDetail: new THREE.MeshStandardMaterial({ color: '#1e293b' }),
|
||||
// 存储托架
|
||||
storageBay: new THREE.MeshStandardMaterial({ color: '#374151', roughness: 0.5 }),
|
||||
// 存储细节
|
||||
storageDetail: new THREE.MeshStandardMaterial({ color: '#4b5563' }),
|
||||
// 网口
|
||||
networkPort: new THREE.MeshStandardMaterial({ color: '#1e293b', roughness: 0.3 }),
|
||||
// 网口发光
|
||||
networkLed: new THREE.MeshBasicMaterial({ color: '#10b981', toneMapped: false }),
|
||||
};
|
||||
|
||||
const InstancedStatusLights = ({ count, positions, colors: statusColors, zOffset }) => {
|
||||
const meshRef = useRef();
|
||||
const colorArray = useMemo(() => {
|
||||
const arr = new Float32Array(count * 3);
|
||||
for (let i = 0; i < count; i++) {
|
||||
const color = new THREE.Color(statusColors[i] || '#22c55e');
|
||||
arr[i * 3] = color.r;
|
||||
arr[i * 3 + 1] = color.g;
|
||||
arr[i * 3 + 2] = color.b;
|
||||
}
|
||||
return arr;
|
||||
}, [count, statusColors]);
|
||||
|
||||
const dummy = useMemo(() => new THREE.Object3D(), []);
|
||||
|
||||
@@ -30,10 +162,30 @@ const InstancedStatusLights = ({ count, positions, colors: statusColors, zOffset
|
||||
}
|
||||
}, [count, positions, zOffset, dummy]);
|
||||
|
||||
// 修复：正确更新实例颜色
|
||||
useEffect(() => {
|
||||
if (meshRef.current) {
|
||||
for (let i = 0; i < count; i++) {
|
||||
const color = new THREE.Color(statusColors[i] || '#22c55e');
|
||||
meshRef.current.setColorAt(i, color);
|
||||
}
|
||||
if (meshRef.current.instanceColor) {
|
||||
meshRef.current.instanceColor.needsUpdate = true;
|
||||
}
|
||||
}
|
||||
}, [count, statusColors]);
|
||||
|
||||
// 资源清理
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (meshRef.current) {
|
||||
meshRef.current.dispose();
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<instancedMesh ref={meshRef} args={[undefined, undefined, count]}>
|
||||
<circleGeometry args={[0.0015, 8]} />
|
||||
<meshBasicMaterial toneMapped={false} />
|
||||
<instancedMesh ref={meshRef} args={[SHARED_INSTANCED_GEOMETRIES.statusLight, SHARED_INSTANCED_MATERIALS.statusLight, count]}>
|
||||
</instancedMesh>
|
||||
);
|
||||
};
|
||||
@@ -64,16 +216,20 @@ const InstancedDriveBays = ({ count, positions, color, hasDetail = true }) => {
|
||||
}
|
||||
}, [count, positions, hasDetail, dummy]);
|
||||
|
||||
// 资源清理
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (meshRef.current) meshRef.current.dispose();
|
||||
if (detailRef.current) detailRef.current.dispose();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<group>
|
||||
<instancedMesh ref={meshRef} args={[undefined, undefined, count]}>
|
||||
<boxGeometry args={[0.07, 0.035, 0.004]} />
|
||||
<meshStandardMaterial color={color || '#334155'} roughness={0.6} metalness={0.4} />
|
||||
<instancedMesh ref={meshRef} args={[SHARED_INSTANCED_GEOMETRIES.driveBay, SHARED_INSTANCED_MATERIALS.driveBay, count]}>
|
||||
</instancedMesh>
|
||||
{hasDetail && (
|
||||
<instancedMesh ref={detailRef} args={[undefined, undefined, count]}>
|
||||
<boxGeometry args={[0.015, 0.025, 0.002]} />
|
||||
<meshStandardMaterial color="#1e293b" />
|
||||
<instancedMesh ref={detailRef} args={[SHARED_INSTANCED_GEOMETRIES.driveDetail, SHARED_INSTANCED_MATERIALS.driveDetail, count]}>
|
||||
</instancedMesh>
|
||||
)}
|
||||
</group>
|
||||
@@ -106,15 +262,19 @@ const InstancedStorageBays = ({ count, positions, color }) => {
|
||||
}
|
||||
}, [count, positions, dummy]);
|
||||
|
||||
// 资源清理
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (meshRef.current) meshRef.current.dispose();
|
||||
if (detailRef.current) detailRef.current.dispose();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<group>
|
||||
<instancedMesh ref={meshRef} args={[undefined, undefined, count]}>
|
||||
<boxGeometry args={[0.095, 0.028, 0.005]} />
|
||||
<meshStandardMaterial color={color || '#334155'} metalness={0.6} roughness={0.4} />
|
||||
<instancedMesh ref={meshRef} args={[SHARED_INSTANCED_GEOMETRIES.storageBay, SHARED_INSTANCED_MATERIALS.storageBay, count]}>
|
||||
</instancedMesh>
|
||||
<instancedMesh ref={detailRef} args={[undefined, undefined, count]}>
|
||||
<boxGeometry args={[0.02, 0.015, 0.002]} />
|
||||
<meshStandardMaterial color="#000" />
|
||||
<instancedMesh ref={detailRef} args={[SHARED_INSTANCED_GEOMETRIES.storageDetail, SHARED_INSTANCED_MATERIALS.storageDetail, count]}>
|
||||
</instancedMesh>
|
||||
</group>
|
||||
);
|
||||
@@ -172,24 +332,25 @@ const InstancedRJ45Ports = ({ count, positions, statuses, frontZ }) => {
|
||||
return statuses.map(s => s !== 'disconnected' ? (s === 'fault' ? '#ef4444' : '#22c55e') : '#475569');
|
||||
}, [statuses]);
|
||||
|
||||
// 资源清理
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (meshRef.current) meshRef.current.dispose();
|
||||
if (innerRef.current) innerRef.current.dispose();
|
||||
if (tabRef.current) tabRef.current.dispose();
|
||||
if (ledRef.current) ledRef.current.dispose();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<group>
|
||||
<instancedMesh ref={meshRef} args={[undefined, undefined, count]}>
|
||||
<boxGeometry args={[0.011, 0.011, 0.004]} />
|
||||
<meshStandardMaterial color="#cbd5e1" metalness={0.8} />
|
||||
<instancedMesh ref={meshRef} args={[SHARED_INSTANCED_GEOMETRIES.networkPort, SHARED_INSTANCED_MATERIALS.networkPort, count]}>
|
||||
</instancedMesh>
|
||||
<instancedMesh ref={innerRef} args={[undefined, undefined, count]}>
|
||||
<boxGeometry args={[0.009, 0.009, 0.002]} />
|
||||
<meshStandardMaterial color="#000" />
|
||||
<instancedMesh ref={innerRef} args={[SHARED_INSTANCED_GEOMETRIES.networkPort, SHARED_INSTANCED_MATERIALS.networkPort, count]}>
|
||||
</instancedMesh>
|
||||
<instancedMesh ref={tabRef} args={[undefined, undefined, count]}>
|
||||
<boxGeometry args={[0.007, 0.001, 0.001]} />
|
||||
<meshBasicMaterial color="#facc15" />
|
||||
<instancedMesh ref={tabRef} args={[SHARED_INSTANCED_GEOMETRIES.networkLed, SHARED_INSTANCED_MATERIALS.networkLed, count]}>
|
||||
</instancedMesh>
|
||||
<instancedMesh ref={ledRef} args={[undefined, undefined, count]}>
|
||||
<boxGeometry args={[0.002, 0.002, 0.001]} />
|
||||
<meshBasicMaterial toneMapped={false} />
|
||||
<instancedBufferAttribute attach="geometry-attributes-color" args={[new Float32Array(count * 3), 3]} />
|
||||
<instancedMesh ref={ledRef} args={[SHARED_INSTANCED_GEOMETRIES.networkLed, SHARED_INSTANCED_MATERIALS.networkLed, count]}>
|
||||
</instancedMesh>
|
||||
</group>
|
||||
);
|
||||
@@ -243,28 +404,36 @@ const InstancedSFPports = ({ count, positions, statuses, frontZ }) => {
|
||||
}
|
||||
}, [count, positions, statuses, frontZ, dummy]);
|
||||
|
||||
const ledColors = useMemo(() => {
|
||||
return positions.map((_, i) => statuses[i] !== 'disconnected' ? '#22c55e' : '#475569');
|
||||
}, [positions, statuses]);
|
||||
// 修复：正确更新SFP指示灯颜色
|
||||
useEffect(() => {
|
||||
if (ledRef.current) {
|
||||
for (let i = 0; i < count; i++) {
|
||||
const isConnected = statuses[i] !== 'disconnected';
|
||||
const color = new THREE.Color(isConnected ? '#22c55e' : '#475569');
|
||||
ledRef.current.setColorAt(i, color);
|
||||
}
|
||||
if (ledRef.current.instanceColor) {
|
||||
ledRef.current.instanceColor.needsUpdate = true;
|
||||
}
|
||||
}
|
||||
}, [count, statuses]);
|
||||
|
||||
// 资源清理
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (meshRef.current) meshRef.current.dispose();
|
||||
if (innerRef.current) innerRef.current.dispose();
|
||||
if (connectorRef.current) connectorRef.current.dispose();
|
||||
if (ledRef.current) ledRef.current.dispose();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<group>
|
||||
<instancedMesh ref={meshRef} args={[undefined, undefined, count]}>
|
||||
<boxGeometry args={[0.02, 0.015, 0.005]} />
|
||||
<meshStandardMaterial color="#cbd5e1" metalness={0.9} roughness={0.3} />
|
||||
</instancedMesh>
|
||||
<instancedMesh ref={innerRef} args={[undefined, undefined, count]}>
|
||||
<boxGeometry args={[0.016, 0.011, 0.002]} />
|
||||
<meshStandardMaterial color="#1e293b" />
|
||||
</instancedMesh>
|
||||
<instancedMesh ref={connectorRef} args={[undefined, undefined, count]}>
|
||||
<boxGeometry args={[0.01, 0.002, 0.008]} />
|
||||
<meshStandardMaterial color="#3b82f6" />
|
||||
</instancedMesh>
|
||||
<instancedMesh ref={ledRef} args={[undefined, undefined, count]}>
|
||||
<coneGeometry args={[0.002, 0.004, 3]} />
|
||||
<meshBasicMaterial />
|
||||
</instancedMesh>
|
||||
<instancedMesh ref={meshRef} args={[SHARED_INSTANCED_GEOMETRIES.sfpPort, SHARED_INSTANCED_MATERIALS.networkPort, count]} />
|
||||
<instancedMesh ref={innerRef} args={[SHARED_INSTANCED_GEOMETRIES.sfpInner, SHARED_INSTANCED_MATERIALS.driveDetail, count]} />
|
||||
<instancedMesh ref={connectorRef} args={[SHARED_INSTANCED_GEOMETRIES.sfpConnector, SHARED_INSTANCED_MATERIALS.metalDetail, count]} />
|
||||
<instancedMesh ref={ledRef} args={[SHARED_INSTANCED_GEOMETRIES.sfpLed, SHARED_INSTANCED_MATERIALS.networkLed, count]} />
|
||||
</group>
|
||||
);
|
||||
};
|
||||
@@ -326,23 +495,63 @@ const FirewallFace = ({ device, height, frontZ, isSelected }) => {
|
||||
|
||||
const DeviceModel = ({ device, rackHeight, isSelected, onClick, onHover, uHeight: propUHeight, position, rackDepth, slideEnabled = true }) => {
|
||||
const mesh = useRef();
|
||||
const groupRef = useRef();
|
||||
const [hovered, setHover] = useState(false);
|
||||
const [isExtended, setIsExtended] = useState(false);
|
||||
const [currentZ, setCurrentZ] = useState(0);
|
||||
// 使用 ref 存储动画状态，避免每帧触发 React 状态更新
|
||||
const isExtendedRef = useRef(false);
|
||||
const currentZRef = useRef(0);
|
||||
// 使用 ref 避免重复设置悬停状态
|
||||
const isHoveredRef = useRef(false);
|
||||
|
||||
// 背板渲染控制状态
|
||||
const [backPanelLevel, setBackPanelLevel] = useState(0); // 0: 不渲染, 1: 简化, 2: 完整
|
||||
const { camera } = useThree();
|
||||
const frameCount = useRef(0);
|
||||
|
||||
// 使用传入的 uHeight (默认为 0.04445m)
|
||||
const uHeight = propUHeight || 0.04445;
|
||||
const depth = rackDepth || 1.0; // 机柜深度，默认1米
|
||||
|
||||
// 滑轨动画 - 仅在展开时运行且slideEnabled为true
|
||||
// 使用 ref 直接操作 mesh，避免 React 状态更新
|
||||
useFrame(() => {
|
||||
if (!slideEnabled || (!isExtended && Math.abs(currentZ) < 0.01)) {
|
||||
if (currentZ !== 0) setCurrentZ(0);
|
||||
if (!slideEnabled || (!isExtendedRef.current && Math.abs(currentZRef.current) < 0.001)) {
|
||||
return;
|
||||
}
|
||||
const targetZ = isExtended ? 0.6 : 0;
|
||||
const targetZ = isExtendedRef.current ? 0.6 : 0;
|
||||
const lerpFactor = 0.1;
|
||||
setCurrentZ(prev => prev + (targetZ - prev) * lerpFactor);
|
||||
currentZRef.current += (targetZ - currentZRef.current) * lerpFactor;
|
||||
|
||||
// 直接操作 group 的 position，不通过 React state
|
||||
if (groupRef.current) {
|
||||
groupRef.current.position.z = currentZRef.current;
|
||||
}
|
||||
});
|
||||
|
||||
// 背板渲染控制 - 根据相机位置动态调整
|
||||
// 只在相机绕到背面时才渲染背板
|
||||
useFrame(() => {
|
||||
// 每10帧检查一次，减少计算频率
|
||||
frameCount.current++;
|
||||
if (frameCount.current % 10 !== 0) return;
|
||||
|
||||
if (!groupRef.current) return;
|
||||
|
||||
// 获取相机相对设备的位置
|
||||
const deviceWorldPos = new THREE.Vector3();
|
||||
groupRef.current.getWorldPosition(deviceWorldPos);
|
||||
|
||||
const cameraZ = camera.position.z;
|
||||
|
||||
// 简单逻辑：相机在正面（z > threshold）时不渲染背板
|
||||
// 相机在背面（z <= threshold）时渲染完整背板
|
||||
const shouldShowBackPanel = cameraZ <= BACK_PANEL_CONFIG.visibilityThreshold;
|
||||
const newLevel = shouldShowBackPanel ? 2 : 0;
|
||||
|
||||
// 只有当级别变化时才更新状态
|
||||
if (newLevel !== backPanelLevel) {
|
||||
setBackPanelLevel(newLevel);
|
||||
}
|
||||
});
|
||||
|
||||
// 尺寸定义 (适配标准 0.6m 机柜)
|
||||
@@ -617,108 +826,135 @@ const DeviceModel = ({ device, rackHeight, isSelected, onClick, onHover, uHeight
|
||||
);
|
||||
};
|
||||
|
||||
// 渲染设备背板
|
||||
// 渲染简化版背板（只显示基础背板）
|
||||
const renderSimplifiedBackPanel = (backZ) => {
|
||||
return (
|
||||
<group position={[0, 0, backZ]} rotation={[0, Math.PI, 0]}>
|
||||
{/* 基础背板 - 使用共享几何体 */}
|
||||
<mesh
|
||||
position={[0, 0, 0.001]}
|
||||
geometry={SHARED_GEOMETRIES.box}
|
||||
material={SHARED_MATERIALS.panel}
|
||||
scale={[chassisWidth, height - gap, 0.002]}
|
||||
/>
|
||||
</group>
|
||||
);
|
||||
};
|
||||
|
||||
// 渲染完整版背板（包含 PSU、风扇、网卡等细节）
|
||||
const renderFullBackPanel = (backZ) => {
|
||||
return (
|
||||
<group position={[0, 0, backZ]} rotation={[0, Math.PI, 0]}>
|
||||
{/* 基础背板 - 透明玻璃质感 */}
|
||||
<mesh position={[0, 0, 0.001]}>
|
||||
<boxGeometry args={[chassisWidth, height - gap, 0.002]} />
|
||||
<meshStandardMaterial
|
||||
color="#94a3b8"
|
||||
transparent
|
||||
opacity={0.3}
|
||||
roughness={0.2}
|
||||
metalness={0.8}
|
||||
/>
|
||||
</mesh>
|
||||
|
||||
{/* 电源模块 (PSU) - 左侧 */}
|
||||
<group position={[0.25, 0, 0.002]}>
|
||||
{[-0.02, 0.02].map((yOffset, i) => (
|
||||
<group key={i} position={[0, height > 0.15 ? yOffset * 2 : 0, 0]}>
|
||||
{(height > 0.15 || i === 0) && (
|
||||
<group position={[i === 1 && height <= 0.15 ? -0.06 : 0, 0, 0]}>
|
||||
{/* PSU 面板 */}
|
||||
<mesh>
|
||||
<boxGeometry args={[0.05, height > 0.15 ? 0.04 : 0.08, 0.004]} />
|
||||
<meshStandardMaterial color="#94a3b8" metalness={0.8} roughness={0.4} />
|
||||
</mesh>
|
||||
{/* 把手 */}
|
||||
<mesh position={[0, 0, 0.004]}>
|
||||
<boxGeometry args={[0.01, 0.02, 0.004]} />
|
||||
<meshStandardMaterial color="#000000" />
|
||||
</mesh>
|
||||
{/* 电源插口 */}
|
||||
<mesh position={[0.015, 0, 0.002]}>
|
||||
<boxGeometry args={[0.012, 0.01, 0.002]} />
|
||||
<meshStandardMaterial color="#1a202c" />
|
||||
</mesh>
|
||||
{/* 状态灯 */}
|
||||
<mesh position={[-0.015, 0.01, 0.002]}>
|
||||
<circleGeometry args={[0.002, 8]} />
|
||||
<meshBasicMaterial color="#22c55e" />
|
||||
</mesh>
|
||||
</group>
|
||||
)}
|
||||
</group>
|
||||
))}
|
||||
</group>
|
||||
|
||||
{/* 风扇模块 (Fan Modules) - 中间 */}
|
||||
<group position={[0, 0, 0.002]}>
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<group key={i} position={[-0.1 + i * 0.1, 0, 0]}>
|
||||
{/* 风扇网罩 */}
|
||||
<mesh>
|
||||
<boxGeometry args={[0.08, height - 0.03, 0.001]} />
|
||||
<meshStandardMaterial color="#1e293b" />
|
||||
</mesh>
|
||||
{/* 风扇叶片 */}
|
||||
<mesh position={[0, 0, 0.001]}>
|
||||
<circleGeometry args={[Math.min(0.035, (height-0.03)/2), 8]} />
|
||||
<meshBasicMaterial color="#334155" />
|
||||
</mesh>
|
||||
{/* 红色拉手 */}
|
||||
<mesh position={[0, -0.01, 0.003]}>
|
||||
<boxGeometry args={[0.01, 0.02, 0.002]} />
|
||||
<meshStandardMaterial color="#ef4444" />
|
||||
</mesh>
|
||||
</group>
|
||||
))}
|
||||
</group>
|
||||
|
||||
{/* 网卡/扩展模块 (PCIe/LOM) - 右侧 */}
|
||||
<group position={[-0.25, 0, 0.002]}>
|
||||
{Array.from({ length: 2 }).map((_, i) => (
|
||||
<group key={i} position={[i * 0.08, 0, 0]}>
|
||||
<mesh>
|
||||
<boxGeometry args={[0.02, height - 0.02, 0.001]} />
|
||||
<meshStandardMaterial color="#cbd5e1" metalness={0.9} />
|
||||
</mesh>
|
||||
{/* 端口 */}
|
||||
<mesh position={[0, 0.01, 0.002]}>
|
||||
<boxGeometry args={[0.012, 0.012, 0.002]} />
|
||||
<meshStandardMaterial color="#000000" />
|
||||
</mesh>
|
||||
<mesh position={[0, -0.01, 0.002]}>
|
||||
<boxGeometry args={[0.012, 0.012, 0.002]} />
|
||||
<meshStandardMaterial color="#000000" />
|
||||
</mesh>
|
||||
</group>
|
||||
))}
|
||||
</group>
|
||||
</group>
|
||||
);
|
||||
};
|
||||
|
||||
// 根据级别渲染背板
|
||||
const renderBackPanel = () => {
|
||||
// Back face Z position (flush with back of chassis)
|
||||
// Back face Z position
|
||||
const backZ = chassisZ - chassisDepth / 2;
|
||||
|
||||
// Rotate 180 deg to face backwards
|
||||
return (
|
||||
<group position={[0, 0, backZ]} rotation={[0, Math.PI, 0]}>
|
||||
{/* 基础背板 - 透明玻璃质感 (Reduced quality for performance) */}
|
||||
<mesh position={[0, 0, 0.001]}>
|
||||
<boxGeometry args={[chassisWidth, height - gap, 0.002]} />
|
||||
<meshStandardMaterial
|
||||
color="#94a3b8"
|
||||
transparent
|
||||
opacity={0.3}
|
||||
roughness={0.2}
|
||||
metalness={0.8}
|
||||
/>
|
||||
</mesh>
|
||||
|
||||
{/* 电源模块 (PSU) - 左侧 (从背面看是右侧，但我们旋转了) */}
|
||||
{/* 2个 PSU 垂直排列或并排 */}
|
||||
<group position={[0.25, 0, 0.002]}>
|
||||
{[-0.02, 0.02].map((yOffset, i) => (
|
||||
<group key={i} position={[0, height > 0.15 ? yOffset * 2 : 0, 0]}>
|
||||
{/* 如果高度够大(>1U)，垂直排列，否则只显示一个或者水平排列 */}
|
||||
{/* 简化：1U设备只显示左边一个，2U显示两个 */}
|
||||
{(height > 0.15 || i === 0) && (
|
||||
<group position={[i === 1 && height <= 0.15 ? -0.06 : 0, 0, 0]}>
|
||||
{/* PSU 面板 */}
|
||||
<mesh>
|
||||
<boxGeometry args={[0.05, height > 0.15 ? 0.04 : 0.08, 0.004]} />
|
||||
<meshStandardMaterial color="#94a3b8" metalness={0.8} roughness={0.4} />
|
||||
</mesh>
|
||||
{/* 把手 */}
|
||||
<mesh position={[0, 0, 0.004]}>
|
||||
<boxGeometry args={[0.01, 0.02, 0.004]} />
|
||||
<meshStandardMaterial color="#000000" />
|
||||
</mesh>
|
||||
{/* 电源插口 C13 */}
|
||||
<mesh position={[0.015, 0, 0.002]}>
|
||||
<boxGeometry args={[0.012, 0.01, 0.002]} />
|
||||
<meshStandardMaterial color="#1a202c" />
|
||||
</mesh>
|
||||
{/* 状态灯 */}
|
||||
<mesh position={[-0.015, 0.01, 0.002]}>
|
||||
<circleGeometry args={[0.002, 8]} />
|
||||
<meshBasicMaterial color="#22c55e" />
|
||||
</mesh>
|
||||
</group>
|
||||
)}
|
||||
</group>
|
||||
))}
|
||||
</group>
|
||||
|
||||
{/* 风扇模块 (Fan Modules) - 中间 */}
|
||||
{/* 3-4个风扇阵列 */}
|
||||
<group position={[0, 0, 0.002]}>
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<group key={i} position={[-0.1 + i * 0.1, 0, 0]}>
|
||||
{/* 风扇网罩 */}
|
||||
<mesh>
|
||||
<boxGeometry args={[0.08, height - 0.03, 0.001]} />
|
||||
<meshStandardMaterial color="#1e293b" />
|
||||
</mesh>
|
||||
{/* 风扇叶片模拟 (纹理) */}
|
||||
<mesh position={[0, 0, 0.001]}>
|
||||
<circleGeometry args={[Math.min(0.035, (height-0.03)/2), 8]} />
|
||||
<meshBasicMaterial color="#334155" />
|
||||
</mesh>
|
||||
{/* 红色拉手 (热插拔) */}
|
||||
<mesh position={[0, -0.01, 0.003]}>
|
||||
<boxGeometry args={[0.01, 0.02, 0.002]} />
|
||||
<meshStandardMaterial color="#ef4444" />
|
||||
</mesh>
|
||||
</group>
|
||||
))}
|
||||
</group>
|
||||
|
||||
{/* 网卡/扩展模块 (PCIe/LOM) - 右侧 */}
|
||||
<group position={[-0.25, 0, 0.002]}>
|
||||
{/* 竖向 PCIe 挡板 */}
|
||||
{Array.from({ length: 2 }).map((_, i) => (
|
||||
<group key={i} position={[i * 0.08, 0, 0]}>
|
||||
<mesh>
|
||||
<boxGeometry args={[0.02, height - 0.02, 0.001]} />
|
||||
<meshStandardMaterial color="#cbd5e1" metalness={0.9} />
|
||||
</mesh>
|
||||
{/* 端口 (SFP+ or RJ45) */}
|
||||
<mesh position={[0, 0.01, 0.002]}>
|
||||
<boxGeometry args={[0.012, 0.012, 0.002]} />
|
||||
<meshStandardMaterial color="#000000" />
|
||||
</mesh>
|
||||
<mesh position={[0, -0.01, 0.002]}>
|
||||
<boxGeometry args={[0.012, 0.012, 0.002]} />
|
||||
<meshStandardMaterial color="#000000" />
|
||||
</mesh>
|
||||
</group>
|
||||
))}
|
||||
</group>
|
||||
</group>
|
||||
);
|
||||
// 根据背板级别决定渲染内容
|
||||
switch (backPanelLevel) {
|
||||
case 0:
|
||||
// 不渲染背板
|
||||
return null;
|
||||
case 1:
|
||||
// 简化背板
|
||||
return renderSimplifiedBackPanel(backZ);
|
||||
case 2:
|
||||
// 完整背板
|
||||
return renderFullBackPanel(backZ);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
const renderDeviceFace = () => {
|
||||
const type = device.type?.toLowerCase() || '';
|
||||
@@ -749,41 +985,46 @@ const DeviceModel = ({ device, rackHeight, isSelected, onClick, onHover, uHeight
|
||||
return (
|
||||
<group position={position || [0, 0, 0]}>
|
||||
<group
|
||||
position={[0, 0, currentZ]}
|
||||
ref={groupRef}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setIsExtended(!isExtended);
|
||||
isExtendedRef.current = !isExtendedRef.current;
|
||||
onClick && onClick(device);
|
||||
}}
|
||||
onPointerOver={(e) => {
|
||||
e.stopPropagation();
|
||||
setHover(true);
|
||||
onHover && onHover(device);
|
||||
// 使用 ref 避免重复设置状态
|
||||
if (!isHoveredRef.current) {
|
||||
isHoveredRef.current = true;
|
||||
setHover(true);
|
||||
onHover && onHover(device);
|
||||
}
|
||||
}}
|
||||
onPointerOut={(e) => {
|
||||
setHover(false);
|
||||
onHover && onHover(null);
|
||||
// 重置 ref 并更新状态
|
||||
if (isHoveredRef.current) {
|
||||
isHoveredRef.current = false;
|
||||
setHover(false);
|
||||
onHover && onHover(null);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{/* 机身 (Chassis) - 深色金属 */}
|
||||
<mesh ref={mesh} position={[0, 0, chassisZ]}>
|
||||
<boxGeometry args={[chassisWidth, height - gap, chassisDepth]} />
|
||||
<meshStandardMaterial
|
||||
color="#333333" // 深灰色哑光金属
|
||||
roughness={0.9} // 哑光
|
||||
metalness={0.3}
|
||||
/>
|
||||
</mesh>
|
||||
{/* 机身 (Chassis) - 使用共享几何体和材质 */}
|
||||
<mesh
|
||||
ref={mesh}
|
||||
position={[0, 0, chassisZ]}
|
||||
geometry={SHARED_GEOMETRIES.box}
|
||||
material={SHARED_MATERIALS.chassis}
|
||||
scale={[chassisWidth, height - gap, chassisDepth]}
|
||||
/>
|
||||
|
||||
{/* 前面板底座 (Front Panel Base) */}
|
||||
<mesh position={[0, 0, panelZ]}>
|
||||
<boxGeometry args={[panelWidth, height - gap, panelDepth]} />
|
||||
<meshStandardMaterial
|
||||
color={hovered || isSelected ? "#666666" : "#555555"} // 稍浅的灰色塑料质感
|
||||
roughness={0.8}
|
||||
metalness={0.1}
|
||||
/>
|
||||
</mesh>
|
||||
{/* 前面板底座 (Front Panel Base) - 使用共享资源 */}
|
||||
<mesh
|
||||
position={[0, 0, panelZ]}
|
||||
geometry={SHARED_GEOMETRIES.box}
|
||||
material={hovered || isSelected ? SHARED_MATERIALS.panelHover : SHARED_MATERIALS.panel}
|
||||
scale={[panelWidth, height - gap, panelDepth]}
|
||||
/>
|
||||
|
||||
{/* 告警时的红色辉光 (设备两侧) */}
|
||||
{(device.status === 'error' || device.status === 'fault') && (
|
||||
@@ -815,14 +1056,16 @@ const DeviceModel = ({ device, rackHeight, isSelected, onClick, onHover, uHeight
|
||||
</Text>
|
||||
)} */}
|
||||
|
||||
{/* 状态指示灯 (统一位置) */}
|
||||
{/* 状态指示灯 (统一位置) - 使用共享几何体 */}
|
||||
<group position={[panelWidth/2 - 0.03, 0, frontZ + 0.01]}>
|
||||
{/* 灯座 */}
|
||||
<mesh position={[0, 0, -0.002]}>
|
||||
<circleGeometry args={[0.01, 16]} />
|
||||
<meshStandardMaterial color="#333" />
|
||||
</mesh>
|
||||
{/* 发光体 */}
|
||||
<mesh
|
||||
position={[0, 0, -0.002]}
|
||||
geometry={SHARED_GEOMETRIES.circle}
|
||||
material={SHARED_MATERIALS.ledBase}
|
||||
scale={[0.01, 0.01, 1]}
|
||||
/>
|
||||
{/* 发光体 - 需要动态颜色，使用克隆材质 */}
|
||||
<mesh>
|
||||
<circleGeometry args={[0.006, 16]} />
|
||||
<meshBasicMaterial color={statusColor} toneMapped={false} />
|
||||
@@ -834,4 +1077,45 @@ const DeviceModel = ({ device, rackHeight, isSelected, onClick, onHover, uHeight
|
||||
);
|
||||
};
|
||||
|
||||
export default DeviceModel;
|
||||
// 使用 React.memo 优化，避免不必要的重渲染
|
||||
// 自定义比较函数：只在关键属性变化时才重新渲染
|
||||
const DeviceModelMemo = React.memo(DeviceModel, (prevProps, nextProps) => {
|
||||
// 比较设备 ID
|
||||
if (prevProps.device?.id !== nextProps.device?.id) return false;
|
||||
if (prevProps.device?.deviceId !== nextProps.device?.deviceId) return false;
|
||||
|
||||
// 比较选中状态
|
||||
if (prevProps.isSelected !== nextProps.isSelected) return false;
|
||||
|
||||
// 比较滑出动画开关
|
||||
if (prevProps.slideEnabled !== nextProps.slideEnabled) return false;
|
||||
|
||||
// 比较位置（使用 JSON.stringify 简单比较）
|
||||
if (JSON.stringify(prevProps.position) !== JSON.stringify(nextProps.position)) return false;
|
||||
|
||||
// 比较机柜相关属性
|
||||
if (prevProps.rackHeight !== nextProps.rackHeight) return false;
|
||||
if (prevProps.rackDepth !== nextProps.rackDepth) return false;
|
||||
if (prevProps.uHeight !== nextProps.uHeight) return false;
|
||||
|
||||
// 修复：比较设备状态，确保状态变化时正确重渲染
|
||||
if (prevProps.device?.status !== nextProps.device?.status) return false;
|
||||
|
||||
// 修复：比较连接线，确保端口状态变化时正确重渲染
|
||||
const prevCables = prevProps.device?.cables;
|
||||
const nextCables = nextProps.device?.cables;
|
||||
if (Array.isArray(prevCables) && Array.isArray(nextCables)) {
|
||||
if (prevCables.length !== nextCables.length) return false;
|
||||
// 简单比较：检查每个连接线的关键属性
|
||||
for (let i = 0; i < prevCables.length; i++) {
|
||||
if (prevCables[i]?.status !== nextCables[i]?.status) return false;
|
||||
}
|
||||
} else if (prevCables !== nextCables) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// 以上都相同，不需要重新渲染
|
||||
return true;
|
||||
});
|
||||
|
||||
export default DeviceModelMemo;
|
||||
|
||||
@@ -80,7 +80,7 @@ const createMediumDeviceMesh = (device, uHeight, rackDepth, deviceColor, statusC
|
||||
</group>
|
||||
<group position={[0.05, 0, frontZ + 0.006]}>
|
||||
{Array.from({ length: is2U ? 4 : 2 }).map((_, i) => (
|
||||
<mesh key={i} position={[(i - 1) * 0.08, 0, 0]}>
|
||||
<mesh key={`drive-bay-${device.id || 'unknown'}-${i}`} position={[(i - 1) * 0.08, 0, 0]}>
|
||||
<boxGeometry args={[0.06, 0.03, 0.004]} />
|
||||
<meshStandardMaterial color="#334155" roughness={0.6} />
|
||||
</mesh>
|
||||
@@ -105,24 +105,56 @@ const LODManager = ({
|
||||
level = LOD_LEVELS.HIGH
|
||||
}) => {
|
||||
const groupRef = useRef();
|
||||
const highDetailRef = useRef();
|
||||
const mediumDetailRef = useRef();
|
||||
const lowDetailRef = useRef();
|
||||
const { camera } = useThree();
|
||||
const [lodLevel, setLodLevel] = React.useState(LOD_LEVELS.HIGH);
|
||||
// 使用 ref 存储 LOD 级别，避免 React 状态更新
|
||||
const lodLevelRef = useRef(LOD_LEVELS.HIGH);
|
||||
const distanceRef = useRef(0);
|
||||
// 帧计数器，用于节流
|
||||
const frameCount = useRef(0);
|
||||
// 用于强制重新渲染的 state（仅在必要时更新）
|
||||
const [, forceUpdate] = React.useReducer(x => x + 1, 0);
|
||||
|
||||
useFrame(() => {
|
||||
if (groupRef.current) {
|
||||
const distance = camera.position.distanceTo(groupRef.current.position);
|
||||
distanceRef.current = distance;
|
||||
|
||||
let newLevel = LOD_LEVELS.HIGH;
|
||||
if (distance > LOD_DISTANCES.MEDIUM) {
|
||||
newLevel = LOD_LEVELS.LOW;
|
||||
} else if (distance > LOD_DISTANCES.HIGH) {
|
||||
newLevel = LOD_LEVELS.MEDIUM;
|
||||
if (!groupRef.current) return;
|
||||
|
||||
// 节流：每5帧检查一次
|
||||
frameCount.current++;
|
||||
if (frameCount.current % 5 !== 0) return;
|
||||
|
||||
const distance = camera.position.distanceTo(groupRef.current.position);
|
||||
distanceRef.current = distance;
|
||||
|
||||
// 添加缓冲避免频繁切换（10% 缓冲）
|
||||
const buffer = 0.1;
|
||||
const highThreshold = LOD_DISTANCES.HIGH * (1 + buffer);
|
||||
const mediumThreshold = LOD_DISTANCES.MEDIUM * (1 + buffer);
|
||||
|
||||
let newLevel = LOD_LEVELS.HIGH;
|
||||
if (distance > mediumThreshold) {
|
||||
newLevel = LOD_LEVELS.LOW;
|
||||
} else if (distance > highThreshold) {
|
||||
newLevel = LOD_LEVELS.MEDIUM;
|
||||
}
|
||||
|
||||
// 只有当级别变化时才更新
|
||||
if (newLevel !== lodLevelRef.current) {
|
||||
lodLevelRef.current = newLevel;
|
||||
// 直接操作 ref 切换可见性，避免频繁的 React 重渲染
|
||||
if (highDetailRef.current) {
|
||||
highDetailRef.current.visible = newLevel === LOD_LEVELS.HIGH;
|
||||
}
|
||||
|
||||
if (newLevel !== lodLevel) {
|
||||
setLodLevel(newLevel);
|
||||
if (mediumDetailRef.current) {
|
||||
mediumDetailRef.current.visible = newLevel === LOD_LEVELS.MEDIUM;
|
||||
}
|
||||
if (lowDetailRef.current) {
|
||||
lowDetailRef.current.visible = newLevel === LOD_LEVELS.LOW;
|
||||
}
|
||||
// 偶尔强制更新以确保同步（每30帧）
|
||||
if (frameCount.current % 30 === 0) {
|
||||
forceUpdate();
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -131,20 +163,22 @@ const LODManager = ({
|
||||
return children;
|
||||
}
|
||||
|
||||
const renderLODMesh = () => {
|
||||
switch (lodLevel) {
|
||||
case LOD_LEVELS.LOW:
|
||||
return createSimplifiedDeviceMesh(device, uHeight, rackDepth, deviceColor, statusColor);
|
||||
case LOD_LEVELS.MEDIUM:
|
||||
return createMediumDeviceMesh(device, uHeight, rackDepth, deviceColor, statusColor);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<group ref={groupRef} position={position}>
|
||||
{lodLevel === LOD_LEVELS.HIGH ? children : renderLODMesh()}
|
||||
{/* 高细节模型 - 默认显示 */}
|
||||
<group ref={highDetailRef} visible={true}>
|
||||
{children}
|
||||
</group>
|
||||
|
||||
{/* 中等细节模型 */}
|
||||
<group ref={mediumDetailRef} visible={false}>
|
||||
{createMediumDeviceMesh(device, uHeight, rackDepth, deviceColor, statusColor)}
|
||||
</group>
|
||||
|
||||
{/* 低细节模型 */}
|
||||
<group ref={lowDetailRef} visible={false}>
|
||||
{createSimplifiedDeviceMesh(device, uHeight, rackDepth, deviceColor, statusColor)}
|
||||
</group>
|
||||
</group>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import * as THREE from 'three';
|
||||
import DeviceModel from './DeviceModel';
|
||||
import LODManager, { LOD_LEVELS } from './LODManager';
|
||||
|
||||
@@ -49,6 +50,96 @@ const RackModel = ({
|
||||
return colors.default;
|
||||
};
|
||||
|
||||
// 设备组的Y偏移量（与下方设备渲染的偏移一致）
|
||||
const deviceGroupOffset = 0.1;
|
||||
|
||||
// 生成U位刻度标识 - 写在机柜左右两侧柱子上
|
||||
const uLabels = useMemo(() => {
|
||||
const labels = [];
|
||||
// 每一个U位都显示数字，从底部开始（U1在底部）
|
||||
for (let u = 1; u <= rackHeight; u += 1) {
|
||||
// 计算U位标识的Y坐标，需要加上设备组的偏移量
|
||||
const yPos = (u - 1) * uHeight + uHeight / 2 + deviceGroupOffset;
|
||||
|
||||
// 创建数字纹理 - 白色数字在深色背景上更清晰
|
||||
const createNumberTexture = (num) => {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = 128;
|
||||
canvas.height = 128;
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
// 清除画布
|
||||
ctx.clearRect(0, 0, 128, 128);
|
||||
|
||||
// 绘制白色数字
|
||||
ctx.fillStyle = '#ffffff';
|
||||
ctx.font = 'bold 80px Arial';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.fillText(num.toString(), 64, 64);
|
||||
|
||||
return new THREE.CanvasTexture(canvas);
|
||||
};
|
||||
|
||||
const leftTexture = createNumberTexture(u);
|
||||
const rightTexture = createNumberTexture(u);
|
||||
|
||||
// 创建平面几何体显示数字 - 每5U使用稍大的尺寸
|
||||
const isMajorU = u % 5 === 0;
|
||||
const planeSize = isMajorU ? 0.035 : 0.025;
|
||||
const planeGeometry = new THREE.PlaneGeometry(planeSize, planeSize);
|
||||
|
||||
// 前侧柱子的位置: [-width/2 + postWidth/2, y, depth/2 - postWidth/2]
|
||||
const leftPostX = -width/2 + postWidth/2;
|
||||
const rightPostX = width/2 - postWidth/2;
|
||||
const frontPostZ = depth/2 - postWidth/2;
|
||||
|
||||
// 刻度线颜色：每5U使用醒目的黄色，其他使用灰色
|
||||
const tickColor = isMajorU ? '#fbbf24' : '#6b7280';
|
||||
const tickHeight = isMajorU ? 0.002 : 0.001;
|
||||
|
||||
labels.push(
|
||||
<group key={`u-label-${u}`}>
|
||||
{/* 左前侧柱子上的U位标识 - 贴在柱子正侧面（面向前方） */}
|
||||
<mesh
|
||||
position={[leftPostX, yPos, frontPostZ + postWidth/2 + 0.001]}
|
||||
geometry={planeGeometry}
|
||||
>
|
||||
<meshBasicMaterial
|
||||
map={leftTexture}
|
||||
transparent={true}
|
||||
opacity={1}
|
||||
side={THREE.DoubleSide}
|
||||
/>
|
||||
</mesh>
|
||||
{/* 右前侧柱子上的U位标识 - 贴在柱子正侧面（面向前方） */}
|
||||
<mesh
|
||||
position={[rightPostX, yPos, frontPostZ + postWidth/2 + 0.001]}
|
||||
geometry={planeGeometry}
|
||||
>
|
||||
<meshBasicMaterial
|
||||
map={rightTexture}
|
||||
transparent={true}
|
||||
opacity={1}
|
||||
side={THREE.DoubleSide}
|
||||
/>
|
||||
</mesh>
|
||||
{/* 左前侧柱子上的刻度线 */}
|
||||
<mesh position={[leftPostX, yPos, frontPostZ + postWidth/2 + 0.002]}>
|
||||
<boxGeometry args={[postWidth, tickHeight, 0.001]} />
|
||||
<meshBasicMaterial color={tickColor} />
|
||||
</mesh>
|
||||
{/* 右前侧柱子上的刻度线 */}
|
||||
<mesh position={[rightPostX, yPos, frontPostZ + postWidth/2 + 0.002]}>
|
||||
<boxGeometry args={[postWidth, tickHeight, 0.001]} />
|
||||
<meshBasicMaterial color={tickColor} />
|
||||
</mesh>
|
||||
</group>
|
||||
);
|
||||
}
|
||||
return labels;
|
||||
}, [rackHeight, uHeight, width, depth, deviceGroupOffset]);
|
||||
|
||||
// 生成机柜框架
|
||||
const frame = useMemo(() => {
|
||||
const materialProps = { color: "#333", roughness: 0.5, metalness: 0.8 };
|
||||
@@ -86,35 +177,21 @@ const RackModel = ({
|
||||
{[-1, 1].map((side) => (
|
||||
<mesh key={`side-${side}`} position={[side * (width/2 - 0.005), height/2, 0]}>
|
||||
<boxGeometry args={[0.01, height - 0.04, depth - 0.04]} />
|
||||
<meshStandardMaterial
|
||||
color="#2d3748"
|
||||
roughness={0.4}
|
||||
metalness={0.7}
|
||||
<meshStandardMaterial
|
||||
color="#2d3748"
|
||||
roughness={0.4}
|
||||
metalness={0.7}
|
||||
side={2}
|
||||
/>
|
||||
</mesh>
|
||||
))}
|
||||
|
||||
<mesh position={[0, height/2, -depth/2 + 0.005]}>
|
||||
<boxGeometry args={[width - 0.04, height - 0.04, 0.01]} />
|
||||
<meshPhysicalMaterial
|
||||
color="#e2e8f0"
|
||||
transparent
|
||||
opacity={0.2}
|
||||
roughness={0}
|
||||
metalness={0.9}
|
||||
transmission={0.8}
|
||||
thickness={0.01}
|
||||
/>
|
||||
<mesh position={[0.2, 0, 0.01]}>
|
||||
<boxGeometry args={[0.02, 0.15, 0.02]} />
|
||||
<meshStandardMaterial color="#333" />
|
||||
</mesh>
|
||||
</mesh>
|
||||
{/* U位刻度标识 */}
|
||||
{uLabels}
|
||||
|
||||
</group>
|
||||
);
|
||||
}, [width, height, depth, postWidth]);
|
||||
}, [width, height, depth, postWidth, uLabels]);
|
||||
|
||||
return (
|
||||
<group position={[0, 0.5, 0]}>
|
||||
|
||||
@@ -1,12 +1,89 @@
|
||||
import React, { Suspense } from 'react';
|
||||
import { Canvas } from '@react-three/fiber';
|
||||
import React, { Suspense, useMemo, useRef, useEffect } from 'react';
|
||||
import { Canvas, useFrame } from '@react-three/fiber';
|
||||
import { OrbitControls, PerspectiveCamera, Environment } from '@react-three/drei';
|
||||
const envMapUrl = '/assets/3d/env.hdr';
|
||||
import RackModel from './RackModel';
|
||||
import { useScene3D } from '../../context/Scene3DContext';
|
||||
import * as THREE from 'three';
|
||||
|
||||
// 检测是否为移动设备
|
||||
const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
|
||||
// 检测是否为小屏幕
|
||||
const isSmallScreen = window.innerWidth < 768;
|
||||
// 移动端或小屏幕使用 dpr=1，桌面端使用 dpr=[1, 1.5]
|
||||
const deviceDpr = isMobile || isSmallScreen ? 1 : [1, 1.5];
|
||||
|
||||
// 内部组件用于处理 OrbitControls
|
||||
const Controls = ({ rack }) => {
|
||||
const controlsRef = useRef();
|
||||
// 机柜中心点（中轴线）
|
||||
const targetY = (rack?.height || 45) * 0.04445 / 2 + 0.5;
|
||||
const fixedTarget = useMemo(() => new THREE.Vector3(0, targetY, 0), [targetY]);
|
||||
|
||||
useFrame(() => {
|
||||
if (controlsRef.current) {
|
||||
// 强制保持 target 在机柜中轴线
|
||||
controlsRef.current.target.copy(fixedTarget);
|
||||
controlsRef.current.update();
|
||||
}
|
||||
});
|
||||
|
||||
const Scene = ({ rack, devices, selectedDeviceId, onDeviceClick, onDeviceLeave, onDeviceHover, tooltipFields, deviceSlideEnabled = true }) => {
|
||||
return (
|
||||
<Canvas shadows dpr={[1, 1.2]} performance={{ min: 0.5 }}>
|
||||
<OrbitControls
|
||||
ref={controlsRef}
|
||||
makeDefault
|
||||
minPolarAngle={0}
|
||||
maxPolarAngle={Math.PI / 1.75}
|
||||
minAzimuthAngle={-Infinity}
|
||||
maxAzimuthAngle={Infinity}
|
||||
enablePan={true}
|
||||
enableZoom={true}
|
||||
enableRotate={true}
|
||||
mouseButtons={{
|
||||
LEFT: 0, // 左键旋转
|
||||
MIDDLE: 0, // 中键禁用（避免平移改变旋转中心）
|
||||
RIGHT: 0 // 右键禁用
|
||||
}}
|
||||
touches={{
|
||||
ONE: 1,
|
||||
TWO: 2
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const Scene = ({ rack, tooltipFields, onDeviceClick, onDeviceHover, onDeviceLeave }) => {
|
||||
// 从 Context 获取3D场景状态
|
||||
const {
|
||||
devices,
|
||||
selectedDevice,
|
||||
deviceSlideEnabled
|
||||
} = useScene3D();
|
||||
|
||||
// 使用 useMemo 稳定 props 引用
|
||||
const rackModelProps = useMemo(() => ({
|
||||
rack,
|
||||
devices,
|
||||
selectedDeviceId: selectedDevice?.id,
|
||||
onDeviceClick,
|
||||
onDeviceLeave,
|
||||
onDeviceHover,
|
||||
tooltipFields,
|
||||
deviceSlideEnabled
|
||||
}), [rack, devices, selectedDevice, onDeviceClick, onDeviceLeave, onDeviceHover, tooltipFields, deviceSlideEnabled]);
|
||||
|
||||
return (
|
||||
<Canvas
|
||||
shadows
|
||||
dpr={deviceDpr}
|
||||
performance={{ min: 0.5 }}
|
||||
gl={{
|
||||
antialias: !isMobile, // 移动端关闭抗锯齿提升性能
|
||||
alpha: true, // 必须开启alpha以支持透明背景
|
||||
powerPreference: 'high-performance'
|
||||
}}
|
||||
style={{ background: 'transparent' }}
|
||||
>
|
||||
<PerspectiveCamera makeDefault position={[3, 2, 4]} fov={50} />
|
||||
|
||||
<ambientLight intensity={0.5} color="#ffffff" />
|
||||
@@ -29,37 +106,11 @@ const Scene = ({ rack, devices, selectedDeviceId, onDeviceClick, onDeviceLeave,
|
||||
|
||||
{/* Models */}
|
||||
<group position={[0, 0, 0]}>
|
||||
<RackModel
|
||||
rack={rack}
|
||||
devices={devices}
|
||||
selectedDeviceId={selectedDeviceId}
|
||||
onDeviceClick={onDeviceClick}
|
||||
onDeviceLeave={onDeviceLeave}
|
||||
onDeviceHover={onDeviceHover}
|
||||
tooltipFields={tooltipFields}
|
||||
deviceSlideEnabled={deviceSlideEnabled}
|
||||
/>
|
||||
<RackModel {...rackModelProps} />
|
||||
</group>
|
||||
|
||||
{/* Controls */}
|
||||
<OrbitControls
|
||||
makeDefault
|
||||
minPolarAngle={0}
|
||||
maxPolarAngle={Math.PI / 1.75}
|
||||
enablePan={true}
|
||||
enableZoom={true}
|
||||
enableRotate={true}
|
||||
mouseButtons={{
|
||||
LEFT: 0, // 左键旋转
|
||||
MIDDLE: 2, // 中键平移
|
||||
RIGHT: 0 // 右键禁用
|
||||
}}
|
||||
touches={{
|
||||
ONE: 1, // 单指旋转
|
||||
TWO: 2 // 双指平移
|
||||
}}
|
||||
target={[0, (rack?.height || 45) * 0.04445 / 2 + 0.1, 0]} // Focus on middle of rack
|
||||
/>
|
||||
{/* Controls - 使用独立组件保持旋转中心固定 */}
|
||||
<Controls rack={rack} />
|
||||
</Canvas>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user