3D viewer

The purpose of the 3D viewer is to be able to visualize the Product Tree in a geometric way. In order to be able to use the 3D Viewer the ElementDefinitions/ElementUsages need to have some parameters explained below. When setup correctly the user shall be able to see a 3D scene where can select the different shapes is order to see/change the parameter values.

Parameter Types

Note: The ShortName of the parameter type it must be the same as defined in the table below.

Minimum parameters:

Name	ShortName	ParameterType	Possible Values
Shape	kind	EnumerationParameterType	box, cone, cylinder, sphere, torus, triprism, disc, hexagonalprism, rectangle, triangle
Coordinate	coord	CompoundParameterType	3 Components being of type QuantityKind
Orientation	orientation	ArrayParameterType	9 Components being of type QuantityKind

Optional parameters:

Name	ShortName	ParameterType	Possible Values
Width	wid_diameter	QuantityKind	number
Diameter	wid_diameter	QuantityKind	number
Height	h	QuantityKind	number
Length	l	QuantityKind	number
Thickness	thickn	QuantityKind	number
Color	color	QuantityKind	number

Supported Shapes

The supported shapes are defined below. Depending on the type of shape created some extra parameters to fully define the shape may be needed. For example, to create a Cone the ElementDefinition/ElementUsage must have 5 parameters: Shape, Coordinate, Orientation, Diameter, Height.

Shape	Extra parameters
Cone	Diameter, Height
Cube	Width, Height, Length
Cylinder	Diameter, Height
Disc	Diameter
EquilateralTriangle	Diameter
HexagonalPrism	Diameter, Height
Rectangle	Width, Height
Sphere	Diameter
Torus	Diameter, Thickness
TriangularPrism	Diameter, Height

Center of Rotation

The shapes are always rotated from the origin of it's local coordinate system. Meshes are created with their local space origin at the world space origin and with their local space x, y and z axes aligned with the x, y and z axes of the world space. Most, in not all, of the well known shapes have their local origin at the center of the mesh.

Shape	Local origin
Cone	Center of symmetry axis
Cube	Center of shape
Cylinder	Center of symmetry axis
Disc	Center of shape
EquilateralTriangle	Center of shape
HexagonalPrism	Center of shape
Rectangle	Center of shape
Sphere	Center of shape
Torus	Center of shape
TriangularPrism	Center of longitudinal axis

BabylonJS

BabylonJS is the 3D graphics engine used for displaying the 3D viewer. All the calls to BabylonJS are made using the Microsoft.JSInterop.IJSRuntime interface. In order to handle the calls between C# and the JS script the BabylonInterop service is used located on Services/Interoperability. The JS script is called babylonInterop.js located under the wwwroot/Scripts directory. The name of the function on the BabylonInterop.js script must coincide to the identifier used for the IJSRuntime. For example:

In order to call a JS method from C# something like this is used:

await this.JsRuntime.InvokeVoidAsync("TestMethod");

This means that in the BabylonInterop.js script a method called TestMethod must exist.