Model loading

Viewer module supports loading and displaying model in glTF 2.0 format. Also viewer supports loading of some other formats like OBJ, STL, WRL, but loading of GLTF is recommended, because it is the most optimized format for the viewer. To load file to the Viewer you can create new instance of OccViewer.InteractiveMesh object and call OccViewer.InteractiveMesh.openUrlAsync or OccViewer.InteractiveMesh.openFromFile or OccViewer.InteractiveMesh.openFromMemory functions. These functions upload model structure information and materials to the memory. The geometry is not computed on this step.

var aModelPath = "/models/as1-oc-214-obf.glb";

let aCurrentModel = new InteractiveMesh(OccViewerModule)
await aCurrentModel.openUrlAsync(aModelPath, true)
Copy

To load the geometry you should call OccViewer.InteractiveMesh.loadData function. To display loaded geometry you can set OccViewer.InteractiveMesh.visible = true. After changing properties and calling some functions which change graphical presentation on viewer window you have to redraw the view manually by calling OccViewer.OccViewer.updateView function. Some functions have special flag which responses for updating the view in this case you don't need to call updateView().

aCurrentModel.loadData()
.then(() =>
{
  aCurrentModel.visible = true;
  OccViewerModule.camera.fitAllObjects(true, false);
  OccViewerModule.ground.visible = true;
  OccViewerModule.updateView();
});
Copy

In some situations you don't need to load (compute geometry) of the whole model. In this case you can create another OccViewer.InteractiveMesh and pass complex id string consisting of strings separated by \n and load and display geometry only for given ids list, or by using OccViewer.OccViewer.interactiveContext functions.

aCurrentModel.loadData()
.then(async () =>
{
  await OccViewerModule.interactiveContext.loadObjectListAsync('obj1:as1:l-bracket-assembly_1',true);
  OccViewerModule.interactiveContext.displayObjectList('obj1:as1:l-bracket-assembly_1',true);
  OccViewerModule.camera.fitAllObjects(true, false);
  OccViewerModule.ground.visible = true;
  OccViewerModule.updateView();
});
Copy

Model structure

Every graphic object created or loaded to the Viewer have an id. It can be unique or not. Autogenerated or manually set. Please check documentation of methods which response for model opening or creating. Some models which can be loaded in the Viewer can have tree-like hierarchy structure. Information of this structure for some object can be extracted from its id.

For example after opening some file you will have an id for some object obj1:as1:l-bracket-assembly_1:bolt1. Symbol : represents selection path separator. If we take a look at this id we can say that main node is obj1 and for example bolt1 is a child of l-bracket-assembly_1 node. If you want to manipulate the main node (obj1) or parent node of bolt1 you have to use obj1 or obj1:as1:l-bracket-assembly_1 selection paths with Viewer API.

For example you can create new object based on this id to manipulate it.

// create new object which contains week reference to an existing object using its selection path id.
let aNode = new InteractiveMesh(OccViewerModule, 'obj1:as1:l-bracket-assembly_1')
Copy

Object selection

The selection ( OccViewer.Selection) provides a comprehensive interface for managing object selection, filtering, and highlighting within the viewer. It allows developers to customize the selection process and its behavior.

The OccViewer.AIS_SelectionScheme enumeration defines the selection strategies supported by the SelectionManager. These schemes correspond to the AIS_SelectionScheme enumeration in C++ and dictate how detected objects are added to, removed from, or toggled in the selection set. The available schemes include basic operations like replacing or clearing selections, as well as more advanced behaviors like combining selections or ensuring retention of elements under specific conditions.

The [SelectionManager]( OccViewer.SelectionManager), accessible through OccViewer.selectionManager, centralizes control over selection behavior. It manages properties such as the highlight color, selection filters, and default selection behavior. Through this interface, developers can define selection criteria, customize visual feedback for selected objects, and integrate their logic for dynamic or static selection states.

Features:

• Highlighting and Colors: Configure distinct colors for object highlights and selections to improve visual clarity.
• Filtering: Define selection filters that restrict user interactions to specific object sets, using either string-based or list-based configurations.
• Dynamic Selection: Enable or disable dynamic highlighting, which provides real-time feedback as users interact with the scene.
• Selection State Management: Set default selection states for all objects or override them for specific cases.
• Tracking Selection Changes: Use event callbacks like OccViewer.UserEvents.onSelectedObjectsChanged to respond to selection updates.

// activate dynamic selection
OccViewerModule.selectionManager.toDynamicHighlight = true;
//  getting of current selection objects
OccViewerModule.eventManager.addEventListener(
    'onSelectedObjectsChanged',
    function() {
      const aSelObjects = OccViewerModule.selectionManager.selectedObjects;
      for (const aCallback of anOnSelectionChangeCallbacks) {
        aCallback(aSelObjects);
      }
      return 0;
    },
);
Copy

PBR metallic-roughness

Physically Based Rendering (PBR) materials with the metallic-roughness workflow are supported in the OCCT 3D Viewer, allowing for high-quality rendering that closely simulates real-world materials. For detailed information on how to use and manage PBR metallic-roughness materials in your application, please refer to the PBR metallic-roughness