threejs
关注
分享
扫一扫
文章平均质量分 61
2000年的六年级三好学生
建筑领域信息化大搬砖家
展开
-
QModel-BIM-Revit模型轻量化产品介绍
QModel是一个模型浏览器，基于threejs，支持Revit模型在服务端渲染，性能优秀，欢迎有需要的朋友来了解。原创 2020-12-14 19:20:36 · 2425 阅读 · 2 评论
-
基于threejs加载大型BIM模型的优化尝试
threejs实现BIM模型轻量化的一些优化尝试。八叉对，遮挡剔除，LOD原创 2023-07-22 16:46:40 · 3462 阅读 · 4 评论 -
Revit模型在Web端展示的免费方案
问我Revit模型在Web端展示，第一次接触这个行业，也有不少公司没有那么多资源投入，也想着花最少的钱实现项目交付，并且期望有一个可持续发展的路线，将来做大做强不受制于人卡脖子，而且工作不会白费。有的，基于webgl(threejs)的客户端渲染解决方案有免费的，我说的是免费是纯粹从github上找得到的资料，方便一些愿意跳坑的小伙伴精准跳入大深坑，别坑口都找不着。7，交互的优化，比如点选框选，测量，漫游，显隐，透明，染色；8，各种效果，比如自发光，环境光，动画，阴影；......原创 2022-08-31 16:29:35 · 3085 阅读 · 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 · 996 阅读 · 0 评论 -
Revit-BIM模型轻量化 发光特效
threejs有很多种特效，但是原理是同一个原理就不分开写了，懒，也没必要混分。这门手艺叫做“后处理”，外语叫“PostProcessing”，基本概念请大家多查一查，而对于threejs来说，本质上是利用一个EffectComposer和pass来实现的.EffectComposer中会初始化两个WebGLRenderTarget，一个叫writebuffer，另一个叫readbuffer。在渲染执行的时候，composer会遍历内部所有的pass，然后执行每个pass的渲染，每个pass都会传.原创 2021-12-03 10:01:37 · 1862 阅读 · 3 评论 -
Revit-BIM模型轻量化 关于合批（merge)那些小技巧
减drawcall是我唯一的执念1、有些物体看起来只有2种材质组成，但是有可能groups有上千个。这种物体会出现极多的drawcall,先调整顶点顺序，减少groups吧。减1个groups少一次drawcall2、理论是，只要是纯色的不透明的物体可以全部合并。因为颜色可以用顶点颜色设置，且材质直接换为newTHREE.MeshLambertMaterial({vertexColors:THREE.VertexColors,//顶......原创 2021-09-23 18:36:44 · 1616 阅读 · 3 评论 -
Revit-BIM模型轻量化 帧率控制
最近有些忽悠大侠出来，说他的技术利用“视觉残留”欺骗用户的眼睛，以达到性能优化，有多么牛逼，那么今天我们来研究一下所谓视角欺骗是怎么一回事。第一点：人的眼睛有一种视觉暂留的特性。眼睛的一个重要特性是视觉惰性，即光象一旦在视网膜上形成，视觉将会对这个光象的感觉维持一个有限的时间，这种生理现象叫做视觉暂留性。对于中等亮度的光刺激，视觉暂留时间约为0.1至0.4秒。中国古代的走马灯，就是通过这个特性来实现视觉的动画效果。让我颇为怀念的是20年前跟着我大伯用翻斗车接着十大麻袋的电影胶卷去周边村子播放李连杰的《少原创 2021-09-15 08:48:33 · 1308 阅读 · 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 · 1860 阅读 · 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 · 9979 阅读 · 6 评论 -
cesium+threejs结合实现GIS+BIM大场景-1
概述前面已经花费了许多内容去介绍BIM如何搭建了。其实我不太担心抄袭，让有一些节省成本的老板想自己搞引擎的。（你搞去~看是不是能节省成本！）那我们一步步说。有源码放源码。搭不出来说明你基础不好了。首先Cesium入门准备。先下载吧。从这里可以找到：下载Cesium中文网：http://cesium.xin/wordpress/archives/28.html，当然官方最新版一定也要搞一个：https://cesium.com/platform/cesiumjs/此处插播广告。有B原创 2021-04-30 15:53:42 · 6391 阅读 · 3 评论 -
使用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 · 3007 阅读 · 3 评论 -
Revit的顶点法线及threejs渲染圆弧面的渐变亮度
本文主要用于分享基于Revit的法线理论，导出模型后让threejs呈现立体真实的效果。Revit的顶点法线及threejs渲染圆弧面的渐变亮度。法线有什么用的？没有法线能否成模型？可以的，没有法线，模型几何信息照样是完成的，把它送到threejs里面渲染没有问题，但是效果却让人很失望，没有法线，整个模型会成为一个白模一样没有立体感，配合再好的光照也显示不出亮光面和暗光面。这个时候，你可以简单的使用mesh.computeVertexNormals()来解决问题，这是threejs自带的一个计.原创 2021-03-15 20:01:50 · 2005 阅读 · 0 评论 -
使用ThreeJs搭建BIM模型浏览器，加载GLTF模型
总有朋友问GLTF模型支持浏览吗？IFC模型支持吗？IFC在前面有一篇文章已经介绍过了。有两个办法，第一种，转Obj，目前这个技术是不成熟的，转换过去数据丢失，除了看看，啥都做不了。第二种，自己解读IFC，这个工程浩大，别问我，我也不懂。GLTF是目前国际上对模型交换最好的格式。至少在BIM领域应该是最通用的一种。Threejs官方对这个支持就已经做得很好，在到处找加载器的，总得看一看官方的GLTFLoader吧？官方网址打不开也不要紧，百度搜索，郭隆邦技术博客。或者到我放的一个threejs资源上原创 2020-11-25 11:59:04 · 3162 阅读 · 4 评论 -
使用ThreeJs搭建BIM模型浏览器，超大模型的分时渲染
使用Threej搭建大场景，超大模型渲染的时候特别卡，渲染构件数量过多，顶点多，数据量大，一次性渲染耗时超长，FPS小，甚至掉到5以下。这种情况直接的体验是，无法操作！那如何让它变成优先响应鼠标操作呢，至少让人体验起来不卡。首先我们看一下Revit，如果模型特别大，转换起来是什么样的。http://www.qmodel.cn/file/20191205/rvt/1.mp4是不是发现Revit也闪得十分厉害？在拖的时候，几十栋的园区，也只剩下1栋房子还在，其他的都等拖完了再慢慢渲染出来。这种特性.原创 2020-11-09 16:15:49 · 8651 阅读 · 7 评论 -
一不小心就深陷的threejs坑-为什么Mesh总是黑色的？
从其他软件导了一些面，组成了Mesh放到你的Scene里面。你的颜色也设置了，光源也加了，还加得特别亮，材质Material也设置了，甚至还设置成了白色！，甚至组成Geometry的各种Color全者改成了白色！但是无论怎么设置，你的Mesh像黑洞一般，十分的黑，连反光都没有。那基本可以肯定，是你的Mesh没有法向量。没有法向量！每一个三角面都没有法向量！法向量增加的方法有好多种。比如1、geometry.computeFaceNormals();2、compute...原创 2020-11-09 14:27:34 · 2760 阅读 · 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 · 2836 阅读 · 0 评论 -
使用ThreeJs搭建BIM模型浏览器-第十步 加载优化
最近在尝试了新的传输方式。不过对QModel而言，影响不是很大，因为QModel这个产品只有首次加载是需要从服务器下载模型数据的。首先，把原本的模型文件拆分成多份了。原本只有一个zip数据压缩包，现在改为在服务端拆解为N份，根据构件数量每500个压缩为一个包，同时把数据转换为utf8array.然后生成一个索引文件A。前端首先请求索引文件A。得到数据包的数量，然后进入本文重点。主线程根据解析索引文件，知道了一共有N个数据包，然后开始启用worker下载。如下主线程代码： var.原创 2020-05-27 16:54:22 · 4850 阅读 · 0 评论