三维数据中心可视化系统

export default class Viewer {
  // 存储Canvas元素的ID
  public id: string;
 
  // Three.js的场景对象，所有3D内容都添加到这里
  public scene!: Scene;
 
  // 透视相机，提供3D视角
  public camera!: PerspectiveCamera;
 
  // WebGL渲染器，负责将3D场景渲染到屏幕
  public renderer!: WebGLRenderer;
 
  // 轨道控制器，让用户可以旋转和缩放场景
  public controls!: OrbitControls;
 
  // ...其他属性
 
  constructor(id: string) {
    // 保存Canvas元素ID
    this.id = id;
 
    // 初始化所有组件
    this.initViewer();
  }
 
  private initViewer() {
    // 创建事件总线，用于组件间通信
    this.emitter = mitt();
 
    // 初始化渲染器（显示3D画面的工具）
    this.initRenderer();
 
    // 创建3D场景（放置3D物体的空间）
    this.initScene();
 
    // 添加光源（没有光就看不见物体）
    this.initLight();
 
    // 设置摄像机（决定我们看场景的视角）
    this.initCamera();
 
    // 添加控制器（让用户可以旋转和缩放场景）
    this.initControl();
 
    // 创建天空盒作为背景
    this.initSkybox();
 
    // 动画循环函数 - 实现场景的连续更新
    const animate = () => {
      // 如果场景已销毁则停止动画
      if (this.isDestroy) return;
 
      // 请求下一帧动画（类似电影的帧）
      requestAnimationFrame(animate);
 
      // 更新DOM元素尺寸
      this.updateDom();
 
      // 渲染当前画面
      this.readerDom();
 
      // 执行所有注册的动画效果
      this.animateEventList.forEach((event) => {
        if (event.fun && event.content) {
          event.fun(event.content);
        }
      });
    };
 
    // 启动动画循环（开始不断刷新画面）
    animate();
  }
}

export default class ModelLoder {
  // 引用Viewer实例，用于访问场景
  protected viewer: Viewer;
 
  // GLTF模型加载器，用于加载.glb/.gltf格式的3D模型
  private gltfLoader: GLTFLoader;
 
  // DRACO解码器，用于解压缩模型以提高加载性能
  private dracoLoader: DRACOLoader;
 
  constructor(viewer: Viewer, dracolPath: string = `${publicPath}/draco/`) {
    // 保存Viewer引用
    this.viewer = viewer;
 
    // 创建GLTF加载器
    this.gltfLoader = new GLTFLoader();
 
    // 创建DRACO解码器（用于减小模型文件体积，加快加载速度）
    this.dracoLoader = new DRACOLoader();
 
    // 设置解码器路径，告诉程序去哪里找解压工具
    this.dracoLoader.setDecoderPath(dracolPath);
 
    // 将解码器附加到GLTF加载器
    this.gltfLoader.setDRACOLoader(this.dracoLoader);
  }
 
  // 将3D模型加载到场景中
  public loadModelToScene(url: string, callback: LoadModelCallbackFn<BaseModel>) {
    // 构建完整的模型URL路径
    const publicUrl = `${publicPath}${url}`;
 
    // 加载模型并添加到场景
    this.loadModel(publicUrl, (model) => {
      // 将模型添加到场景中
      this.viewer.scene.add(model.object);
 
      // 模型加载完成后执行回调函数
      callback && callback(model);
    });
  }
}

export default class BaseModel {
  // 引用Viewer实例
  protected viewer: Viewer;
 
  // 保存GLTF模型数据
  public gltf: GLTF;
 
  // 模型的根对象
  public object: THREE.Group;
 
  // 保存模型原始材质，用于后续恢复
  public originMaterials: Material[] = [];
 
  // ...其他属性和方法
 
  // 设置模型缩放比例（调整大小）
  public setScalc(x: number, y?: number, z?: number) {
    // 设置模型的缩放比例，如果y和z未提供，则使用x值
    this.object.scale.set(x, y || x, z || x);
  }
 
  // 开启模型阴影效果（让画面更真实）
  public openCastShadow(names = []) {
    // 遍历模型的所有子对象
    this.gltf.scene.traverse((model: Object3DExtends) => {
      // 如果是网格对象(Mesh)且不在排除列表中
      if (model.isMesh && !names.includes(model.name as never)) {
        // 禁用视锥体剔除，确保模型始终可见
        model.frustumCulled = false;
 
        // 启用阴影投射
        model.castShadow = true;
      }
    });
  }
 
  // 修改模型颜色和透明度（比如高亮选中的设备）
  public setColor(color = "yellow", opacity = 0.5) {
    // 如果还没保存过原始材质，则初始化数组
    if (!this.isSaveMaterial) this.originMaterials = [];
 
    // 遍历模型的所有子对象
    this.gltf.scene.traverse((model: Object3DExtends) => {
      if (model.isMesh) {
        // 保存原始材质以便日后恢复
        if (!this.isSaveMaterial) this.originMaterials.push(model.material as Material);
 
        // 创建新材质并应用到模型
        model.material = new THREE.MeshPhongMaterial({
          // 设置双面可见
          side: THREE.DoubleSide,
 
          // 启用透明效果
          transparent: true,
 
          // 关闭深度测试，使半透明物体可以正确显示
          depthTest: false,
 
          // 启用深度写入
          depthWrite: true,
 
          // 设置材质颜色
          color: new THREE.Color(color),
 
          // 设置透明度
          opacity: opacity,
        });
      }
    });
 
    // 标记已保存原始材质
    this.isSaveMaterial = true;
  }
 
  // 启动模型动画（使模型动起来）
  public startAnima(i = 0) {
    // 保存动画索引
    this.animaIndex = i;
 
    // 如果混合器不存在，则创建新的动画混合器
    if (!this.mixer) this.mixer = new THREE.AnimationMixer(this.object);
 
    // 如果没有动画，则直接返回
    if (this.gltf.animations.length < 1) return;
 
    // 播放指定索引的动画
    this.mixer.clipAction(this.gltf.animations[i]).play();
 
    // 创建动画对象并添加到全局动画列表
    this.animaObject = {
      // 动画更新函数
      fun: this.updateAnima,
 
      // 动画上下文对象
      content: this,
    };
 
    // 注册到Viewer的动画循环中
    this.viewer.addAnimate(this.animaObject);
  }
}

// 在Viewer类中的代码片段
 
// 初始化射线检测器，用于处理3D场景中的鼠标事件
public initRaycaster() {
  // 创建射线检测器（像一道激光从鼠标位置射入3D场景）
  this.raycaster = new Raycaster();
 
  // 创建事件处理函数
  const initRaycasterEvent: Function = (eventName: keyof HTMLElementEventMap): void => {
    // 使用节流函数包装事件处理器，防止过于频繁触发
    const funWrap = throttle(
      (event: any) => {
        // 保存原始事件对象
        this.mouseEvent = event;
 
        // 计算鼠标在3D空间中的标准化坐标（把屏幕坐标转换为3D场景坐标）
        this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        this.mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
 
        // 发出事件，通知相关组件处理，传递射线检测结果
        this.emitter.emit(Events[eventName].raycaster, this.getRaycasterIntersectObjects());
      },
      50 // 节流时间：50ms内只触发一次（防止太频繁）
    );
 
    // 向DOM元素添加事件监听器
    this.viewerDom.addEventListener(eventName, funWrap, false);
  };
 
  // 注册各种鼠标事件
  initRaycasterEvent('click');     // 单击事件
  initRaycasterEvent('dblclick');  // 双击事件
  initRaycasterEvent('mousemove'); // 鼠标移动事件
}
 
// 在Sence.vue组件中的代码片段
 
onMounted(() => {
  // 初始化3D场景和加载模型
  init();
  initModel();
 
  // 注册双击事件处理函数
  viewer.emitter.on(Event.dblclick.raycaster, (list: THREE.Intersection[]) => {
    // 处理用户点击3D对象
    onMouseClick(list);
  });
 
  // 注册鼠标移动事件处理函数
  viewer.emitter.on(Event.mousemove.raycaster, (list: THREE.Intersection[]) => {
    // 处理鼠标悬停效果
    onMouseMove(list);
  });
});
 
// 处理鼠标点击事件
const onMouseClick = (intersects: THREE.Intersection[]) => {
  // 如果没有点击到任何对象，则直接返回
  if (!intersects.length) return;
 
  // 获取第一个被点击的对象
  const selectedObject = intersects[0].object;
 
  // 根据点击的对象类型执行不同操作
  if (selectedObject.name.includes('zuo')) {
    // 如果点击的是办公楼模型，选中该区域
    selectOffice(selectedObject.parent);
  }
 
  // 更多处理逻辑...
}

<!-- 简化的Sence.vue组件结构 -->
<template>
  <!-- 3D场景容器 -->
  <div id="three"></div>
 
  <!-- 悬浮信息框组件 -->
  <Popover ref="popoverRef" :top="popoverTop" :left="popoverLeft" :data="popoverData"></Popover>
</template>
 
<script lang="ts" setup>
// 组件挂载完成后初始化3D场景
onMounted(() => {
  // 初始化3D场景
  init();
 
  // 加载3D模型
  initModel();
});
 
// 初始化3D场景和相关组件
const init = () => {
  // 创建核心3D场景（舞台）
  viewer = new Viewer("three");
 
  // 初始化射线检测（用于鼠标交互）
  viewer.initRaycaster();
 
  // 创建模型加载器（搬运工）
  modelLoader = new ModelLoader(viewer);
 
  // 创建选中框辅助对象（用于显示选中的物体）
  boxHelperWrap = new BoxHelperWrap(viewer);
 
  // 注册事件监听
  // 双击事件
  viewer.emitter.on(Event.dblclick.raycaster, onMouseClick);
 
  // 鼠标移动事件
  viewer.emitter.on(Event.mousemove.raycaster, onMouseMove);
};
 
// 加载3D模型并设置属性
const initModel = () => {
  // 加载数据中心模型
  modelLoader.loadModelToScene("/models/datacenter.glb", (baseModel) => {
    // 设置模型缩放比例（调整大小）
    baseModel.setScalc(0.2);
 
    // 获取模型场景
    const model = baseModel.gltf.scene;
 
    // 设置模型位置（放在场景中心）
    model.position.set(0, 0, 0);
 
    // 设置模型名称
    model.name = "机房";
 
    // 启用阴影效果（让画面更真实）
    baseModel.openCastShadow();
 
    // 保存模型引用，便于后续操作
    dataCenter = baseModel;
 
    // 克隆一份模型用于状态恢复
    oldDataCenter = model.clone();
 
    // 遍历所有机柜，添加到可点击对象列表
    const rackList: any[] = [];
 
    // 遍历模型中的所有对象
    model.traverse((item) => {
      // 检查是否是机柜对象
      if (checkIsRack(item)) {
        // 将机柜添加到列表中
        rackList.push(item);
      }
    });
 
    // 设置可交互对象列表（告诉系统哪些物体可以被点击）
    viewer.setRaycasterObjects(rackList);
  });
};
</script>

# 安装依赖
npm i
 
# 启动项目
npm start