What’s the first thing that pops into your mind when you think of an explosion? Is that so?

No, no, no, the explosion diagram now generally refers to three-dimensional assembly drawing, with the explosion diagram engineering and technical personnel in drawing three-dimensional assembly schematic is much easier, not only improve the work efficiency but also reduce the intensity of the work. Now this function is not only used in the assembly of industrial products in the use of instructions, but also more and more widely used in machinery manufacturing, so that processing operators can be at a glance, and no longer like before to see a clear assembly drawing also take half a day.

How to express product assembly relationship more succinctly? Can everyone understand the relationship between the parts of the product in a second? ThingJS explodes to help you solve this problem quickly! You can learn this feature in a fraction of the time! Without further discussion, here’s how to use ThingJS to create explosions quickly.

When an object model needs to make an explosive diagram, it can define and name each sub-object (or sub-model, sub-node) according to the splitting requirements of the explosive diagram in 3DMAX modeling. These child objects are controlled as model child nodes in ThingJS’s online development, and can be moved, added, and so on like individual model object objects.

Two points to note:

1. Considering the performance of the interactive model, it is required to do collapse before uploading the model. The collapsed model does not retain any child nodes (details are fused, so the performance is high). Therefore, only models that have similar local requirements of the above itemized control model should retain sub-object information (without collapse). Although this model has poor performance, it is indeed a special requirement.

2. After splitting, if the child nodes of the model have multiple materials or the number of points exceeds the upper limit, they will be split in online development. For example, 3DMAX names a child node as “Box”.

The complete code of the explosive diagram is as follows:

/ var/loading scenarios code app = new THING. The app ({url: '/ API/scene / 406 e419fae9000a47a4a8899}); Var nodeObjData = {'1': {name: 'base ', offset: [0, 0, -1]}, '2': {name:' protection device ', offset: [0, 1, 0]}, '3' : {name: 'battery' offset: [0, 1, 0]}, '4' : {name: 'exhaust' offset:} [0, 0, 1], '5 _0: {name: 'filters' offset:} [0, 0, 1],' 5 _1: {name: 'filter' offset:} [0.5, 0, 1], '6' : {name: 'supply device, offset:} [0, 0, 1],' 7 ': {name: 'chimney, offset: [- 1, 0, 0]},' 8 ': {name:}' generator ', '9' : {name: 'controller', 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); // Get generator model node object // Create test Button new thing.widget. Button(' expand ', expandObj); New thing.widget. Button(' restore ', unexpandObj); New thing.widget. Button(' top card display ', createAllPanel); New thing.widget. Button(' Top card hidden ', hiddenAllPanel); // Set the camera position and target point 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]); }} /** * hiddenAllPanel() {for (let key in nodeObjData) {hiddenPanel(nodeJsonData[key]); }} /** * expandObj() {function expandObj() {if (expandState) {return; } expandState = true; expandCount++; For (let key in nodeObjData) {// Offset objOffset(nodeJsonData[key], nodeObjData[key].offset); If (expandCount == 0) return; if (expandCount == 0) return; For (let key in nodeObjData) {if (nodeObjData[key].offset) {// Calculate the offset required by the child node during restore, Let offsetValue = [-1 * expandCount * nodeObjData[key].offset[0], 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 fetches all child nodes of an object for (let I = 0; i < obj.subNodes.length; i++) { let subnode = obj.subNodes[i]; Let type = subnode.node.type; let type = subnode.node.type; if (type == 'Mesh') { nodeJson[subnode.name] = subnode; } } return nodeJson; } /** * objOffset(obj, value) {if (! value) return; // Obj. moveTo({offsetPosition: value, // the relative position of its own coordinate system time: 500, // The time required to complete the move: function () { expandState = false; }}); Var panel = obj. GetAttribute ('panel'); var panel = obj. if (panel ! = null) { panel.visible = true; return; } // Create panel panel panel = new thing.widget. panel ({width: '100px', // Set panel width cornerType: }) Panel. AddString (obj, 'name').caption(''); Var UIAnchor = app.create({type: 'UIAnchor', // type parent: obj, // Set the parent object element: DomElement, // The dom element object to bind to localPosition: [0, 0, 0], // Set localPosition to [0, 0, 0] pivotPixel: [-16, 109] // The offset pixel value relative to the upper left corner of the panel, the current value is the center point of the corner marker}); // Change panel text style $('.thingjs_wrap.main.thingjs_ui.thingjs_string-value ').css('text-align', 'center'); obj.setAttribute('panel', uiAnchor); } /** * hiddenPanel(obj) {var panel = obj.getAttribute('panel'); if (panel ! = null) { panel.visible = false; // Set panel to hide}}Copy the code

Explosion figure now, as one of the most effective analysis diagram, in the industrial design, product design, architectural design is a very important link, and make product explosion diagram the ThingJS platform 3 d visualization can watch every component details, manipulate, expansion, reduction, top brand display, more intuitive and efficient compared with the traditional 2 d figure explosion! Find out: www.thingjs.com/