@lumiscaphe/ng-viewer NPM

ng-viewer

Official Angular component for Lumiscaphe 3D Viewer

Installation

$ npm i @lumiscaphe/ng-viewer

$ 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.