关于javascript:从零开始学习3D可视化之爆炸图

说到爆炸图你第一工夫想到的是什么？是这样吗？

不不不，爆炸图当初个别指平面装配图，有了爆炸图工程技术人员在绘制平面拆卸示意图时就显得轻松多了，不仅进步了工作效率还缩小了工作的强度。现在这项性能不仅仅是用在工业产品的拆卸应用阐明中，而且还越来越宽泛的利用到机械制造中，使加工操作人员能够高深莫测，而不再像以前一样看清楚个装配图也要花上半天的工夫。

如何能更简洁地表述产品拆卸关系？可能让所有人一秒看懂产品各零部件之间的关系？ThingJS 的爆炸图性能帮你疾速解决这一问题！你只需破费很短的工夫，就能学会这个性能！闲话少说，上面就为大家介绍如何利用 ThingJS 来疾速制作爆炸图成果，快来看看吧！
一个物体模型要做爆炸图，能够在 3dmax 建模时依据爆炸图拆分须要，定义并命名各子对象（或叫子模型、子节点）。这些子对象在 ThingJS 在线开发中可作为模型子节点来管制，这些子节点可像独自模型对象物体一样进行挪动、增加事件等操作。

要留神两点：
1. 出于互动模型性能思考，要求在模型上传前做塌陷。经塌陷的模型不会再有子节点保留（交融掉细节，故性能较高）。因而只有确有相似上述分项管制模型部分要求的模型才应该保留子对象信息（不做塌陷），尽管这样模型性能较差，但的确是非凡须要。

2. 拆分后模型子节点如果有多材质或点数超过下限在在线开发中会进行拆分，例如：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);
 
 // 设置摄像机地位和指标点
 app.camera.position = [8.607320990228896, 4.659529165486485, 2.463883920016444];
 app.camera.target = [5.457047915958038, 2.0011500043525103, -3.0191956945367244];
 
})
 
/**
 * 显示所有顶牌
 */
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', // 设置面板宽度
 cornerType: 'polyline' // 没有角标 none，没有线的角标 noline，折线角标 polyline
 })
 panel.addString(obj, 'name').caption(''); // 绑定物体身上相应的属性数据
 // 创立 UIAnchor 面板
 var uiAnchor = app.create({
 type: 'UIAnchor', // 类型
 parent: obj, // 设置父物体
 element: panel.domElement, // 要绑定的 dom 元素对象
 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 平台制作产品爆炸图 3D 可视化可观看每个部件细节，自主操控，开展、还原、显示顶牌等，相比传统 2D 爆炸图更加直观高效！点击理解：https://www.thingjs.com/