关于前端:电力布局三维编辑器功能设计

楔子

最近和一家公司在谈一个我的项目单干, 他们公司次要是做电力相干的。我的项目背景大略是这样的：
国家电网对电网资产须要做到数字化治理，对现有变压器台区内的电表箱电能表做可视化数字孪生治理。
因为波及到的台区十分多，所以客户心愿开发的不是单个我的项目，而是能够实现我的项目的 3D 编辑器，使得电网的台区经理应用编辑器编辑出所负责的变压器台区的设施关系场景及数据状态展现。

三维可视化方面，三维组态，咱们教训还是挺多的，比方数据中心、医院、学校等三维可视化我的项目，还包含智慧园区、智慧城市、智慧小镇的方向的等三维可视化。
上面先上几张三维可视化的图瞅瞅：

客户须要的是一个布局工具，而不是间接的三维场景，这比间接搭建一个三维的场景要难许多。
然而所谓万事开头难，难在不结尾。天下事有难易乎，干就是了。因为之前做过油田的三维布局，尽管内容上不太一样，然而技术上是相似的，还是相对来说容易很多。
在商务人员和客户确立合同，正式立项后，咱们的设计小姐姐，开发小哥哥，建模小弟弟，都各司其职, 下边就讲一下我的项目的大略内容。

创立模型库

模型库次要包含了园区模型（通用），楼宇模型（通用），台区模型，电表箱，电能表等等。

首先是开发共事搭建一个模型库的性能，次要包含了对于模型的治理。模型库性能次要包含，模型的上传，预览和分类和列表性能。同时让建模小伙把相干模型应用 3D 建模工具 3d max 或者 c4d 进行模型的建模。建模后，导出后缀为 obj/gltf/fbx 格式文件，建模后的所有模型文件，最终会上传到模型库，模型库的治理目录如下图所示：

三维编辑性能

三维编辑能力是电力布局三维编辑器的外围性能。

生成模型

三维编辑能力之一是把模型列表的性能拖拽到三维画布上，生成三维模型。次要的技术实现包含了 DragAndDrop 和模型加载：
其中 drag and drop 大抵如下：

function dragstart_handler(ev) {ev.dataTransfer.setData("model","./xxx.gltf");
}

function dragover_handler(ev) {ev.preventDefault();
  ev.dataTransfer.dropEffect = "move";
}
function drop_handler(ev) {ev.preventDefault();
  var data = ev.dataTransfer.getData("model");
  let model = ModelLoader.load(data);
  ...
}

而模型加载次要应用了 GLTFLoader，大抵如下

loader.load(modelPath, function (gltf) {
  // todo 
  // add gltf to scene
}

场景编辑

模型拖入场景中后，还能够在场景中二次编辑模型的地位，大小和其余属性。能够通过属性框设置属性，也能够通过 gizmo 工具进行平移，旋转和缩放模型。如下图所示：

当然还有更多的底层能力，包含 undo，redo，批量生产，批量布局，打组，遣散打组，拖拽复制能力，批量挪动，旋转和缩放等等能力，都是用于易用性的开发，此处不在具体阐明。前面将会有文章专门阐明编辑器的底层能力。

动静楼层

客户须要可能动静生产楼层，楼层模型拉入场景时，手动输出 地下层数，地上层数，单元数，而后依照输出的层数主动生成相应楼宇模型。楼层反对动静批改楼层数和单元数量。这样能够达到的目标就是通用型，不必针对每个台区进行楼层的建模，缩小前期的工作量。

通过对于楼层 + 楼顶进行离开建模，而后把楼层进行组合的能力，来实现上述性能。

连线性能

在台区和电表之间要可能增加连线，示意联通关系，成果如下所示：

输出台区模型编号和电表模型编号。而后依照横平竖直的办法连贯连线。其中因为 webgl 的 line 宽度只能为 1，影响成果，所以咱们的连线应用了本人封装的 Line，相似 threejs 的 MeshLine，通过 Mesh 来模仿 Line，能够指定 line 的宽度。代码如下所示：

 const material = new dt.MeshLineMaterial({
    useMap: true,
    map: texture,
    color: new dt.Color("red"),
    transparent: true,
    clipRatio: .1,
    opacity: 1,
    depthTest: false,
    // depthWrite: false,
    resolution: new dt.Vec2(graph.width, graph.height),
    sizeAttenuation: false,
    lineWidth: 100,
    repeat: new dt.Vec2(20, 3),
    offset: new dt.Vec2(0, 0),
    gradientStop: [0, 0.2, random(0.55, 0.65), 1],
    gradientColor: ["blue", "green", "orange", "red"],
    blending: dt.AddtiveBlending,
  });
  var g = new dt.MeshLine();
  g.setGeometry(geo);
  var mesh = new dt.Mesh(g.geometry, material);

特效

通过平台的脚步能力，能够实现二次开发的能力，二次开发实现的特效如下：

• 线条的流动成果

  通过 uv 流动动画 + 特定的贴图，能够实现线条的流动成果，比方 demo 成果如下：

  无关 uv 流动动画的原理，能够参考笔者之前的文章《
  》。

• 台区、电能表模型轮廓发光的呼吸灯闪动成果

  通过引擎的 OutlineRenderer，能够实现模型的轮廓成果，并且通过 OutlineRenderer 的参数的一直批改，便能够实现呼吸灯的闪动的成果，代码如下所示：

  graph.outlineMethod = "glow";
  if (graph._outlineRenderer) {
  let pass = graph._outlineRenderer.outlinePass;
  pass.visibleEdgeColor = new Color(controls.visibleEdgeColor);
  pass.hiddenEdgeColor = new Color(controls.visibleEdgeColor);
  pass.edgeGlow = controls.edgeGlow;
  pass.edgeThickness = controls.edgeThickness;
  pass.edgeStrength = controls.edgeStrength;
  pass.downSampleRatio = parseInt(controls.downSampleRatio);
  }

  最终的成果如下图所示：

总结

本文次要论述了电力行业三维布局的次要性能特点。

最初，关注公号“ITMan 彪叔”能够增加作者微信进行交换，及时收到更多有价值的文章。