HTML5WebGL在3D方面的应用发展得如火如荼，轻松实现3D组态（工控）！3D组态软件提高了工控管理效率，大大提高了工控的资源管理和风险控制。传统的3D配置一般都是本地应用，本案例使用基于浏览器B/S架构的3D配置应用。本案例模拟一个简单的油田工控场景，模型大致包括油井、分离器、加热炉、天然气、出口泵等。还包括管道流量、流向。描述了石油开采、加工和输出的全过程。制作模型的第一步是建模。设计团队使用三维建模工具3dmax或c4d对油田设备模型进行建模。建模后，导出后缀为obj或gltf格式的文件，这两种格式是我们3D渲染引擎支持的最好的文件格式。所有建模后的模型文件最终都会放在后台模型库中，即模型库的管理目录下，如下图：要制作的模型包括油井、分离器、加热炉、天然气、exportpumps，如下图表示加载模型可以使用engine模型的loading函数来加载模型，比如obj模型加载，如下代码所示：newmono.OBJMTLLoader().load('youjing.obj','youjing.mtl','',(node)=>{node.type='obj';box.addByDescendant(node);},);比如加载一个油井模型，因为加载模型是一个异步过程，所以会有一个回调函数，加载完成后，在回调函数中，将模型文件生成的3D对象添加到场景容器盒中，而我们的3D对象添加后会显示在场景中，如下图：通过构建3D场景创建一个Network3D对象，就可以创建一个3D场景对象，如下代码所示：constbox=新单声道数据框（）；constnetwork=newTopoNetwork(box,null,'monoCanvas');network.mode='编辑器';window.network=网络；//todothis.network=network;network.bindApp(这个);network.setRenderSelectFunction(()=>false);make.Default.path='./static/myModellib/';network.setClearColor(0,0,0);network.setClearAlpha(0);constdirectionalLight=newmono.DirectionalLight(0x333333,0.3);directionalLight.setDirection(newmono.Vec3(0,1,1));box.add（方向灯）；让pointLight=新单声道。点李正确（0xeae5e1，0.3）；pointLight.setPosition(2000,2000,2000);box.add(点光源);pointLight=newmono.PointLight(0xeae5e1,0.4);pointLight.setPosition(-2000,2000,2000);盒子.add（点光源）；pointLight=newmono.PointLight(0xeae5e1,0.3);pointLight.setPosition(2000,2000,-2000);box.add(点光源);pointLight=newmono.PointLight(0xeae5e1,0.4);点光源.setPosition(-2000,2000,-2000);box.add(点光源);box.add(newmono.AmbientLight(0x888888));mono.Utils.autoAdjustNetworkBounds(network,document.querySelector('.app'),'clientWidth','clientHeight',);拖动模型生成场景从模型列表中，将模型拖到3D场景对象上，创建模型对象，如下图：在模型按钮上，需要监听drag或dragstart事件，这个是封装好的进入一个独立的类Dragger.js，其中对dragstart事件进行了特殊处理：冒泡元素constpath=eventPath(e);for(leti=0;i
