3D罕用到塌陷工具，以开释内存使电脑更加晦涩，不过塌陷后的模型将不具备原始的批改参数，这都被整合了。ThingJS提供对塌陷后建模的3D对象开发与管制。
明天来讲讲如何基于js语法来开发一个物体模型拆解开展的成果，业余名称叫“物体爆炸图”，规范ThingJS体系模型出于互动模型性能思考，都要求在模型上传前做塌陷，这种建模细节对于晋升3D开发效率很有必要，目标是缩小模型对内存的占用。
在3D开发之前，模型自身会重叠很多命令，占用很大一部分内存和CPU，拖慢电脑，所以针对模型进行塌陷后（指的是把很多个物体合并成一个，转换为一个命令可编辑多边形或可编辑网格），就会去除这些多余的命令参数，不再花工夫记录和存储，从而放慢运行速度。
制作物体模型时，依据爆炸图中各个整机的拆分须要，针对子模型或子节点定义并命名物体子对象，在3DMAX等建模软件里就能创立子对象。这些子对象在ThingJS在线开发中可作为模型子节点来管制，可能像独自模型对象物体一样进行挪动、增加事件等操作。
拆分后磨性子节点如果有多材质或点数超过下限，那在ThingJS开发中会持续拆分，并在子节点中被命名成组，组内持续拆分“01”、“02”等对象。例如：3dmax命名， 一个子节点名字为“box”，因为该子节点应用了多种材质，该子节点在在线开发中会被命名成组，组内会被拆分并命名为“box_0”，“box_1”等对象。
留神经塌陷的模型不再有子节点保留，只有上述分项管制模型部分要求，保留已命名的子对象信息，最大水平上进步开发性能，又满足模型拆分的非凡须要。
官网示例请各位看官参考：
// 加载场景代码 var app = new THING.App({ url: '/api/scene/406e419fae9000a47a4a8899'});// 发电机模型节点数据var nodeObjData = { '1': {name: '机座', offset: [0, 0, -1]}, '2': {name: '保护装置', offset: [0, -1, 0]}, '3': {name: '电瓶', offset: [0, -1, 0]}, '4': {name: '排气口', offset: [0, 0, 1]}, '5_0': {name: '过滤器', offset: [0, 0, 1]}, '5_1': {name: '过滤网', offset: [0.5, 0, 1]}, '6': {name: '供应安装', offset: [0, 0, 1]}, '7': {name: '烟囱', offset: [-1, 0, 0]}, '8': {name: '发电机'}, '9': {name: '控制器', offset: [0, 1, 0]}}// 发电机模型节点对象var nodeJsonData = null;// 发电机对象var generatorObj = null;// 发电机开展状态var expandState = false;// 发电机开展次数var expandCount = 0;// 场景加载实现后执行app.on('load', function (ev) { // 查问发电机对象 generatorObj = app.query('#generator')[0] // 获取发电机模型节点对象 nodeJsonData = getNode(generatorObj); // 创立测试按钮 new THING.widget.Button('开展', expandObj); new THING.widget.Button('还原', unexpandObj); new THING.widget.Button('顶牌显示', createAllPanel); new THING.widget.Button('顶牌暗藏', hiddenAllPanel);})/** * 阐明：显示所有顶牌 */function createAllPanel(){ for (let key in nodeObjData) { nodeJsonData[key].name = nodeObjData[key].name; createPanel(nodeJsonData[key]); }}/** * 阐明：暗藏所有顶牌 */function hiddenAllPanel(){ for (let key in nodeObjData) { hiddenPanel(nodeJsonData[key]); }}/** * 阐明：开展物体 */function expandObj() { // 避免发电机在执行一次开展过程中屡次点击 if (expandState) { return; } expandState = true; expandCount++; for (let key in nodeObjData) { // 各子节点进行偏移 objOffset(nodeJsonData[key], nodeObjData[key].offset); }}/** * 阐明：还原物体 */function unexpandObj() { // 开展次数为0，代表未开展 if (expandCount == 0) { return; } for (let key in nodeObjData) { if(nodeObjData[key].offset){ // 计算还原时子节点须要进行的偏移量，数值为 -1 * 开展次数 * nodeObjData中定义的该子节点对应的偏移量 let offsetValue = [-1 * expandCount * nodeObjData[key].offset[0], -1 * expandCount * nodeObjData[key].offset[1], -1 * expandCount * nodeObjData[key].offset[2]] objOffset(nodeJsonData[key], offsetValue); } } expandCount = 0;}/** * 阐明：获取节点对象 */function getNode(obj) { let nodeJson = {}; // obj.subNodes 即可获取到一个物体的所有子节点 for (let i = 0; i < obj.subNodes.length; i++) { let subnode = obj.subNodes[i]; // 获取物体子节点对象中node属性的type值，只有当type值为Mesh时，能力对物体增加事件 let type = subnode.node.type; if(type == 'Mesh'){ nodeJson[subnode.name] = subnode; } } return nodeJson;}/** * 阐明：物体偏移 */function objOffset(obj, value) { if (!value) { return; } // 物体挪动 obj.moveTo({ offsetPosition: value, // 本身坐标系下的绝对地位 time: 500, // 挪动实现须要的工夫 complete: function () { expandState = false; } });}/** * 阐明：创立面板 */function createPanel(obj) { // 判断是否曾经创立过面板，如果已创立，显示，否则创立面板 var panel = obj.getAttribute('panel'); if (panel != null) { panel.visible = true; return; } // 创立panel panel = new THING.widget.Panel({ // 设置面板宽度 width: '100px', // 没有角标 none ，没有线的角标 noline ，折线角标 polyline cornerType: 'polyline' }) // 绑定物体身上相应的属性数据 panel.addString(obj, 'name').caption(''); // 创立UIAnchor面板 var uiAnchor = app.create({ // 类型 type: 'UIAnchor', // 设置父物体 parent: obj, // 要绑定的dom元素对象 element: panel.domElement, // 设置 localPosition 为 [0, 0, 0] localPosition: [0, 0, 0], // 绝对于面板左上角的偏移像素值，以后用值是角标的中心点 pivotPixel: [-16, 109] }); // 更改面板文本款式 $('.ThingJS_wrap .main .ThingJS_UI .ThingJS_string-value').css('text-align', 'center'); obj.setAttribute('panel', uiAnchor);}/** * 阐明：暗藏面板 */function hiddenPanel(obj) { var panel = obj.getAttribute('panel'); if (panel != null) { panel.visible = false; }}ThingJS基于WEBGL的3D框架，纯JS语法搭建，对物联网开发者十分敌对！