最近和一家公司在谈一个项目合作,他们公司主要是做油田相关设备的，比如油罐车、压力车、泵车等。
我的印象中只要和石油相关的企业，就感觉和钱挨得好近，???? 。
他们老板看了我们公司的三维产品后，大为赞叹。 惊呼，我们油田的管理最好也能上一套这样的三维系统。
油田行业的三维可视化项目，我们之前没有做过相关的行业，但是在三维可视化方面，我们经验还是挺多的，比如数据中心、医院、学校等三维可视化项目，还包括智慧园区、智慧城市、智慧小镇的方向的等三维可视化。
下面先上几张三维可视化的图瞅瞅：
虽然我们没有直接做过油田的三维可视化，但是有了以上三维方案的技术积累，这事做起来就不会太难。
其实客户的需求，并不是就某个油田场景进行三维可视化的场景搭建。而是要做一个油田三维的布局工具，通过布局工具，可以自由搭建不同的油田场景。
这比直接搭建一个三维的场景要难许多。
所谓万事开头难，难在不开头。 天下事有难易乎，干就完了。
在商务人员和客户确立合同，正式立项后， 我们的设计小姐姐，开发小哥哥，都各司其职,下边就讲一下项目的大概内容。
搭建模型库
第一步要做的就是建模，设计组使用3D建模工具 3d max或者c4d 进行油田设备模型的建模。建模后，导出后缀为obj或者gltf格式文件，这两种格式是我们三维渲染引擎支持的最好的文件格式。
建模后的所有模型文件，最终会放到后端的模型库，模型库的管理目录如下图所示：
加载模型
加载模型可使用引擎模型的加载函数进行模型加载，比如obj模型加载，示例代码如下：
new mono.OBJMTLLoader().load( 'yaliche.obj', 'yaliche.mtl', '', (node)=> {
node.type = 'obj';
box.addByDescendant(node);
},
);
上面加载了一个压力车的模型，加载模型是一个异步的过程，所以会有一个回调函数，加载完成之后，在回调函数中，把模型文件生成的三维对象加入到场景容器box之中，加入之后，场景中就会显示我们的三维对象，如下图所示：
搭建编辑器框架
在和设计组、开发组一起探讨之后，我们编辑器的框架和视图初步设计出来了，大致样子如下：
视图左上角是我们的logo，上方是工具栏。左侧分为场景区和组件区，场景区是创建三维场景的列表，组件区主要是模型列表，同时还有些echarts图表组件。
中间部分是三维场景呈现区。
对于这个页面布局，我想不用做太多技术上的阐述，基本上会一点前端开发的人员都可以实现类似的效果。
<div class="layui-layout layui-layout-admin">
<div class="layui-side layui-bg-black" id="leftTreeWrap">
<div class="layui-side-scroll">
<div class="layui-collapse" id="leftTree">
<div class="sceneTreeWrap">
<div class="groupTitle">
场景
</div>
</div>
<div class="groupTitle">
组件
</div>
<div id="modelGroupWrap">
<!-- <div class="layui-colla-item modelGroup not-select" id="groundWrap">
<h2 class="layui-colla-title"><span>场景模型</span></h2>
<div class="layui-colla-content" id="groundTree">
<div class="tree-wrap"></div>
</div>
</div> -->
</div>
</div>
</div>
</div>
<div class="layui-body">
<div class="toolbar">
<div class="temporaryTool"></div>
</div>
<div class="app" tabindex="0">
<canvas id="monoCanvas"></canvas>
</div>
</div>
左侧边栏包括两个部分，一个是场景列表，一个是模型列表。场景列表是树组件，模型列表是手风琴组件，如下图所示：
模型列表的创建过程是这样的，首先从后端获取所有的模型：
getComponentTree({ params: { owner: user } }, '同步云端组件树失败').then((res) => {
if (res) {
const treeData = res.data.data;
treeData.forEach(({ data }) => {
this.appendModelBtn(data, true);
});
// this.renderTreeDom(res.data.data);
}
});
通过每个模型创建模型对于的button，函数是appendModelBtn，如下：
appendModelBtn(modelData, isNew) {
const domWrap = this.groupDom[modelData.group];
if (!domWrap) {
console.log('缺少该类型对应的组', modelData.group);
if (modelData.category === 'skyBox') {
modelData.isNew = true;
skyData.push({ modelData });
}
} else {
domWrap.querySelector('.tree-wrap').appendChild(this.createModelBtnDom(modelData, isNew));
}
}
需要注意的，每个模型按钮都需要有drag and drop的功能。在模型按钮上需要监听drag 或者dragstart事件，这个被封装到一个独立的类Dragger.js里面，在该类中专门处理了dragstart事件：
addDragger(parent, subClass, option) {
parent.addEventListener('dragstart', (e) => {
let target = null;
// 拿到冒泡的所有元素
const path = eventPath(e);
for (let i = 0; i < path.length; i += 1) {
if (path[i].classList && path[i].classList.contains(subClass)) {
target = path[i];
break;
}
}
...
}
中间区域是三维呈现区域。 首先创建一个Network3D对象，Network3D对象是封装的三维呈现页面，其底层是由canvas组成的，并使用webgl技术进行三维渲染。下面是创建Network3D的代码：
const network = new mono.Network3D(box, null, 'monoCanvas');
network.mode = 'editor';
window.network = network; // todo
this.network = network;
network.bindApp(this);
network.setRenderSelectFunction(() => false);
make.Default.path = './static/myModellib/';
network.setClearColor(0, 0, 0);
network.setClearAlpha(0);
创建对象之后，让network可以和中间区域的大小自适应:
mono.Utils.autoAdjustNetworkBounds(
network,
document.querySelector('.app'),
'clientWidth',
'clientHeight',
);
其中network上的box对象用于管理要加载的三维对象模型。前面说过在模型列表上增加了drag事件，模型列表上的模型，通过拖拽可以添加到network对象上去，因此在network上面也需要添加对应的事件来添加对象：
onup: (e) => {
if (!this.sceneTree.senceId && !window.debug) {
layui.layer.msg('请先创建或选择场景', {
time: 2000,
});
return;
}
// 鼠标不在画布内的时候不创建
if (isPosInCanvas(network, e)) {
network.createElement({
e,
configString,
senceId: this.sceneTree.senceId,
});
}
},
当模型从左侧模型列表拖拽到network对象后，鼠标mouseup事件后，创建模型实例：
network.createElement({
e,
configString,
senceId: this.sceneTree.senceId,
});
到目前为止，已经完成了整个模型列表加载，模型拖拽创建模型实例的过程。 比如最终通过拖拽的油田场景如下所示：
在3d场景中，需要调整三维模型的位置、旋转角度和缩放比例，可以通过属性面板来调整：
也可以通过三维编辑功能直接在三维场景中对模型进行调整标记，要使用调整编辑功能，只需要加入如下这行代码即可：
const editInteraction = new mono.EditInteraction(network);
editInteraction.setScaleable(false);
editInteraction.setRotateable(false);
editInteraction.setTranslateable(true);
editInteraction.setDefaultMode('');
network.setInteractions([...network.getInteractions(), editInteraction]);
EditInteraction类 用于调整模型的位置、旋转角度和缩放比例。 通过键盘可以调整EditInteraction当前要调整的是那个属性：
case 82: // r 在有选中element时，切换操作为旋转
if (this.network.getIsMonoElement(this.network.currComponent)) {
const editInteraction = this.network.getInteractions()[2];
editInteraction.setScaleable(false);
editInteraction.setRotateable(true);
editInteraction.setTranslateable(false);
}
break;
case 84: // t 在有选中element时，切换操作为移动
if (this.network.getIsMonoElement(this.network.currComponent)) {
const editInteraction = this.network.getInteractions()[2];
editInteraction.setScaleable(false);
editInteraction.setRotateable(false);
editInteraction.setTranslateable(true);
}
break;
case 89: // y 在有选中element时，切换操作为缩放
if (this.network.getIsMonoElement(this.network.currComponent)) {
const editInteraction = this.network.getInteractions()[2];
editInteraction.setScaleable(true);
editInteraction.setRotateable(false);
editInteraction.setTranslateable(false);
}
break;
r键切换为旋转角度的调整：
t键切换为位置的调整：
y键切换为缩放的调整：
拖拽创造场景之后，每个对象还可以进行实时数据的对接，对接后呈现的效果如下：
在完成场景的创建和数据的对接之后，便可以发布场景，点击工具栏的预览按钮，即可以完成场景的发布和预览。上一张最终发布的效果图如下：
欢迎关注公众号“ITman彪叔”。彪叔，拥有10多年开发经验，现任公司系统架构师、技术总监、技术培训师、职业规划师。在计算机图形学、WebGL、前端可视化方面有深入研究。对程序员思维能力训练和培训、程序员职业规划有浓厚兴趣。
