Part Arranger Class

arrange2

arrange3

bbb




This class essentially “dissolves” a model (or a subset of a model) into its individual pieces and rearranges those pieces in a stacked grid. It makes for an interesting effect but it also has “real” use cases, mainly in visualizing the content of a model in quantity take-off scenarios, analyzing the content of a model or to temporarily “pull out” relevant parts of an assembly or building model for further inspection.

The current implementation bases the positioning of the grid on the Up-Axis and the bounding box of the loaded model and scales the item-grid relative to the models initial size. The matrices of each arranged element are modified “in place” and the structure of the model is not altered.

This class works great in combination with the Advanced Model Tree search class you can also find in the forum to quickly extract relevant nodes to “pull out” and visualize outside of the model.


Usage:

myPartArranger = new PartArranger(hwv);

Creates a new PartArranger object

myPartArranger.arrange(items);

Arranges all elements in the items array which is an array of arrays each containing the id of the node to arrange. The elements will be arranged on a grid in the order of the items array with the elements in the individual arrays stacked on top of each other. See below for example code on creating the items array:

let items = [];

let item1= [];                            
item1.push({nodeid: 2});
item1.push({nodeid: 3});

items.push(item1);

let item2= [];
item2.push({nodeid: 4});

items.push(item2);

myPartArranger.arrange(items);



myPartArranger.revert(items);

Reverts all nodes in the items array back to their original position. If no item array is specified all arranged nodes will be reverted.

myPartArranger.reset();

Instantly resets the model back to its original state and reinitializes the class.

myPartArranger.setScaleFactor(0.1)

Sets the scale factor that determines the overall size of the arranged items. Default is: 0.04

myPartArranger.setAnimationDuration(4000)

Sets the time it takes to arrange the items in milliseconds. Default is 2000

myPartArranger.setAnimationDelayDuration(1000)

Sets the total time for the animation delay, which is the delay before each element is arranged. This number is divided by the total number of arranged items. The animation duration + the delay duration will be the total time it takes for all arranged elements to be positioned. Default is 3000.

myPartArranger.setRelativeScale(true)

If set to true all arranged elements will be rescaled relative to the largest element in the item array. Otherwise all elements will be scaled to the same size. Default is false.



The following functions are “helper” functions that call into the arrange function above. You can use these functions as examples on how to create your own custom arrange functions.

myPartArranger.arrangeBodies();

Arranges all body nodes under the currently selected nodes. All items referring to the same instances will be stacked. The grid is sorted by the number of instances.
If you pass “true” to this function those nodes will be reverted back to their original position.

myPartArranger.arrangeFromSelection();

Arranges all currently selected nodes. All items with the same node name will be stacked. The elements are sorted by the number of nodes with the same name.
If you pass “true” to this function those nodes will be reverted back to their original position.

myPartArranger.arrangeFromSelectionChildren();

Arranges all child nodes under the currently selected node. All items with the same node name will be stacked. The elements are sorted by the number of nodes with the same name.
If you pass “true” to this function those nodes will be reverted back to their original position.


Below is the code for the Part Arranger class. Besides the standard HOOPS Communicator libraries and jQuery it uses quaternion.js and anime.js for the item animations. Please make sure to include those libraries in your project.

It is important to note that this code is not production-ready and provided “as-is”. It is meant as a starting point for your own development and as an example of some of the functionality and concepts used in HOOPS Communicator.

If you have any questions or comments, found a bug or have suggestions for additional features or improvements, please don’t hesitate to post about it here in the forum.

PartArranger.js (15.1 KB)

6 Likes

Could you send me the parameter data of the example in the article? Thank you

Hi,

I’m not sure I understand the question, there are very few parameters required for this library. In any case, to make it easier to use this class I have created a minified version of the library with all dependencies included as well as a public GitHub project that includes a demo of the functionality.

You can find the GitHub project here:
https://github.com/techsoft3d/ts3d-hc-partarranger

The library itself is in the /dist folder of the project or you can download it here:
hcPartArranger.min.js (31.4 KB)

Again, there are no more dependencies (besides HOOPS Communicator) if you are using the minified library.

To run the demo from the GitHub project simply navigate to the dev/public folder and open viewer.html (using LiveServer from VS-Code in this case):
http://127.0.0.1:5500/dev/public/viewer.html?scs=models/microengine.scs

After the model is loaded, select a few parts and choose “Arrange from Selection” from the top-right menu (or one of the other options).

Please don’t hesitate to get back to me with additional questions.

1 Like

Because English is not my native language, I may not express it accurately. I’m very sorry. However, your answer has solved my problem. I have understood the usage of this class through your demo. Thank you very much.

1 Like

I have fixed some bugs and updated the documentation for this library. I have also added a live demo:

https://3dsandbox.techsoft3d.com/?snippet=1sFNF2Ojuj0a6VhGhBeMV9&autorun=true&fullscreen=true

Github Project:
https://github.com/techsoft3d/ts3d-hc-partarranger

1 Like

I have understood the usage of this class, but there are still some doubts about the order of input parameters.
For example, how to write parameters so that they can be arranged in a neat and layered manner like the model in the article,
The results of my arrangement are always uneven.
Below are my input and arrangement effects:

let items = [[{ nodeid: 3 }, { nodeid: 4 }, { nodeid: 5 }], [{ nodeid: 6 }, { nodeid: 7 }, { nodeid: 8 }], [{ nodeid: 9 }, { nodeid: 10 }, { nodeid: 11 }], [{ nodeid: 12 }, { nodeid: 13 }, { nodeid: 14 }], [{ nodeid: 15 }, { nodeid: 16 }, { nodeid: 17 }], [{ nodeid: 18 }, { nodeid: 20 }, { nodeid: 21 }, { nodeid: 22 }]]
const myPartArranger = new PartArranger(hwv)
myPartArranger.arrange(items)

It looks like you have included one of the top level model nodes into one of the arrays (nodeid 3) which really does not make sense. Here is the result I’m getting when removing it. Remember that the floors (in this case) get stacked based on the array groups you passed into the function:

https://3dsandbox.techsoft3d.com/?snippet=82ba2QoSX0L5VuiNfpKK7R

2 Likes