ng-viewer

Official AngularJS component for Lumiscaphe 3D Viewer

Installation

$ npm i @lumiscaphe/angular-viewer

or

$ yarn add @lumiscaphe/angular-viewer

The basics

Import Lumiscaphe Viewer module in your AngularJS app:

import from '@lumiscaphe/angular-viewer';

angular.module('app', ['lumiscaphe']);

Prepare Lumiscaphe Viewer data in your component:

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

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

$scope.view = {
  mode: 'image',
  camera: 'EXTER/1',
  background: 'product',
};

// Optional - default values
$scope.encoder = {
  format: 'jpeg',
  quality: 80,
};

// Optional - default values
$scope.parameters = {
  antialiasing: false,
  superSampling: 2,
};

$scope.control = null;

Add Lumiscaphe Viewer component in your HTML:

<viewer server="server" scene="scene" view="view" parameters="parameters" encoder="encoder" control="control"></viewer>

Scene

A scene is an array of products defined with:

• database : product 3D model guid string
• configuration : product configuration as a string of concatenated values separated by a slash
• animations : product animations as an array of string

Basic scenes should contain only one product.

Decor

Two ways to drive scene decor.

Integrated

When a 3D model contains integrated decors, it can be change through product configuration. For example: add ENV.STUDIO or ENV.ALPES to product configuration string.

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

External

When a 3D model does not contain integrated decors, it can be added with an external 3D model. For example:

const decorProduct = {
  database: '82c1f7e8-9ae4-4f00-b45c-c857e21a954f',
  translation: { x: 0, y: -0.12, z: 0 },
};

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

const scene = [decorProduct, product];

Decor product is defined with:

• database : decor product 3D model guid string
• translation : decor product 3D position (e.g. decorDeltaAltitude)

Note: decor product should always be the first product in the scene.

View

A view can be defined in the following modes:

Image

• mode : image
• camera : camera path
• background : view background mode (product, transparent, gradient)

VRCube

• mode : vrcube
• camera : camera path
• background : view background mode (product, transparent, gradient)

VRObject - animation

• mode : vrobject
• animation : animation name
• camera : camera path
• frames : number of frames
• loop : whether animation loops or not
• background : view background mode (product, transparent, gradient)

VRObject - bookmark set

• mode : vrobject
• camera : camera group path
• background : view background mode (product, transparent, gradient)

Encoder

An encoder is defined with:

• format : encoder format (jpeg, png, webp)
• quality : encoder quality (0-100 for jpeg and webp and 0-9 for png)

Parameters

Render parameters are defined with:

• antialiasing : whether software antialiasing is enabled or not
• superSampling : super sampling coefficient 1-4

WebRender is always optimized for the following default values (false, 2). Change this with precaution !

Control

Object to trigger following methods:

• snapshot : returns a base 64 image from current canvas

Snapshot method takes the following parameters:

• type : image format type
• quality : number between 0 and 1 indicating the image quality