建立3d模型库关键涵盖了产业园区实体模型(通用性)

楔子

近期和一家公司在讲一个企业合作,这个公司主要做电力工程有关的。 项目概况大约是这样子的： 国网对电力网财产要做到信息化管理，对当前变电器台区域内的配电箱智能电能表做数据可视化数字孪生技术管理方法。 因为涉及的变台特别多，因此顾客期待研发的并不是单独新项目，反而是能够实现工程项目的3D在线编辑器，促使电网的台区经理应用在线编辑器编写派出所负责任的变电器变台的机器关联情景及数据状态展现。

三维可视化层面，三维组态软件，大家工作经验还是蛮多的，例如大数据中心、医院门诊、学校等三维可视化新项目，还包含智慧社区、新型智慧城市、智慧小镇方向的等三维可视化。 下边先弄多张三维可视化的图片瞧瞧： 用户需要的是一个合理布局专用工具，而非直接地三维场景，这个比立即构建一个三维的画面难上很多。 可是所说开头难，难在没有开始。 天下大事有难度乎，干就是了。因为之前做油气田的三维合理布局，尽管内容和形式不太一样，可是技术性上有相似的，或是相对而言非常容易许多。 在业务人员跟客户建立合同书，宣布项目立项后， 我们自己的设计方案漂亮小姐姐，开发设计小帅哥，模型弟弟，都各尽其责,下面就讲一下工程项目的大致内容。

建立3d模型库

3d模型库关键涵盖了产业园区实体模型（通用性），房屋实体模型（通用性），变台实体模型，配电箱，智能电能表等。 关键在于开发设计朋友搭建一个3d模型库的功效，关键涵盖了针对模型管理方法。 3d模型库作用主要包含，模型提交，浏览和分类和目录作用。并且让模型小伙子把有关实体模型应用3D建模软件 3d max或是c4d 开展模型建模。模型后，导出来后缀名为obj/gltf/fbx格式，模型后全部模型文件，最后大会上传入3d模型库，3d模型库的监管文件目录如图所示：

三维编辑工具

三维编写力是电力工程合理布局三维在线编辑器的主要功能。

生成模型

三维编写水平之一是把实体模型目录的功效拖动到三维画板上，形成三维模型。最主要的技术进行涵盖了 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流动性动漫 特定3d贴图，能够实现线条流动性实际效果，例如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彪叔” 可以加创作者手机微信相互交流，立即接到大量有价值的文章。