使用ThreeJs搭建BIM模型浏览器，超大模型的分时渲染

使用Threej搭建大场景，超大模型渲染的时候特别卡，渲染构件数量过多，顶点多，数据量大，一次性渲染耗时超长，FPS小，甚至掉到5以下。这种情况直接的体验是，无法操作！

那如何让它变成优先响应鼠标操作呢，至少让人体验起来不卡。首先我们看一下Revit，如果模型特别大，转换起来是什么样的。

是不是发现Revit也闪得十分厉害？在拖的时候，几十栋的园区，也只剩下1栋房子还在，其他的都等拖完了再慢慢渲染出来。这种特性是利用了javascript的分时渲染，原型是把10万个构件分成10份分批提交timeout去执行，把一个大任务碎片化。以浏览器的机制，小任务中间可以插入鼠标操作，同时呢，鼠标操作时需要重新渲染，也即要求中断掉前面的渲染，可以上www.qmodel.cn体验大模型渲染效果。中断掉前面的渲染，避免资源的浪费，这种情况下即使FPS只有5，但是你感觉不到卡顿的。

这种技术也有人叫它渐进式渲染。其实是一种分时处理技术。

在前端渲染改造后变成这个样子

http://www.qmodel.cn

咱跟别人不一样，别人分享技术有意含糊不清，让伙伴们踩坑。咱要不么分享，而分享的东西必须是正确的。代码来了

当然实际上优化远远不仅于此，还是期望小伙伴们找QModel购买，无论直接买产品去部署还是买源码，都是可以聊聊的。请到www.qmodel.ch加我们好友。

function renderObjects( renderList, scene, camera ) {
//用咱写的替换掉别人的var newRender = true;//new render request flagvar result = [];var randerOnece = 2000;//一次渲染2000个构件for(var i=0;i<renderList.length;i+=randerOnece){result.push(renderList.slice(i,i+randerOnece));}if(result.length === 0){return;}var curIndex = 0;doTimeout();function doTimeout(){//分时加载if(curIndex < result.length){ if(randerStop)return;        //randerStop作为全局变量，如果下一次渲染开始了，前面一次渲染就标记为true，强行中断掉      var onceRenderObjects = result[curIndex];renderObjects_threejs(onceRenderObjects);
//提交当前批渲染,renderObjects_threejs为原来threejs的那部分代码curIndex ++ ;setTimeout(doTimeout,1);//准备下一批渲染                }}

自研引擎产品试用，demo下载：

QModel-BIM模型浏览器

使用ThreeJs搭建BIM模型浏览器，超大模型的分时渲染相关推荐

使用ThreeJs搭建BIM模型浏览器 QModel的诞生记
QModel模型浏览器展示页面:QModel链接入口,支持Revit文件上传,在Web端浏览,并集成与模型相关的业务. 首先关于笔者的介绍: 2010年机缘巧合进行建筑信息化行业,当时主要还是在做工程 ...
使用ThreeJs搭建BIM模型浏览器第六步纹理贴图（材质）
上效果图解决思路: Threejs上没啥好说的.看郭老师的博客:three.js纹理贴图_郭隆邦技术博客 Revit上如何导出呢,不好意思,这次真不能贴核心代码了.. 自研引擎产品试用,demo下载 ...
使用ThreeJs搭建BIM模型浏览器-CSS3D图层
CSS3D这种技术有些人叫它图层叠加,其实原理就是图层叠加.CSS3D的本质是在Canvas之上罩了一层透明的div,然后把原本的DOM元素通过CSS的变换实现了立体感. 用户期望的结果像这样: 如何 ...
使用ThreeJs搭建BIM模型浏览器-第十步加载优化
最近在尝试了新的传输方式.不过对QModel而言,影响不是很大,因为QModel这个产品只有首次加载是需要从服务器下载模型数据的. 首先,把原本的模型文件拆分成多份了.原本只有一个zip数据压缩包,现 ...
技术干货｜什么是大模型？超大模型？Foundation Model？
目前Foundation Model或者是大模型,特别地火,接下来介绍什么是大模型,大模型的基本概念:接着看看大模型的实际作用,然后基于这些实际作用,我们简单展开几个应用场景.最后就是介绍支持大模型训 ...
Web端3D可视化引擎HOOPS Communicator读取10G超大模型测试 | 数字孪生技术
前言: HOOPS Communicator是专为在云端和Web上构建工程应用程序的3D开发工具包.它针对Web工作流.浏览器和工程图形进行了优化.研发小组花了20多年的时间来研发HOOPS Visu ...
超详细——手把手教你用threejs实现一个酷炫的模型发光扫描效果(一)
前言模型特效是大家在3d可视化项目所追求的,但很多人苦于无法实现一个好的模型效果,本次就手把手一步一步教你实现一个酷炫的模型发光扫描特效,帮让你的项目提升一个逼格.话不多说,先上效果: 本文所使用的 ...
Flask项目实战——10—(前台板块页面搭建、文本编辑页面搭建、发布帖子信息前验证权限、帖子模型搭建、发布帖子功能、帖子信息渲染到前后台页面)
1.前台板块页面搭建视图文件查询数据传输到前台界面:前台蓝图文件:apps/front/views.py 注意数据的收集方法和数据传输的类型. # -*- encoding: utf-8 -*- & ...
ThreeJs场景、相机、渲染器、添加obj模型和删除模型
相机效果图 1.安装threeJs npm install three 2.安装加载obj和mtl文件的插件 npm i --save three-obj-mtl-loader 3.安装轨道控件插件 ...

使用ThreeJs搭建BIM模型浏览器，超大模型的分时渲染

使用ThreeJs搭建BIM模型浏览器，超大模型的分时渲染相关推荐

最新文章

热门文章