Hide menu
Visualizing a 3D model

A loaded 3D model can be visualized in the interactive 3D view with the help of WebGL. Under the cover CAD Exchanger Web Toolkit uses three.js implementation for visualization.

The workflow consists of the following steps:

  • Creation of a scene and viewport;
  • Selecting the part representation to be used for visualization;
  • Specifying display mode;
  • Displaying selected part representation.

Details on each step are provided below.

Creation of a scene and viewport

A ModelPrs_ViewPort defines a rectangular frame (or canvas) which is used to display objects in 3D space. ModelPrs_Scene encapsulates a scene, connects with a viewport, and manages object display and interactive selection.

// Create visualization scene
const aScene = new cadex.ModelPrs_Scene();
// Create viewport with default config and div element attach to.
const aViewPort = new cadex.ModelPrs_ViewPort({}, document.getElementById('file-viewer'));
// Attach viewport to scene to render content of it
aViewPort.attachToScene(aScene);

Selecting a desired representation to be used for display

To be displayed with the help of the Web Toolkit, each part (cadex.ModelData_Part) must contain at least one polygonal (mesh) representation. By default, this is automatically ensured at the preparation phase when converting the input file into the CDXFB format. Some formats (e.g. JT) may allow multiple polygonal representations (a concept known as LOD, or Level of Details) attached to a part.

Desired representation (BRep or polygonal; one of available polygonal ones) can be explicitly specified via the representation selector parameter.

//select first available polygonal representation (by default, fine)
const aRepMode = cadex.ModelData_RepresentationMask.ModelData_RM_Any;

Specifying a display mode

The Web Toolkit supports several display modes specified with cadex.ModelPrs_DisplayMode enumeration:

//select first available polygonal representation (by default, fine)
const aDisplayMode = cadex.ModelPrs_DisplayMode.ShadedWithBoundaries;
Wireframe: Displays a model using boundary curves
Shading: Displays a model using shaded display without boundaries
ShadingWithBoundaries: Displays a model using shaded display with B-Rep face boundaries.

Displaying a model

// Convert added model roots into visualization objects and display them
await cadex.ModelPrs_DisplayerApplier.apply(aLoadResult.roots, [], {
displayer: new cadex.ModelPrs_SceneDisplayer(aScene),
displayMode: aDisplayMode,
repSelector: new cadex.ModelData_RepresentationMaskSelector(aRepMode)
});
// Move camera to position when the whole model is in sight
aViewPort.fitAll();

Refer to Tutorial and 3D viewer example for a self-contained demonstration of the visualization with the help of Web Toolkit.