A high performance angular component for displaying 3D representations of bordnet harnesses. Harness element selection, arbitrary coloring and custom views are also supported.
<lib-harness-browser3d
[addHarnesses]="data"
[selectedIds]="selectedIds"
[colors]="colors"
[settings]="settings"
[hooks]="hooks"
(initialized)="addAPI($event)"
(pickedIds)="pickIds($event)"
></lib-harness-browser3d>
class AppComponent {
data: Harness;
selectedIds: string[];
colors: SetColorAPIStruct[];
settings: SettingsAPIStruct;
hooks: HooksAPIStruct;
api: HarnessBrowser3dLibraryAPI;
addAPI(api: HarnessBrowser3dLibraryAPI) {
this.api = api;
}
pickIds(ids: string[]) {
this.pickedIds = ids;
}
}
It is recommended to set the change detection strategy of the parent component to OnPush
. It improves the performance when moving the camera.
Add harnesses by inserting an array of Harness
objects into the addHarnesses
property. Include Harness from api\alias.ts
.
Harness has been generated from assets\geometry-api.yaml
.
Select harness elements by inserting an array of harness element ids into the selectedIds
property.
Click on harness element geometries to pick them. Picking harness elements also selects them. Ids of the picked harness elements are passed in the pickedIds
event.
Set arbitrary colors for harness elements by inserting an array of SetColorAPIStruct
objects into the colors
property. Include SetColorAPIStruct from api\structs.ts
.
Apply settings by setting a SettingsAPIStruct
object as settings
property. Include SettingsAPIStruct from api\structs.ts
.
Hooks are functions that are called during certain points in execution.
-
geometryParser
parses a geometry string into a scene object -
animateBegin
is called before each frame -
animateEnd
is called after each frame
Set hooks by setting a HooksAPIStruct
object as hooks
property. Include HooksAPIStruct from api\structs.ts
.
Default geometries can be replaced by supplied geometries. Set geometryMode
to GeometryModeAPIEnum.loaded
and set geometryParser
to a function that parses the string data into a Scene
object. Open the geometry files and push their contents into the graphics
array on a Harness
object and add the harness.
A HarnessBrowser3dLibraryAPI
object is used to invoke certain actions, like resetting the camera. It is passed in the initialized
event directly after the component has been initialized. Include HarnessBrowser3dLibraryAPI from api\api.ts
.
Predefined and also custom views on the harness geometries are supported. Predefined views are located in the views
folder.
Views operate on string properties that are defined on the input harness data.
{
"id": "exampleId",
"viewProperties": {
"exampleProperty": "exampleValue"
}
}
In this example an exampleProperty
property is added to the object exampleId
with value exampleValue
.
Pass the view into the setView
API function. The previous view is disposed.
Views are instances of View
in views\view.ts
.
class View {
public readonly propertyKey: string;
public readonly defaultValue: string;
public readonly material: Material;
public readonly mapper: (properties: string[]) => BufferAttribute;
}
-
propertyKey
is the property key in the input data and in the vertex shader -
defaultValue
is the default value for harness elements without this property -
material
contains the shaders for this view -
mapper
is a function that processes the property values into a suitable buffer attribute
Built-in shader attributes are controlled by the viewer and can be used by custom views.
-
vec3 pDefaultColor
is the default color of the corresponding harness element -
vec3 pColor
is the specified color as set in thecolors
input property on the angular component -
float pEnabled
is whether the harness element is enabled -
float pDiffState
corresponds to thediffState
property. SeeDiffStateAPIEnum
for details.
Diff
- property
diffState
- values can be unmodified, added, removed, modified_new, modified_old
- hide certain states by setting the display booleans
- example
diffView.displayRemoved = false;
api.setView(diffView);
- canvas element in template
- initialize renderer with canvas element
- animate loop outside angular in ngZone
https://www.ag-grid.com/angular-data-grid/grid-api/ MIT License
- component returns api object
https://threejs.org/manual/#en/picking
- compute mouse positions in pixels
- gpu based picker