疯狂的蒲公英

主要能力：实现Revit、Gltf模型在线浏览，符合BIM业务场景的需求。集成方案：私有化部署、可开源。

一看竟然有5个月没有写东西了，今天写个简单的小技巧吧。如何制作天空盒效果，或者是叠加底图呢？底图效果其中底图的关键在于设置threejs全使用的canvas变成透明，然后把在canvas后面放一个div设置好图片。就3行到位renderer=newTHREE.WebGLRenderer({canvas:document.getElementById('canvasmain'),alpha:true,antialias:true,preserveDrawingB......

想尽了无数报表，把通过Webgl技术或者直接使用Canvas去渲染图纸，可惜的是，SHX字库解决起来十分艰难。笔者水平有限，无论是ODA还是ARX都不知道怎样把文字转换成WEBGL可以描述的线条和Mesh。如果可以抛开Canvas这种可以测量和图层过滤的需求，单纯浏览的话，使用PDF的途径反而是个最好的选择。首先速度够快，还原度也非常高,批注功能也可以实现，鼠标操作可以仿CAD实现平移、缩放。放出来请各位老板评估，有需要这个解决方案的也可以联系我们。http://www.qmodel.cn/i.

使用Threej搭建大场景，超大模型渲染的时候特别卡，渲染构件数量过多，顶点多，数据量大，一次性渲染耗时超长，FPS小，甚至掉到5以下。这种情况直接的体验是，无法操作！那如何让它变成优先响应鼠标操作呢，至少让人体验起来不卡。首先我们看一下Revit，如果模型特别大，转换起来是什么样的。http://www.qmodel.cn/file/20191205/rvt/1.mp4是不是发现Revit也闪得十分厉害？在拖的时候，几十栋的园区，也只剩下1栋房子还在，其他的都等拖完了再慢慢渲染出来。这种特性.

感谢网友给的建议。我之前一直是使用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

假如已经有了一个main.js文件。需要要使用worker去分担主线程的压力，你可能 需要异步下载，需要解析一些数据，那你首先创建一个worker.js文件。main.js需要做这件事：function workerStart(){ let worker = new Worker("worker.js");var download_url="http://you-download-url"; worker.postMessage({url:download_url}); //向worke

最近在尝试了新的传输方式。不过对QModel而言，影响不是很大，因为QModel这个产品只有首次加载是需要从服务器下载模型数据的。首先，把原本的模型文件拆分成多份了。原本只有一个zip数据压缩包，现在改为在服务端拆解为N份，根据构件数量每500个压缩为一个包，同时把数据转换为utf8array.然后生成一个索引文件A。前端首先请求索引文件A。得到数据包的数量，然后进入本文重点。主线程根据解析索引文件，知道了一共有N个数据包，然后开始启用worker下载。如下主线程代码： var.

QModel模型浏览器展示页面：QModel链接入口，支持Revit文件上传，在Web端浏览，并集成与模型相关的业务。首先关于笔者的介绍：2010年机缘巧合进行建筑信息化行业，当时主要还是在做工程造价相关的软件。2015年BIM概念忽然兴趣，随公司开始做一些跟Revit相关的项目，从此对Revit二次开发有一定的了解。2016年Web端并没有很好的解决方案，做了一些跟BIM相关的桌......

添加到场景的mesh，是通过geometry+materail生成的。如果场景内大量重复的构件，或者大量的构件的材质都是相同的，threejs提供这种方案节省内存：共享geometry 和materail。举例说明：创建300个一样的圆，一般情况可能会写成下面这样for (let i = 0; i < 300; i++) { let geometry = new THREE.Bo......

这个辅助线条，一般称为辅助线，类似草图里的草稿线条。下面分别是有线条和没有线条的对比。在Threejs对面的边缘添加线条，其实很简单。可以从官方示例中找到。var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );var edges = new THREE.EdgesGeometry( geometry ,89);/......

前面说到构件选择，实现了点击时与界面记录的焦点。《使用ThreeJs搭建BIM模型浏览器，第二步-构件选择》主要的实现思路是：通过一个全局标记，记录前一次点击（作为起点）和后一次点击（作为终点），求两点之前的距离。然后在终点附近插件一个标签。插件标签的方法前面也提到了。如意门：《使用ThreeJs搭建BIM模型浏览器 第三步 浮标》1，点击，当然要加起点终点的全局变量记录一下。......

上效果图解决思路：Threejs上没啥好说的。看郭老师的博客：http://www.yanhuangxueyuan.com/Three.js_course/texture.htmlRevit上如何导出呢，不好意思，这次真不能贴核心代码了。。...

前面提到的模型浏览器所浏览的文件，都是基于自己对Revit文件的进行解析，所导出的蹭文件是JSON结构的。有朋友 提到可否浏览IFC文件呢？小作尝试确认是可以的。但是IFC存在非常大的问题：第一，没有模型结构树。第二，没有构件属性信息，只有几何信息。我把IFC上传到广联达的平台上也是一样的，没属性没模型目录，除了看个外观，没其他鸟用。技术路线分享一下吧。：第1步，从R......

基础的键盘操作漫游其实很好解决。Threejs有一个FlyControl这个控制器，就是完成键盘操作的。废话不说，上图关键代码 <script src="js/controls/FlyControls.js"></script>//用FlyControl代替常用的OrbitControls controls =new THREE.Fly......

技术方案：threejs的剖切，是由renderer.clippingPlanes实现的。 this.clipHelpers = new THREE.Group(); this.clipHelpers.add(new THREE.AxesHelper(20)); this.globalPlanes = new THREE.Plane(new THREE...

实现效果如下。不用纠结UI为什么很面熟，因为我从某大品牌抄过来的，哈哈。实现原理呢，第一步，获取鼠标点击。第二步，计算交插点。（这里要注意，如果是剖切之后，被剖切部分要舍弃，否则标记在隐藏构件上。第三步，三维点转二维点。第四部，在二维点中画一个div，样式控制为标记。核心代码：1、获取点击。请上看一遍文章。2、三维转二维：//三维座转二维的计算。 t......

构件选择其实是鼠标点选的二维坐标与Canvas上的视角方向做射线投影，所穿过的所有构件，第1个即为点选。以下为代码逻辑。部分变量可以根据您的需要，修改成你的变量。点击后把构件设置为半透明。如果有需要，还可以在点击位置放一个标记。如isAddMark示意。this.components 为所有构件的数组。this.selComps 用来保存被点击的构件。 mouseUp(eve...

threejs既然能够通过三角面构造mesh,肯定是能够通过面片构造出几何模型。各个功能模块的核心代码，在我后续的博客中会一一列举公布出来。实现思路：1、从Revit中导出族名称+构件三角面+构件属性的JSON文本,并压缩成Zip。有朋友问是否需要二次开发。当然是要的，我已经封装好了一个dll,可以免费拿去用。2、Web端解压ZIP，并加载JSON。整个打包解压过程自己定义，不采用第三......

今年刚刚接触threejs。这玩意封装得挺不错。为了使大家感观上能够了解threejs.这里直接分享一段代码。看完就知道threejs的套路了。所有的学习资料，源代码，从github上已经足够。5000多的源码分享，天啊。。。https://github.com/search?q=threejs有几个例子也比较好的：https://github.com/luosijie/threej...