- 博客(206)
- 资源 (3)
- 收藏
- 关注
RSS订阅
原创 拓扑/大屏/三维编辑器的设计与思考
从去年年初开始，我们团队内部就在做两个编辑器：3d编辑器 支持搭建3d场景。拓扑/大屏编辑器 支持搭建大屏/拓扑/组态场景。开发编辑器的主要目是为了提高团队内部项目的交付效率，目前 两个编辑器都引用到团队的相关项目中。当然，编辑器目前也支持和其他公司的项目合作。 下面是几个项目的示例图：中间是一个三维场景，使用三维编辑器编辑而成，周边是一些大屏元素，使用大屏编辑器编辑。和一般的大屏编辑器不同，我们的大屏编辑器不仅支持大屏元素的排布，也支持分层拓扑图，架构图，交通图等，以及组态功能。
2020-10-14 15:16:35
1102
1
原创 canvas 绘制双线技巧
楔子最近一个项目，需要绘制双线的效果，双线效果表示的是轨道（类似铁轨之类的），如下图所示：负责这块功能开发的小伙，姑且称之为L吧，最开始是通过数学计算的方式来实现这种双线，也就是在原来的路径的基础上，计算出两条路径。但是这个过程的计算算挺复杂，而是最终实现的效果很耗性能，性能损耗估计主要在于路径的计算上。优化技巧后来他找到我来看这个问题，我在分析了项目背景的情况下，给予了一个简单的...
2018-12-20 15:25:22
828
原创 如何提高思维能力(不止针对程序猿)
最近公司有小伙伴向我反馈，说自己好像跟不上，感觉拖后腿了。希望我能够帮忙指点下迷津。他的问题是主管交给他的任务，他都能理解。但是就是自己动手写程序的时候，发现很多问题解决不了，很慢。针对他这种情况，我指出了他的可能存在的一些问题。其中比较主要的一点，是思维能力还比较欠缺。当然思维能力是一个宽泛的概念，具体到某个行业，它的要求会不一样。但是，基本的规律还是有些通用的地方。基础知识是思维能力的基础不管...
2018-06-30 07:54:45
3208
2
原创 Three光源Target位置改变光照方向不变的问题及解决方法
通过以上步骤，你应该能够解决聚光灯和定向光中光源目标不更新的问题。详细检查你的代码并确保所有设置和属性都正确应用。希望这篇文章对你解决 Three.js 中的光源目标问题有所帮助。
2023-12-23 13:13:30
404
原创 UE5 射线检测排除隐藏的Actor
在射线检测中，正确排除隐藏的Actor是确保游戏交互准确性的关键步骤。每种方法都有其适用的场景，开发者可以根据项目的具体需求选择最合适的方法。在选择方法时，需要考虑方法的性能、准确性以及对项目整体架构的影响。通过深入理解每种方法的原理，开发者可以更好地处理射线检测中的隐藏Actor排除问题。
2023-12-14 16:52:10
187
原创 UE5打包SDK未正确安装的问题
Windows（笔者之前用的电脑是windows10，最新电脑使用的是windows11）下UE5打包项目的需要安装Visual Studio。而且安装的时候需要选择上C++ 游戏开发相关模块。如下图所示：有时候安装了Visual Studio 之后，还是不能打包：可以看到并没有识别到SDK，这个时候。首先在Visual Studio Installer软件中，点击修改。在单个组件中搜索Windows就可以找到并下载Windows10、11的SDK和.NET3.1 Core（运行时）
2023-07-06 17:27:39
1700
原创 判断两个矩形是否相交(Rect Intersection)
最近在开发一个2D组态图形组件的过程中，里面的数学模块，涉及到两个矩形是否相交的判断。这个问题很多年前就写过，算是个小的算法吧。网络上搜索一下，有很多思路，有一些思路要基于多种组合的判断，显得比较复杂。比如两个矩形相交的情形，可能有下面的多种类型：而每种类型又有多种子类型。
2023-06-08 12:00:46
552
原创 【无标题】
本文主要阐述了电力行业三维布局的主要功能特点。最后，关注公号“ITMan彪叔” 可以添加作者微信进行交流，及时收到更多有价值的文章。
2023-04-22 14:15:32
156
1
原创 UE4 WebUI使用指南2-通信
本文提供了UE和网页的双向通信的方式的思路，具体细节需要大家自己多上手尝试。太阳虽好，总要诸君亲自去晒，旁人却替你晒不来。最后，关注公号“ITMan彪叔” 可以添加作者微信进行交流，及时收到更多有价值的文章。
2023-03-08 17:24:56
954
1
原创 UE4 WebUI插件使用指南
本文介绍UE4中通过Cesium插架加载本地倾斜摄影模型。Cesium for Unreal插件运行在UE环境何总运行Cesium，这样方便做一个GIS应用。
2023-01-07 16:36:12
2462
1
原创 【无标题】
在开发数字孪生应用程序的时候，除了三维场景展示之外，也需要开发丰富和酷炫的2D页面。使用UE4的UMG开发图表显得比较笨拙。而通过Web插件允许开发者创建丰富的基于Web HTML5的用户界面，它由内置在UE4中的web浏览器提供支持，包括对Windows、Mac、Linux、Android和iOS的支持。基于这种插件技术，普通的前端开发人员也可以开发UE4界面上丰富的2d页面效果。下面分享我们UE4做的数字孪生的几个案例，其中的2d页面是通过Vue结合html5技术和echart图表插件进行开发的：数据已
2022-12-05 16:36:40
456
原创 【无标题】
在用UE4 开发数字孪生应用的过程中，有很多业务会涉及到actor的查找，和actor标签的使用。比如下面的场景中，找出所有的物联网设备进行标注。
2022-11-18 16:56:18
404
原创 threejs三维地图大屏项目分享
上面分享的三维地图大屏。echart使用json解析生成地图projection投影svg 解析生成三维地图模型动态材质修改贴图的offset和repeat算法等经纬度定位，双线性差值三维的三维坐标转平面坐标的投影算法最终多个技术的融合，做出了文章开头的效果。其中比较难的是中间三维地图的生成和效果优化方案，如果有类似需求的读者可以参考。如果你有好的经验，也欢迎和我交流。关注公号“ITMan彪叔” 可以添加作者微信进行交流，及时收到更多有价值的文章。
2022-11-09 11:41:55
6328
1
原创 WebGL压缩纹理实践
相信对于webgl比较熟悉的同学都知道压缩纹理。我们常用的的纹理图片，都是jpeg，png等图片格式。这些图片本事是压缩的图片，基于压缩算法，对于文件进行了压缩，减小了文件的大小，这对于网络上的大量的图片的传输是有利的。不过jpeg png的图片在作为贴图使用的时候，首先会转换成位图，这里所说的位图是指没有使用任何压缩算法的原始图片数据。
2022-09-07 08:16:48
1884
原创 UE 实现镜头平移，旋转和缩放
在原来的Z轴旋转的基础上，加上一个增量，这个增量就是“鼠标X”节点的Axis Value，不过一般来说，Axis Value 会比较小，所以还会先乘以一个倍数，把相称的结果作为增量。其中目标是Pawn类，此处使用self即可（Pawn类自身，World Direction表示移动的方向，Scale Value 表示移动的缩放值，一般1表示向前，-1向后，这个正好和前面的Axis Value可以对应。在监听了鼠标X事件后，需要设置镜头的旋转，通过下面的蓝图节点，可以设置Pawn的旋转。
2022-09-02 07:53:30
6156
1
原创 UE 实现鼠标点选模型
本文会涉及到一些蓝图的知识，如果你对蓝图不了解，需要先了解下UE的蓝图知识。蓝图是虚幻引擎4的可视化脚本方法。也就是说，通常要通过编写脚本来完成的任务，现在可以通过一个由节点和连接组成的图形来创建，而不必输出任何实际的代码。蓝图相关的基础知识，可以参考官方文档。后续也会写相关的文章介绍蓝图知识。本文说明了通过射线的方法检测鼠标点击模型的功能。最终的效果如下图所示：image.png点击的时候，打印对应component的名称。...
2022-08-29 19:25:34
2158
原创 UE导入FBX、GLTF模型
本文主要介绍了UE如何导入FBX模型的两种方式，不足之处还多见谅。如果你有好的经验，也欢迎和我交流。关注公号“ITMan彪叔” 可以添加作者微信进行交流，及时收到更多有价值的文章。
2022-08-27 18:26:29
5460
原创 webgl(threejs)生成房间楼层
本文介绍了通过代码生成楼层的功能，其中用到了PathCubeGeometry，ExtrudeGeometry，BSP相关技术，其中PathCubeGeometry由于需要自己构建，会稍晚难点;ExtrudeGeometry是threejs本身就存在的对象，BSP也可以找到开源的包可以使用。如果你有好的思路，也欢迎和我交流。关注公号“ITMan彪叔” 可以添加作者微信进行交流，及时收到更多有价值的文章。
2022-08-20 15:04:29
1095
原创 基于webgl(threejs)的路面编辑
本文所示只是一个demo级别得尝试，如果要做一个强度得路面编辑器系统，可能要考虑得还有很多，比如多车道效果，更重得衔接形状等等。这在后续得产品中会持续强化相关功能。如果你有好的思路，也欢迎和我交流。关注公号“ITMan彪叔” 可以添加作者微信进行交流，及时收到更多有价值的文章。...
2022-08-11 17:52:39
990
2
原创 WebGL实践之半透阴影
本文介绍js中数组的at函数，属于比较简单的知识普及性文章，难度不大。首先，我们可以思考如下一个问题，如果要获取一个数组的最后一个元素(这是很常用的操作)，我们应该怎么做？ 相信大部分人能够想到的代码是这样的：嗯，这是最常用的获取数组最后一个元素的方式，依此类推获取倒数第二个，第三个的方式类似。 当然除了这种方式之外，还有其他的方式，比如：先通过slice获取后面一个元素的数组，然后通过下标0获取最后一个元素。在比如通过pop获取最后一个元素：但是 通过pop的方式会改变数组本身，所以一般不建议用。无
2022-07-11 16:15:38
275
原创 JS数组at函数(获取最后一个元素的方法)介绍
本文介绍js中数组的at函数，属于比较简单的知识普及性文章，难度不大。首先，我们可以思考如下一个问题，如果要获取一个数组的最后一个元素(这是很常用的操作)，我们应该怎么做？ 相信大部分人能够想到的代码是这样的：嗯，这是最常用的获取数组最后一个元素的方式，依此类推获取倒数第二个，第三个的方式类似。 当然除了这种方式之外，还有其他的方式，比如：先通过slice获取后面一个元素的数组，然后通过下标0获取最后一个元素。在比如通过pop获取最后一个元素：但是 通过pop的方式会改变数组本身，所以一般不建议用。无
2022-06-15 14:27:06
8284
2
原创 webgl未使用独立显卡报告2
楔子在上一篇文章 《# [https://juejin.cn/post/7074771064286347301] webgl未使用独立显卡报告》发表后，有读者在公众号给我发了一段评论，如下图所示：我通过找电脑测试，发现确实有这个情况，而我之前的文章没有提到这种情况：“在windows下面进行图形设置”，所以做个补充。设置步骤对于前面下面把详细的设置步骤说明下：右键在windows桌面点击，选择显示设置：选择显示设置，如下图可以看到google chrome如果没有看
2022-05-12 13:41:18
217
原创 WebGL加载本地模型
前言大部分的webgl框架，比如threejs和babylon等，都可以加载obj和gltf模型。 我们的引擎，基于three封装，同样有加载模型的loader，因此加载obj和gltf模型也是很简单就可以实现的。不过加载文件都是在线的文件，也就是通过url的形式进行加载。 团队开发的三维可视化平台框架，需要能够上传obj和gltf等格式的模型，在上传前，需要先对模型预览，这就涉及到如何加载本地模型的问题了。加载本地模型本文以gltf为例，进行说明。 加载本地模型的思路是这样的：既然引擎可以通过u
2022-05-06 13:54:19
974
原创 使用IndexedDB缓存给WebGL三维程序加速
前言使用webgl开发三维应用的时候，经常会发现三维场景加载比较慢，往往需要等待挺长时间，这样用户的体验就很不友好。 造成加载慢的原因，主要是三维应用涉及到的资源文件会特别多，这些资源文件主要是模型及其图片，往往这些模型和图片都会比较大。为了加快三维场景的加快速度，可以使用IndexedDB在客户端进行资源缓存。IndexedDB，即客户端持久化数据库！使用本缓存技术，在初次访问后，3D场景中的文件级别数据将写入访问设备本地缓存数据库，在客户端实现永久的生命周期，清除浏览器缓存也不影响已缓存的3D模型文
2022-02-09 15:55:08
3160
原创 threejs 贴图动画总结
引言在三维可视化中，会涉及到很多动画，其中贴图动画是其中很重要的一种，本文介绍几种贴图动画的思路，供大家一起探讨。流动动画流动动画通过设置贴图的repeat属性，并不断改变贴图对象的offset让贴图产生流动效果。 这种动画不难实现，首先加载贴图，如下所示：let img = new Image();img.src = './images/path.png';let texture = new eg.Texture(img);img.onload = function () { tex
2021-12-17 12:12:36
4043
1
原创 三维引擎导入obj模型不可见总结
最近有客户试用我们的三维平台，在导入模型的时候，会出现模型全黑和不可见的情况。上一篇文章说了全黑的情况。此文说下不可见的情况。经过测试，发现可能有如下两种情况。导入的模型不在镜头视野内导入的模型不在镜头视野内，所以看不到模型。有可能模型就不在视野内，也有可能模型位置超过了镜头的far参数值。 这种情况下，调整镜头的参数（包括position，center，far等）。模型的建模中心不在几何中心比较隐蔽的一种情况是模型的建模中心点不在模型本身的几何中心，建模中心在模型自身之外，此时模型的位置虽然都在
2021-12-14 10:24:32
1402
原创 三维引擎导入obj模型全黑总结
最近有客户试用我们的三维平台，在导入模型的时候，会出现模型全黑和不可见的情况。本文说下全黑的情况。经过测试，发现可能有如下几种情况。obj 模型没有法线向量如果obj模型导出的时候没有导出法线向量，会导致模型不能接受光照，从而导出的模型是全黑的。 此种情况下，高光反射也没有。解决方案上，一种是让建模人员重新导出模型，导出的时候勾选上导出法线向量。另外也可以从程序上兼容一下，判断模型是否有法线向量，如果没有，程序自己计算法线向量。以threejs为例，调用computeVertexNormals计
2021-12-09 14:58:10
3856
原创 使用SVG做模型贴图的思路
大多数情况下，三维模型使用PNG，JPG作为模型的贴图，当然为了性能优化，有时候也会使用压缩贴图来提高渲染效率和较少GPU压力。今天提供一种新的思路，使用SVG作为模型的贴图，可以达到动态调整图片精度的效果。使用svg作为贴图的思路，有两种。#直接作为贴图直接使用贴图，其实和png jpeg的图片没有多少差别，加载的贴图效果，最终也会比 较模糊。 大致代码如下： var cube2 = new mono.Cube(105 * 10,1094 * 10,1);
2021-11-20 14:49:43
3527
原创 光伏逆变器建筑设计工具
背景最近有不同行业的客户咨询我司能不能提供一种解决方案，可以快速实现三维建筑效果，能快速响应市场需要，满足投标、交付、技术服务、厂房建设等需求。客户主要行业领域为新能源光伏逆变器铺设、房地产建筑、工厂厂房等三维建筑领域。首先我们对他们的需求进行了分析，发现他们的共同需求是三维建筑，他们都想使用简单快速的编辑方式实现三维建筑，然后是业务需求。最终我们决定根据他们的需求，做一个简单的设计工具来实现三维建筑，然后再依次添加他们额外的业务需求。下边就简单的介绍下我们设计工具技术的尝试，如果你有更好的意见和思路可
2021-08-16 15:33:59
133
原创 智能制造芯片车间生产线可视化
前言随着《中国制造2025》的提出，制造业迎来了全新的发展机遇。更多的企业将制造业信息化技术进行广泛的应用，如 MES 系统、数字孪生以及生产管理可视化等技术的研究应用，已经成为社会各界共同关注的热点。21世纪是光电子的时代，全球性的市场增长为光电子的发展提供了巨大的空间，“武汉·中国光谷”的建设又为各个高新企业的发展提供了良好的外部环境，使得高新产业蓬勃发展。本文将以芯片生产流水线车间为例，介绍TWaver丰富的 2D、3D 组态进行可视化数字孪生，搭建出一个芯片生产线可视化系统。打造集智能化、绿色
2021-08-16 14:13:59
418
原创 EasyBPM进销存之物料管理
本文是EasyBPM平台实现进销存系列中的一篇，主要讲述物料的相关的管理。在ERP系统中，“物料”一词有着广泛的含义，它是所有产品、半成品、在制品、原材料、配套件、协作件、易耗品等与生产有关的物料的统称。物料是ERP的基础信息之一，其他单据，比如销售单，采购单均是基于物料的管理。物料在有的系统叫做零件，比如在2BizBox系统中。添加模块 “工程模块”首先添加一个工程模块，模块可以方便对于业务对象进行分类管理。 如下图所示：添加业务对象“物料”然后添加一个业务对象“物料”，如下图所示：给物料
2021-07-20 14:57:01
220
原创 水厂流程三维场景可视化解决方案
背景最近有客户咨询我们三维可视化编辑器，说看到我们三维可视化编辑器做的案例，也想实现自己水厂净水处理流程这块的可视化展示。想通过这种真实的三维可视化展示，进行线上销售，以便成交更多的客户，减少疫情对自己的影响。通过沟通交流，客户提出了几个难题，想让我们根据他们的水厂场景图片，做一些三维可视化场景的demo。客户把具体问题难点列了出来如下：水厂过滤模型能不能建模实现三维效果；整个水厂场景的过虑流程能不能复现；水厂设备的实时数据能否对接显示；水厂内的管道多，形状复杂，不通过建模的方式，能不能随便改变
2021-07-13 15:20:48
483
2
原创 智能制造芯片车间生产线可视化
前言随着《中国制造2025》的提出，制造业迎来了全新的发展机遇。更多的企业将制造业信息化技术进行广泛的应用，如 MES 系统、数字孪生以及生产管理可视化等技术的研究应用，已经成为社会各界共同关注的热点。21世纪是光电子的时代，全球性的市场增长为光电子的发展提供了巨大的空间，“武汉·中国光谷”的建设又为各个高新企业的发展提供了良好的外部环境，使得高新产业蓬勃发展。本文将以芯片生产流水线车间为例，介绍TWaver丰富的 2D、3D 组态进行可视化数字孪生，搭建出一个芯片生产线可视化系统。打造集智能
2021-06-25 21:14:22
249
1
原创 EasyBPM打印模板的缓存问题
业务平台EasyBPM（易实管理软件）有一个功能是模板打印的功能。就是可以使用一个docx格式的模板，输出一个docx格式的单据的文档。打印的逻辑是先从服务端获取模板，如果没有对应的模板，就提示先上传模板：遇到的问题是，按照提示上传模板之后，再次打印依然会报没有模板。缓存的问题通过思考发现，可能的原因是因为使用了缓存。 后端使用Node + Express进行静态资源的发布。 通过Express发布的资源，默认会开启缓存。所以当第一次去获取模板资源的时候，由于此时没有对应的模板，此时会跳转到
2021-05-23 12:23:13
157
原创 canvas绘制折线路径动画
最近有读者加我微信咨询这个问题：其中的效果是一个折线路径动画效果，如下图所示：要实现以上路径动画，一般可以使用svg的动画功能。或者使用canvas绘制，结合路径数学计算来实现。如果用canvas来绘制，其中的难点在于：需要计算子路径，这块计算比较复杂。（当然是可以实现的）渐变的计算， 从图中可以看出，动画的子路径是有渐变效果的，如果要分段计算渐变也很复杂。本文介绍一种思路，使用clip方法，动态移动clip的区域，来达到近似的效果。具体怎么做。绘制灰色路径绘制路径的代码比较简单，此
2021-05-09 10:57:39
1355
1
原创 canvas绘制虚线图表
最近有读者加我微信咨询这个问题，如下图所示：要实现的效果如下：其实难度不大，但是考虑一些人员对于canvas不熟悉，还是简单的介绍下。其实该图表，就是一个圆圈外面在套一个圆弧的效果， 主要的难点在于不知道怎么绘制圆圈的虚线效果。 其实canvas本身已经支持了虚线的绘制，就是一个api调用的事情，api是setLineDash。示例代码如下：<!DOCTYPE html><html lang="en"><head> <meta charse
2021-05-08 15:26:41
398
原创 BootstrapTable 行内编辑解决方案：bootstrap-table-editor
最近开发的一个业务平台，是一个低代码业务平台。其中用到的了bootstrap-table组件。但是bootstrap-table自身不带编辑功能。通过搜索发现，网上大部分的解决方案都是使用x-editable, x-editable是一个通用的编辑能力组件，可以给任何元素都加上编辑能力，功能强大，可以编辑文本，数字，选项，时间等等各种类型的数据。但是x-editable有一个比较不好的地方，x-editable的编辑模式是弹框的形式，如下图所示：我希望的是直接在单元格进行编辑的行内编辑，所以感觉x-
2021-05-07 11:31:58
3254
6
原创 canvas绘制图像轮廓效果
在2d图形可视化开发中，经常要绘制对象的选中效果。 一般来说，表达对象选中可以使用边框，轮廓或者发光的效果。 发光的效果，可以使用canvas的阴影功能，比较容易实现，此处不在赘述。绘制边框绘制边框是最容易实现的效果，比如下面的图片要绘制边框，只需要使用strokeRect的方式即可。效果如下图所示：这个代码也很简单，如下所示： ctx1.strokeStyle = "red"; ctx1.lineWidth = 2; ctx1.drawImage(im
2021-03-31 15:22:26
1401
3
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人