The cursor to add.
Optionalpriority: number
The priority of the cursor.
A disposable that can be used to remove the cursor.
See CursorManager for constants to pass to priority.
ReadonlyannotationsThe annotation controller for accessing annotations associated with the scene view.
Enables or disables the default mouse and touch interactions provided by the viewer. Enabled by default.
The type of camera model to represent the scene with. Can be either perspective or orthographic, and defaults to perspective.
ReadonlycanvasesThe controller for accessing canvases and their associated markup.
OptionalclientThe Client ID associated with your Vertex Application.
OptionalconfigAn object or JSON encoded string that defines configuration settings for the viewer.
Sets the default environment for the viewer. This setting is used for auto-configuring network hosts.
Use the config property for manually setting hosts.
OptionalcrossSpecifies options related to presentation of cross-sections. Defaults to showing the cross-section with an end cap that matches the part color.
OptionaldepthSpecifies when a depth buffer is requested from rendering. Possible values are: * undefined: A depth buffer is never requested.
final: A depth buffer is only requested on the final frame.
all: A depth buffer is requested for every frame.
Depth buffers can increase the amount of data that's sent to a client and can impact rendering performance. Values of undefined or final should be used when needing the highest rendering performance. Some features, like measurement and pins, require that depth buffers are requested and will override an 'undefined' value when the feature is active.
OptionaldeviceProperty used for internals or testing.
Specifies whether to enable temporal refinement of still images.
Specifies experimental rendering options. For Vertex use only.
Experimental flag indicating that connections to Vertex should be established if the viewer is initially hidden through its own style or computed style, or has not been scrolled into view.
Caution: Setting this flag can result in reduced performance, and should generally not be used in a production setting.
OptionalfeatureSpecifies how selected features should be highlighted.
OptionalfeatureSpecifies if and how to render feature lines.
OptionalfeatureSpecifies when a feature map is returned from rendering. Feature maps include information about the surfaces, edges and cross-sections that are in a frame.
Possible values are: * undefined: A feature map is never requested.
final: A feature map is only requested on the final frame.
all: A feature map is requested for every frame.
Feature maps can increase the amount of data that's sent to a client and can impact rendering performance. Values of undefined or final should be used when needing the highest rendering performance.
ReadonlyframeThe last frame that was received, which can be used to inspect the scene and camera information.
The HTML element that will handle interaction events from the user. Used by components to listen for interaction events from the same element as the viewer. Note, this property maybe removed in the future when refactoring our interaction handling.
Returns true indicating that the scene is ready to be interacted with.
Enables or disables the default keyboard shortcut interactions provided by the viewer. Enabled by default, requires cameraControls being enabled.
Loads the given scene into the viewer and return a Promise that resolves when the scene has been loaded. The specified scene is provided as a URN in the following format: * urn:vertex:scene:<sceneid>
The URN of the resource to load.
Optionaloptions: LoadOptions
Optional configurations when loading the scene. cameraType (Optional) The camera type to load. If not included, the default camera type for the resource will be used.
ReadonlymodelThe controller for accessing model views associated with the scene view.
Specifies whether to use the default lights for the scene. When false, default lights are used. When true, no default lights are used, and the lights must be specified separately.
OptionalphantomSpecifies how phantom parts should appear. The opacity must be between 0 and 1, where 0 is completely hidden and 1 is completely visible.
ReadonlypmiThe controller for accessing and viewing PMI.
Registers and initializes an interaction handler with the viewer. Returns a Disposable that should be used to deregister the interaction handler.
InteractionHandlers are used to build custom mouse and touch interactions for the viewer. Use <vertex-viewer camera-controls="false" /> to disable the default camera controls provided by the viewer.
The interaction handler to register.
A promise containing the disposable to use to deregister the handler.
class CustomInteractionHandler extends InteractionHandler {
private element: HTMLElement;
private api: InteractionApi;
public dispose(): void {
this.element.removeEventListener('click', this.handleElementClick);
}
public initialize(element: HTMLElement, api: InteractionApi): void {
this.api = api;
this.element = element;
this.element.addEventListener('click', this.handleElementClick);
}
private handleElementClick = (event: MouseEvent) => {
api.tap({ x: event.clientX, y: event.clientY });
};
}
const viewer = document.querySelector('vertex-viewer');
viewer.registerInteractionHandler(new CustomInteractionHandler());
Registers and initializes an interaction handler with the viewer. Returns a Disposable that should be used to deregister the interaction handler.
InteractionHandlers are used to build custom mouse and touch interactions for the viewer. Use <vertex-viewer camera-controls="false" /> to disable the default camera controls provided by the viewer.
The interaction handler to register.
A promise containing the disposable to use to deregister the handler.
class CustomInteractionHandler extends InteractionHandler {
private element: HTMLElement;
private api: InteractionApi;
public dispose(): void {
this.element.removeEventListener('click', this.handleElementClick);
}
public initialize(element: HTMLElement, api: InteractionApi): void {
this.api = api;
this.element = element;
this.element.addEventListener('click', this.handleElementClick);
}
private handleElementClick = (event: MouseEvent) => {
api.tap({ x: event.clientX, y: event.clientY });
};
}
const viewer = document.querySelector('vertex-viewer');
viewer.registerInteractionHandler(new CustomInteractionHandler());
Registers a key interaction to be invoked when a specific set of keys are pressed during a tap event.
KeyInteractions are used to build custom keyboard shortcuts for the viewer using the current state of they keyboard to determine whether the fn should be invoked. Use <vertex-viewer keyboard-controls="false" /> to disable the default keyboard shortcuts provided by the viewer.
The KeyInteraction to register.
class CustomKeyboardInteraction extends KeyInteraction<TapEventDetails> {
constructor(private viewer: HTMLVertexViewerElement) {}
public predicate(keyState: KeyState): boolean {
return keyState['Alt'];
}
public async fn(event: TapEventDetails) {
const scene = await this.viewer.scene();
const result = await scene.raycaster().hitItems(event.position);
if (result.hits.length > 0) {
await scene
.camera()
.fitTo((q) => q.withItemId(result.hits[0].itemId))
.render();
}
}
}
Disconnects the websocket and clears the internal state associated with the scene before reconnecting to the same scene.
An optional value that will debounce frame updates when resizing this viewer element.
OptionalresolvedSets the rotation interaction behavior. True by default.
When rotateAroundTapPoint is true and the user clicks on geometry, then the model will rotate around the point that was clicked. When rotateAroundTapPoint is true and the user clicks in empty space (not on geometry), then the model will rotate around the center of the viewport.
When rotateAroundTapPoint is false, then the model will always rotate around the center of the viewport.
Returns an object that is used to perform operations on the Scene that's currently being viewed. These operations include updating items, positioning the camera and performing hit tests.
OptionalsceneSpecifies if and how to compare to another scene
ReadonlysceneThe controller for accessing and viewing SceneItems.
OptionalselectionSpecifies the halo selection properties. Parameter notes:
lineWidth values supported currently are 0-5. This width is currently the value x2. For example, 1 will have a pixel width of 2.
color is optional. This will be the color of the selected items in the viewer.
opacity is also optional. The opacity will be applied to everything selected besides the highlighted outer line.
OptionalsrcA URN of the scene resource to load when the component is mounted in the DOM tree. The specified resource is a URN in the following format: * urn:vertex:scene:<sceneid>
OptionalstencilOptionalstreamOptionaltokenA token that can be used to make API calls to other Vertex services.
Disconnects the websocket and removes any internal state associated with the scene.
Represents the current viewport of the viewer. The viewport represents the dimensions of the canvas where a frame is rendered. It contains methods for translating between viewport coordinates, frame coordinates and world coordinates.
Adds a cursor to the viewer, and displays it if the cursor has the highest priority.
Cursors are managed as a prioritized list. A cursor is displayed if it has the highest priority or if the cursor is the most recently added cursor in the set of cursors with the same priority.
To remove a cursor, call
dispose()on the returned disposable.