使用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 flag
        var 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模型浏览器