ng-viewer

Official Angular component for Lumiscaphe 3D Viewer

Installation

$ npm i @lumiscaphe/ng-viewer

or

$ yarn add @lumiscaphe/ng-viewer

Usage

Import

import { NgViewerModule } from '@lumiscaphe/ng-viewer';

Basic

<NgViewer [server]="server" [scene]="scene" [view]="view"></NgViewer>

server = 'https://wr.lumiscaphe.com';

scene = [
  {
    database: 'ee294840-5689-49b0-9edb-527598602df0',
    configuration: 'Bin.Blue/Cabin.Yellow/Style.Design1/Wheels.Red'
  }
];

view = {
  mode: 'image',
  camera: 'EXTER/1'
};

Hotspot

Hotspots are interactive elements that can be selected to engage in additional content or media.
Hotspots are overlaid on top of the viewer to provide additional media for informational purposes.

<NgViewer ... [hotspots]="hotspots">
  <ng-template #hotspotTemplate let-hotspot let-index="index">
    <ng-container *ngIf="hotspot.visibility === 'Visible'">
      <button>{{ index + 1 }}</button>
    </ng-container>
  </ng-template>
</NgViewer>

hotspots = [{ x: 0, y: 0, z: 0 }];

Pick

Pick allow to retrieve information of a 3D point from a 2D point.

<NgViewer ...></NgViewer>

<button type="button" (click)="pick()">Pick</button>

import { NgViewerComponent } from '@lumiscaphe/ng-viewer';

...

@ViewChild(NgViewerComponent) viewer: NgViewerComponent;
@ViewChild(ngViewerComponent, { read: ElementRef }) viewerElement: ElementRef<HTMLDivElement>;

...

pick(): void {
  this.viewerElement.nativeElement.addEventListener('click', e => {
    const position = { x: e.clientX, y: e.clientY };
    this.viewer.pick(position).then(pickResult => console.log(pickResult))
  }, { once: true });
};

API

Properties

| Name | Type | Default | Description | | -------------- | ------------ | ------------------------------------------- | -------------------------------- | | server | string | undefined | WebRender URL to use. | | scene | Scene | undefined | Scene to render. | | view | View | undefined | View to render. | | api | 'v1'\|'v2' | 'v1' | API version to use. | | encoder | Encoder | { format: 'jpeg', quality: 80 } | Image encoder to use. | | parameters | Parameters | { antialiasing: false, superSampling: 2 } | Rendering parameters to use. | | hotspots | Vector3D[] | undefined | Hotspot array to display. | | vrcube | VRCube | undefined | VRCube point of view to display. | | vrobject | VRObject | undefined | VRObject position to display. |

Emitters

| Name | Parameters | Description | | ------------------------- | -------------------- | ------------------------------------------------------ | | onLoadStart | progress: number | Callback to invoke when load starts. | | onLoadProgress | progress: number | Callback to invoke when load makes progress. | | onLoadEnd | progress: number | Callback to invoke when load ends. | | onLoadError | Error | Callback to invoke when load failed. | | onInteraction | VRCube \| VRObject | Callback to invoke when interaction happened. | | onVrcubeInteraction | VRCube | Callback to invoke when VRCube interaction happened. | | onVrobjectInteraction | VRObject | Callback to invoke when VRObject interaction happened. |

Methods

| Name | Parameters | Description | Returns | | ------------ | --------------------------------- | ------------------------------------ | -------------------- | | pick | position: Position | Get the 3D point from a 2D position. | PickResult | | snapshot | type: string, quality: number | Get a snapshot of the viewer. | string - Image URL |

Templates

| Name | Parameters | Description | | ------------------- | ------------------------------------------------ | ------------------------ | | hotspotTemplate | context: { $implicit: Hotspot, index: number } | Custom hotspot template. |

Interfaces

Scene

| Name | Type | Description | | ----------------- | ---------- | -------------------------------------- | | database | string | Database id of the 3D model. | | configuration | string | Product configuration of the 3D model. | | animations | string[] | Animations of the 3D model |

View

| Name | Type | Description | | ---------- | ------------------------------- | ---------------------------------------- | | mode | 'image'\|'vrcube'\|'vrobject' | Mode of the view. | | camera | string | Camera or camera group name of the view. |

Encoder

| Name | Type | Description | | ----------- | -------- | --------------------------------- | | format | 'jpeg' | Format of the encoder. | | quality | number | Quality of the encoder (0 - 100). |

Parameters

| Name | Type | Description | | ----------------- | ------ | ---------------------------------------------- | | superSampling | number | Super sampling to use for antialiasing (1 -2). |

Hotspot

| Name | Type | Description | | ------------ | ----------- | --------------------------------------------------------------- | | id | string | Id of the hotspot (when hotspot is provided by the 3D model). | | name | string | Name of the hotspot (when hotspot is provided by the 3D model). | | position2D | Vector2D | 2D position of the hotspot in the viewer. | | position3D | Vector3D | 3D position of the hotspot. | | visibility | Visiblity | Visiblity of the hotspot. |

Visibility

| Name | Description | | -------------- | ---------------------------------------------- | | Visible | Hotspot found and visible. | | Occluded | Hotspot found but occluded by another surface. | | OutOfFrustum | Hotspot not found. |

PickResult

| Name | Type | Description | | ----------- | ---------- | --------------------------------------- | | product | string | Product id of the picked point. | | surface | Surface | Surface of the picked point. | | normal | Vector3D | Normal coordinates of the picked point. | | point | Vector3D | Point coordinates of the picked point. | | uvw | UVW | UV coordinates of the picked point. |

Surface

| Name | Type | Description | | -------- | ---------- | ------------------------ | | id | string | Id of the surface. | | name | string | Name of the surface. | | tags | string[] | Tag list of the surface. |

UVW

| Name | Type | Description | | ----- | -------- | ------------- | | u | number | U coordinate. | | v | number | V coordinate. | | w | number | W coordinate. |

Vector2D

| Name | Type | Description | | ----- | -------- | ------------- | | x | number | X coordinate. | | y | number | Y coordinate. |

Vector3D

| Name | Type | Description | | ----- | -------- | ------------- | | x | number | X coordinate. | | y | number | Y coordinate. | | z | number | Z coordinate. |

VRCube

| Name | Type | Description | | ---- | ------------- | ---------------------------------------------- | | pov | PointOfView | Point of view of the VRCube widget. | | fov | number | Field of view in degrees of the VRCube widget. |

VRObject

| Name | Type | Description | | ---------- | -------- | ---------------------------------- | | position | number | Image inde of the VRObject widget. |