【3D】数据中心

示例效果

 这是3D可视化教程系列的文章，如果第一次阅读请先阅读《3D可视化教程导读》。可访问数据中心展示网址看在线效果：

源码

  源码及工程项目都放到github上。这个例子是高级案例，用TypeScript写的，所以放到另一个项目里。
  源码：iot-visualization-examples。

原理

 机柜门的开关动作，需要修改其中心点，从模型中心移到门轴中心，才能实现这样的沿轴旋转，详细请看7-开关门-不动点。
 双击让摄像头聚焦物体，详细请看8-聚焦靠近。在教程里提到如何让摄像头靠近，而在这个高级项目里，双击靠近时是会对着正面，原理就是考虑物体的正面来计算坐标。我在代码里写的是以X正半轴为正面，所以建模时，模型的正面也是为X正半轴才正常。在我帮公司做的项目里，机柜还区分前后门，我还需要额外判定摄像头位置是在机柜的正面还是背面，对应双击时打开的是正门还是后门，通过模型的X半轴与摄像头角度的两个向量计算夹角，可得出到底是正面还是背面。
 容量模式详细请看9-容量模式。
 温场效果详细请看3D温场效果。
 这个项目，一开始只能点击机柜，点击机柜后才允许点击里面的服务器。
 告警图标，是不断计算三维空间坐标转换到屏幕坐标，修改图标的位置：

export function getScreenPosition (obj: Object3D, space: Space, offset?: IOffset3): {x: number, y: number} {
  // default is object3D center
  const p = {
    x: offset?.x !== undefined ? offset?.x : 0.5,
    y: offset?.y !== undefined ? offset?.y : 0.5,
    z: offset?.z !== undefined ? offset?.z : 0.5
  }
  const result = { x: 0, y: 0 }
  const widthHalf = space.innerWidth / 2
  const heightHalf = space.innerHeight / 2

  box3.setFromObject(obj)
  const ix = interpolateNumber(box3.min.x, box3.max.x)
  const iy = interpolateNumber(box3.min.y, box3.max.y)
  const iz = interpolateNumber(box3.min.z, box3.max.z)

  vector3.set(
    ix(p.x),
    iy(p.y),
    iz(p.z)
  )
  vector3.project(space.camera)
  result.x = vector3.x * widthHalf + widthHalf + space.offset.left
  result.y = -(vector3.y * heightHalf) + heightHalf + space.offset.top
  return result
}