约定先说说吧。记得2015年，我教人WebGL的时候，得从头普及。反复下单后，我不得不使用Chrome。最后，我想强调一下，记住EnableWebGLfunctionality。今天，稍微懂一点网页开发的人都会说“网页3D用的是WebGL”。怎么形容这种感觉呢？想必大家都看到了这两年的技术发展。那种惊天动地的变化，真的很难用“爆”字来形容。而回到网络3D的话题，我认为最大的推动力是2016年以来虚拟现实的快速崛起，完全推动了3D可视化技术的快速发展，而物联网的发展开启了一个新的时代。newdoorto新世界的大门。游戏行业一直争论Unity仍然是HTML5。在我看来，至少WebGL做的还不错，插件化的技术让我想起了一首悲伤的歌：在阳光下死去……3D可视化应用盘点当然是今天给大家的。介绍最新的3D可视化结果。在开始正题之前，我想盘点一下近两年一些靠谱的3D应用。行业内，销售端有复杂零件的3D展示。依托零件原有模型，实现参数转换相对容易。管理方面，主要是车间、生产设备的立体监控；电力行业有无人值守变电站巡检监控，可结合三维远程巡检作业，降低人工操作风险；仓库、粮仓，引入3D后，可结合仓库系统、环境系统进行全方位管理；矿山和隧道，这个很容易理解：作业越危险，环境要求越高，越需要虚拟仿真；3D家装设计，通常是在线模式，拖拽式设计，结合家具销售。早期主要是Stage3D。在过去的两年里，我们也看到了很多WebGL的案例；博物馆，图书馆，档案馆结合讲解，复杂设备的虚拟仿真培训，产品展示，还有很多，比如虚拟试衣间，3D在线浏览产品，比如我刚看到这个霸道小吃：开玩笑。其实不管是哪个行业，3D应用的很大一部分工作量都来自于建模，而这次我们要分享一个与上述应用完全不同的案例。这次以文字为例，对模型几乎没有要求，只用到最基本的形状元素，但可以解决企业在不断发展壮大中，尤其是深化过程中会遇到的问题。信息化过程，即如何将复杂过程可视化。什么是流程？process，两个看起来很简单的词，英文process。我们这里说的流程主要是企业的业务流程，比如生产流程、各种行政申请流程、财务审批流程、人事处理流程、质量控制和客户服务流程等。业务流程对企业的意义不仅仅是对企业关键业务的描述；对企业的经营活动也具有指导意义。一系列的变化。这种优化的目的其实就是企业追求的目标：降低企业的运营成本，提高对市场需求的响应速度，力求企业利润最大化。（来自ThinkTankEncyclopediaMBAlib）为什么我突然开始拖业务术语了？因为这是甲方爸爸给的一道难题。甲方父亲的公司部门多，流程复杂。为了提高业务流程的效率，优化公司自身的管理，提出了对现有业务流程进行三维可视化的需求。为什么该过程应该以3D形式可视化？通俗的说，因为飞机真的很难看，也很难清理；用流行的话说，只有“升级维度”，才能展示和容纳更多的信息。看到这里的三体爱好者，请不要犹豫向我挥动你们的小手哦！比如甲方父亲的信息太多了，我们不能透露，那我们找几个简单的例子，比如每个公司每天都要打交道的报销流程：（部分文字应要求打了马赛克）账户报销流程业务图：二层逻辑交互图：账户报销业务基础架构：看到这么复杂的结构，不管你有以下哪种表述，都不要惊慌：流程结构梳理下面简单梳理一下流程的总体框架图表，可分为五层：业务流程层：起点、审批、服务；应用逻辑层：WEB服务、数据库服务、定时作业服务、接口服务、应用服务；示例：WEB服务实例、金融数据库实例、支付服务实例；OS：EB服务OS、财务数据库OS；硬件：主机、交换机。在初稿中，为了让这五层之间的关系一目了然，分层展示是必不可少的。每一层又分为若干模块，层与层之间、模块之间都有业务联系。按照理清的逻辑关系，我先整理了一份初稿。流程和业务首先用简单的正方形和圆柱体代替。底柜模型直接用作库存模型，我们有很多与机房相关的模型。虽然看起来有点层次感，但这只是一个整体的框架demo，我们会在此基础上一步步修改。弧形效果是指底层模型的弧形效果。为了让每一层都做成圆弧效果，我把层模型拆解成9个简单模型的组合，上图给大家看（原谅我画的马虎）。模型1、2、3、4、5均为等厚的立方体，模型6、7、8、9为等尺寸的1/4圆柱体，9个模型组合成分层模型。模型一的代码：（模型一、二、三、四、五都差不多，所以只贴模型一的代码。)varcenterNode=newmono.Cube({width:width,height:height,depth:depth,});centerNode.s({'m.type':'phong','m.color':color});模型6代码：varleftTopCylinder=newmono.Cylinder({radiusTop:radius,radiusBottom:radius,height:height,arcLength:Math.PI/2,//圆柱体的圆弧长度arcStart:Math.PI//圆弧开始的角度});leftTopCylinder.s({'m.type':'phong','m.color':color});leftTopCylinder.p(-width/2,0,-depth/2);9个模型合并：varcombo=newmono.ComboNode([centerNode,leftNode,rightNode,topNode,bottomNode,leftTopCylinder,rightTopCylinder,leftBottomCylinder,rightBottomCylinder],['+'],true);图片我选择了一张星空的图片，然后根据背景修改了配色和一些模型。效果还是不错的，看起来比较大气。添加背景代码：network.setClearColor(0,0,0);network.setClearAlpha(0);network.setBackgroundImage('./images/background.jpg');文字图片中显示的文字类似于对话框，但实际上是一个广告牌，先创建一个广告牌，然后用canvas绘制图片作为贴图贴在上面。varbillboard=newmono.Billboard();varcanvas=document.createElement('canvas');varcontext=canvas.getContext('2d');context.font="130px微软雅黑";变量数组=[];如果(text.indexOf("\n")){array=text.split("\n");}else{array=[text]}varlength=0;对于(vari=0;i
