关注
分享
2000年的六年级三好学生
建筑领域信息化大搬砖家
展开
-
基于threejs加载大型BIM模型的优化尝试
threejs实现BIM模型轻量化的一些优化尝试。八叉对，遮挡剔除，LOD原创 2023-07-22 16:46:40 · 3282 阅读 · 4 评论 -
QModel-BIM模型浏览器简介
主要能力：实现Revit、Gltf模型在线浏览，符合BIM业务场景的需求。集成方案：私有化部署、可开源。原创 2023-02-16 20:19:50 · 1427 阅读 · 1 评论 -
Revit模型在Web端展示的免费方案
问我Revit模型在Web端展示，第一次接触这个行业，也有不少公司没有那么多资源投入，也想着花最少的钱实现项目交付，并且期望有一个可持续发展的路线，将来做大做强不受制于人卡脖子，而且工作不会白费。有的，基于webgl(threejs)的客户端渲染解决方案有免费的，我说的是免费是纯粹从github上找得到的资料，方便一些愿意跳坑的小伙伴精准跳入大深坑，别坑口都找不着。7，交互的优化，比如点选框选，测量，漫游，显隐，透明，染色；8，各种效果，比如自发光，环境光，动画，阴影；......原创 2022-08-31 16:29:35 · 3020 阅读 · 0 评论 -
BIM模型轻量化-SSAO效果-自然光漫反射阴影
hello，我又来做知识的搬运工了。今天的主题是，如何让模型看起来呈现自然光的漫反射出现的阴影轮廓呢？首先，推出threejs官方的一个后处理通道效果，先看demo,在轮廓的边缘出现阴影。示例：three.js examples源码<!DOCTYPE html><html lang="en"> <head> <title>three.js webgl - postprocessing - Screen Space Ambie.原创 2022-03-31 10:54:22 · 954 阅读 · 0 评论 -
Revit-BIM模型轻量化 发光特效
threejs有很多种特效，但是原理是同一个原理就不分开写了，懒，也没必要混分。这门手艺叫做“后处理”，外语叫“PostProcessing”，基本概念请大家多查一查，而对于threejs来说，本质上是利用一个EffectComposer和pass来实现的.EffectComposer中会初始化两个WebGLRenderTarget，一个叫writebuffer，另一个叫readbuffer。在渲染执行的时候，composer会遍历内部所有的pass，然后执行每个pass的渲染，每个pass都会传.原创 2021-12-03 10:01:37 · 1839 阅读 · 3 评论 -
Revit-BIM模型轻量化 关于合批（merge)那些小技巧
减drawcall是我唯一的执念1、有些物体看起来只有2种材质组成，但是有可能groups有上千个。这种物体会出现极多的drawcall,先调整顶点顺序，减少groups吧。减1个groups少一次drawcall2、理论是，只要是纯色的不透明的物体可以全部合并。因为颜色可以用顶点颜色设置，且材质直接换为newTHREE.MeshLambertMaterial({vertexColors:THREE.VertexColors,//顶......原创 2021-09-23 18:36:44 · 1572 阅读 · 3 评论 -
Revit-BIM模型轻量化 帧率控制
最近有些忽悠大侠出来，说他的技术利用“视觉残留”欺骗用户的眼睛，以达到性能优化，有多么牛逼，那么今天我们来研究一下所谓视角欺骗是怎么一回事。第一点：人的眼睛有一种视觉暂留的特性。眼睛的一个重要特性是视觉惰性，即光象一旦在视网膜上形成，视觉将会对这个光象的感觉维持一个有限的时间，这种生理现象叫做视觉暂留性。对于中等亮度的光刺激，视觉暂留时间约为0.1至0.4秒。中国古代的走马灯，就是通过这个特性来实现视觉的动画效果。让我颇为怀念的是20年前跟着我大伯用翻斗车接着十大麻袋的电影胶卷去周边村子播放李连杰的《少原创 2021-09-15 08:48:33 · 1284 阅读 · 1 评论 -
使用ThreeJs搭建BIM模型浏览器-天空盒或底图
一看竟然有5个月没有写东西了，今天写个简单的小技巧吧。如何制作天空盒效果，或者是叠加底图呢？底图效果其中底图的关键在于设置threejs全使用的canvas变成透明，然后把在canvas后面放一个div设置好图片。就3行到位renderer=newTHREE.WebGLRenderer({canvas:document.getElementById('canvasmain'),alpha:true,antialias:true,preserveDrawingB......原创 2021-09-05 07:18:57 · 1830 阅读 · 0 评论 -
cesium+threejs结合实现GIS+BIM大场景-2
最终效果示例的demo我没做，但是可以放一个最终调试完的QModel产品的效果。大概是这个样子：示例网站常见问题1、原理是什么？原理是利用threejs在Canvas上渲染支持背景透明的特性。把两个Canvas叠加在一起，然后在render时，使threejs的camera随Cesium的相机联动。2、如何屏蔽掉表层threejs这个div的鼠标操作，只让底下的cesium响应操作？一句话实现，让某个div忽略所有的鼠标事件：ThreeContainer.style.pointe原创 2021-05-25 15:53:40 · 9867 阅读 · 6 评论 -
使用ThreeJs搭建BIM模型浏览器-CSS3D图层
CSS3D这种技术有些人叫它图层叠加，其实原理就是图层叠加。CSS3D的本质是在Canvas之上罩了一层透明的div，然后把原本的DOM元素通过CSS的变换实现了立体感。用户期望的结果像这样：如何实现的呢，首先我们得先学习一下threejs提供的示例Demohttp://www.qmodel.cn/threejs/three/examples/?q=css3d#css3d_periodictable首先它不是几何信息，只是一些div通过css控制的样式，例如：.element.原创 2021-04-23 09:21:17 · 2933 阅读 · 3 评论 -
QModel-BIM-Revit模型轻量化产品介绍
QModel是一个模型浏览器，基于threejs，支持Revit模型在服务端渲染，性能优秀，欢迎有需要的朋友来了解。原创 2020-12-14 19:20:36 · 2372 阅读 · 2 评论 -
使用ThreeJs搭建BIM模型浏览器，加载GLTF模型
总有朋友问GLTF模型支持浏览吗？IFC模型支持吗？IFC在前面有一篇文章已经介绍过了。有两个办法，第一种，转Obj，目前这个技术是不成熟的，转换过去数据丢失，除了看看，啥都做不了。第二种，自己解读IFC，这个工程浩大，别问我，我也不懂。GLTF是目前国际上对模型交换最好的格式。至少在BIM领域应该是最通用的一种。Threejs官方对这个支持就已经做得很好，在到处找加载器的，总得看一看官方的GLTFLoader吧？官方网址打不开也不要紧，百度搜索，郭隆邦技术博客。或者到我放的一个threejs资源上原创 2020-11-25 11:59:04 · 3139 阅读 · 4 评论 -
一种简单的DWG在线浏览方法
想尽了无数报表，把通过Webgl技术或者直接使用Canvas去渲染图纸，可惜的是，SHX字库解决起来十分艰难。笔者水平有限，无论是ODA还是ARX都不知道怎样把文字转换成WEBGL可以描述的线条和Mesh。如果可以抛开Canvas这种可以测量和图层过滤的需求，单纯浏览的话，使用PDF的途径反而是个最好的选择。首先速度够快，还原度也非常高,批注功能也可以实现，鼠标操作可以仿CAD实现平移、缩放。放出来请各位老板评估，有需要这个解决方案的也可以联系我们。http://www.qmodel.cn/i.原创 2020-11-23 19:29:59 · 14561 阅读 · 1 评论 -
使用ThreeJs搭建BIM模型浏览器，超大模型的分时渲染
使用Threej搭建大场景，超大模型渲染的时候特别卡，渲染构件数量过多，顶点多，数据量大，一次性渲染耗时超长，FPS小，甚至掉到5以下。这种情况直接的体验是，无法操作！那如何让它变成优先响应鼠标操作呢，至少让人体验起来不卡。首先我们看一下Revit，如果模型特别大，转换起来是什么样的。http://www.qmodel.cn/file/20191205/rvt/1.mp4是不是发现Revit也闪得十分厉害？在拖的时候，几十栋的园区，也只剩下1栋房子还在，其他的都等拖完了再慢慢渲染出来。这种特性.原创 2020-11-09 16:15:49 · 8571 阅读 · 7 评论 -
一不小心就深陷的threejs坑-为什么Mesh总是黑色的？
从其他软件导了一些面，组成了Mesh放到你的Scene里面。你的颜色也设置了，光源也加了，还加得特别亮，材质Material也设置了，甚至还设置成了白色！，甚至组成Geometry的各种Color全者改成了白色！但是无论怎么设置，你的Mesh像黑洞一般，十分的黑，连反光都没有。那基本可以肯定，是你的Mesh没有法向量。没有法向量！每一个三角面都没有法向量！法向量增加的方法有好多种。比如1、geometry.computeFaceNormals();2、compute...原创 2020-11-09 14:27:34 · 2732 阅读 · 0 评论 -
使用ThreeJs搭建BIM模型浏览器，第九步-性能优化(2)
感谢网友给的建议。我之前一直是使用threejs的102dev版本，以为geometry共享了就行了，但是这并不是threejs里面所说的Instance。在新的threejs版本中，新增加了几个很有意思的Instance类，这里重点挑InstancedMesh来说。参考文档：http://www.qmodel.cn/threejs/three/docs/index.html#api/en/objects/InstancedMesh查看示例：http://www.qmodel.cn/thre原创 2020-08-19 09:59:10 · 2809 阅读 · 0 评论 -
Forge入门整理
入门整理，有很多内容是从官方手册搬运的，稍微整理了一下流程，方便一些伸手党，现在2020年7月，官方最新版本v7。首先，注册autodesk账号我就不说了。目录准备工作第一步：怎么注册一个App？第二步：如何获取Access_Token?第三步：如何转换模型？将Viewer添加到HTML页面初始化Forge Viewer举例初始化函数Autodesk.Viewing.Initializer创建Viewer实例销毁Viewer实例加载模型回调事件绑定Ca原创 2020-07-31 12:33:30 · 5319 阅读 · 0 评论 -
Revit二次开发-几何信息导出为JSON的方法和源码分享
在此声明这份原代码是在git上下载到的，国内某位大神分享的东西，我调试的时候略微改过一点东西，我当年也是从这一份源码入坑的。下载地址：https://download.csdn.net/download/ztz87/12516773这个源码实现了打开Revit文件，点击选择一个构件，把这个构件的几何信息转为JSON保存为txt文件，放出来供大家研究。其实非常基础，如果各位看官想纯粹实现我傻瓜式导出，可以写个遍历就完了。但是要在优化过程中你可能会遇到这些问题：材质问题，UV问题，几何信息共享问题，几何原创 2020-06-12 10:01:37 · 5206 阅读 · 12 评论 -
使用ThreeJs搭建BIM模型浏览器-第十步 加载优化
最近在尝试了新的传输方式。不过对QModel而言，影响不是很大，因为QModel这个产品只有首次加载是需要从服务器下载模型数据的。首先，把原本的模型文件拆分成多份了。原本只有一个zip数据压缩包，现在改为在服务端拆解为N份，根据构件数量每500个压缩为一个包，同时把数据转换为utf8array.然后生成一个索引文件A。前端首先请求索引文件A。得到数据包的数量，然后进入本文重点。主线程根据解析索引文件，知道了一共有N个数据包，然后开始启用worker下载。如下主线程代码： var.原创 2020-05-27 16:54:22 · 4819 阅读 · 0 评论 -
使用ThreeJs搭建BIM模型浏览器-Revit篇-构件颜色
Revit的构件颜色常见有三种。1、材质颜色2、视图的可见性过滤器3、管道系统的特殊颜色从我的作品中摘抄片段吧1、获取构件材质必须按面去获取material = m_Document.GetElement(face.MaterialElementId) as Material;2、获取过滤器的颜色 ICollection<El......原创 2020-01-12 11:14:32 · 3280 阅读 · 0 评论 -
使用ThreeJs搭建BIM模型浏览器 QModel的诞生记
QModel模型浏览器展示页面：QModel链接入口，支持Revit文件上传，在Web端浏览，并集成与模型相关的业务。首先关于笔者的介绍：2010年机缘巧合进行建筑信息化行业，当时主要还是在做工程造价相关的软件。2015年BIM概念忽然兴趣，随公司开始做一些跟Revit相关的项目，从此对Revit二次开发有一定的了解。2016年Web端并没有很好的解决方案，做了一些跟BIM相关的桌......原创 2019-12-12 23:27:13 · 5085 阅读 · 7 评论 -
Revit文件导出二维视图（view2D)
不废话，直接上源代码。如果有设置了二维视图的生成设置，请添加setupName进行过滤。如果没有，请直接按第一个设置选项导出。 private bool ExportDWGF(Document document,View view,string setupName) { bool exported = false; ...原创 2019-07-09 17:23:24 · 2256 阅读 · 0 评论 -
使用ThreeJs搭建BIM模型浏览器 第五步 漫游
基础的键盘操作漫游其实很好解决。Threejs有一个FlyControl这个控制器，就是完成键盘操作的。废话不说，上图关键代码 <script src="js/controls/FlyControls.js"></script>//用FlyControl代替常用的OrbitControls controls =new THREE.Fly......原创 2019-06-11 08:53:42 · 3570 阅读 · 2 评论 -
使用ThreeJs搭建BIM模型浏览器 第四步 剖切
技术方案：threejs的剖切，是由renderer.clippingPlanes实现的。 this.clipHelpers = new THREE.Group(); this.clipHelpers.add(new THREE.AxesHelper(20)); this.globalPlanes = new THREE.Plane(new THREE...原创 2019-05-17 11:28:24 · 5175 阅读 · 10 评论 -
使用ThreeJs搭建BIM模型浏览器 第三步 浮标
实现效果如下。不用纠结UI为什么很面熟，因为我从某大品牌抄过来的，哈哈。实现原理呢，第一步，获取鼠标点击。第二步，计算交插点。（这里要注意，如果是剖切之后，被剖切部分要舍弃，否则标记在隐藏构件上。第三步，三维点转二维点。第四部，在二维点中画一个div，样式控制为标记。核心代码：1、获取点击。请上看一遍文章。2、三维转二维：//三维座转二维的计算。 t......原创 2019-04-29 19:53:15 · 3077 阅读 · 6 评论 -
使用ThreeJs搭建BIM模型浏览器 IFC篇
前面提到的模型浏览器所浏览的文件，都是基于自己对Revit文件的进行解析，所导出的蹭文件是JSON结构的。有朋友 提到可否浏览IFC文件呢？小作尝试确认是可以的。但是IFC存在非常大的问题：第一，没有模型结构树。第二，没有构件属性信息，只有几何信息。我把IFC上传到广联达的平台上也是一样的，没属性没模型目录，除了看个外观，没其他鸟用。技术路线分享一下吧。：第1步，从R......原创 2019-07-11 08:25:31 · 9125 阅读 · 8 评论 -
使用ThreeJs搭建BIM模型浏览器 第六步 纹理贴图（材质）
上效果图解决思路：Threejs上没啥好说的。看郭老师的博客：http://www.yanhuangxueyuan.com/Three.js_course/texture.htmlRevit上如何导出呢，不好意思，这次真不能贴核心代码了。。...原创 2019-07-25 17:46:45 · 2324 阅读 · 3 评论 -
使用ThreeJs搭建BIM模型浏览器，第七步-测量
前面说到构件选择，实现了点击时与界面记录的焦点。《使用ThreeJs搭建BIM模型浏览器，第二步-构件选择》主要的实现思路是：通过一个全局标记，记录前一次点击（作为起点）和后一次点击（作为终点），求两点之前的距离。然后在终点附近插件一个标签。插件标签的方法前面也提到了。如意门：《使用ThreeJs搭建BIM模型浏览器 第三步 浮标》1，点击，当然要加起点终点的全局变量记录一下。......原创 2019-09-29 10:57:35 · 1546 阅读 · 2 评论 -
使用ThreeJs搭建BIM模型浏览器，第八步-边缘线
这个辅助线条，一般称为辅助线，类似草图里的草稿线条。下面分别是有线条和没有线条的对比。在Threejs对面的边缘添加线条，其实很简单。可以从官方示例中找到。var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );var edges = new THREE.EdgesGeometry( geometry ,89);/......原创 2019-10-09 11:15:44 · 2328 阅读 · 2 评论 -
使用ThreeJs搭建BIM模型浏览器，第一步-显示
threejs既然能够通过三角面构造mesh,肯定是能够通过面片构造出几何模型。各个功能模块的核心代码，在我后续的博客中会一一列举公布出来。实现思路：1、从Revit中导出族名称+构件三角面+构件属性的JSON文本,并压缩成Zip。有朋友问是否需要二次开发。当然是要的，我已经封装好了一个dll,可以免费拿去用。2、Web端解压ZIP，并加载JSON。整个打包解压过程自己定义，不采用第三......原创 2019-04-01 09:02:44 · 20926 阅读 · 8 评论 -
使用ThreeJs搭建BIM模型浏览器，第九步-内存优化(1)
添加到场景的mesh，是通过geometry+materail生成的。如果场景内大量重复的构件，或者大量的构件的材质都是相同的，threejs提供这种方案节省内存：共享geometry 和materail。举例说明：创建300个一样的圆，一般情况可能会写成下面这样for (let i = 0; i < 300; i++) { let geometry = new THREE.Bo......原创 2019-10-11 16:35:07 · 3258 阅读 · 3 评论 -
使用ThreeJs搭建BIM模型浏览器，第二步-构件选择
构件选择其实是鼠标点选的二维坐标与Canvas上的视角方向做射线投影，所穿过的所有构件，第1个即为点选。以下为代码逻辑。部分变量可以根据您的需要，修改成你的变量。点击后把构件设置为半透明。如果有需要，还可以在点击位置放一个标记。如isAddMark示意。this.components 为所有构件的数组。this.selComps 用来保存被点击的构件。 mouseUp(eve...原创 2019-04-22 11:07:09 · 3731 阅读 · 5 评论