viewer

Lumiscaphe 3D Viewer

Installation

$ npm i @lumiscaphe/viewer

or

$ yarn add @lumiscaphe/viewer

The basics

Initialize Lumiscaphe Viewer as simply as this:

const container = document.getElementById('viewer');

const viewer = new LumiscapheViewer(container, {
  server: 'https://wr.lumiscaphe.com',
  api: 'v1',
  fit: 'cover',
  events: {
    onLoadStart: () => {},
    onLoadProgress: () => {},
    onLoadEnd: () => {},
    onLoadError: () => {},
    onInteraction: () => {},
    onVrcubeInteraction: () => {},
    onVrobjectInteraction: () => {},
  },
});

LumiscapheViewer constructor accept following parameters:

• container : div where viewer will be integrated
• server : WebRender url
• api : WebRender API : static, v1, v2
• fit : Viewport fit mode : contain, cover, fill
• events.onLoadStart : event sent on load start
• events.onLoadProgress : event sent on load progress
• events.onLoadEnd : event sent on load end
• events.onLoadError : event sent on load error
• events.onInteraction : event sent on vrcube or vrobject interaction
• events.onVrcubeInteraction : event sent on vrcube interaction
• events.onVrobjectInteraction : event sent on vrobject interaction

Scene

WebRender

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

viewer.load(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.

Static

A scene could also be an array of static urls representing image|vrcube|vrobject images when api is set to 'static'.

const imageScene = ['image.jpg'];
const vrCubeScene = ['front.jpg', 'right.jpg', 'back.jpg', 'left.jpg', 'up.jpg', 'down.jpg'];
const vrObjectScene = ['01.jpg', '02.jpg', '03.jpg', '04.jpg', '05.jpg', '06.jpg', '07.jpg', '08.jpg', '09.jpg', '10.jpg', '11.jpg', '12.jpg', '13.jpg', '14.jpg', '15.jpg', '16.jpg', '17.jpg', '18.jpg', '19.jpg', '20.jpg', '21.jpg', '22.jpg', '23.jpg', '24.jpg'];

viewer.load(vrObjectScene);

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'],
}];

viewer.load(scene);

External

When a 3D model does not contain integrated decors, it can be added with an external 3D model (product configuration will be applies on both products). For example:

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

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

const scene = [product, decorProduct];

viewer.load(scene);

Decor product is defined with:

• database : decor product 3D model guid string
• translation : decor product 3D position (e.g. decorDeltaAltitude)
• decor : boolean to indicate that this product is a decor database

Accessories

Two ways to drive scene accessories.

Integrated

When a 3D model contains integrated accessories, it can be change through product configuration. For example: add AXS$8201468182 to product configuration string.

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

viewer.load(scene);

External

When a 3D model does not contain integrated accessories, it can be added with an external 3D model (product configuration will be applies on both products). For example:

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

const accessoryProduct = {
  database: '82c1f7e8-9ae4-4f00-b45c-c857e21a954f',
  accessory: true,
};

const scene = [product, accessoryProduct];

viewer.load(scene);

Accessory product is defined with:

• database : accessory product 3D model guid string
• accessory : boolean to indicate that this product is a accessory database

View

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

viewer.setView(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)

Transition

const transition = {
  fromPosition: 0,
  toPosition: 2,
  animation: {
    name: 'Porte Gauche',
    camera: '/Camera_Ext',
    duration: 1,
    reverse: false,
  },
};

viewer.load(scene, transition);

viewer.setView(view, transition);

A transition can be set when loading a scene or setting a view with:

• fromPosition : go to specific vrobject image at the beginning - optional
• toPosition : go to specific vrobject image at the end - optional
• animation :
  • name: animation name
  • camera: camera path to use for animation
  • duration: animation duration in seconds
  • reverse: whether to reverse animation direction

Encoder

// Default values
const encoder = {
  format: 'jpeg',
  quality: 80,
};

viewer.setEncoder(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

// Default values
const parameters = {
  antialiasing: false,
  superSampling: 2,
};

viewer.setParameters(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 !

Vrcube

// Default values
const vrcube = {
  pov: {
    eye: [0.0, 0.0, 0.0],
    target: [0.0, 0.0, 1.0],
    up: [0.0, 1.0, 0.0],
  },
  fov: 60,
};

viewer.setVrcube(vrcube);

Vrcube is defined with:

• pov : current point of view
  • eye : camera position vector
  • target : camera target vector
  • up : camera up vector
• fov : current field of view in degrees

Vrobject

// Default values
const vrobject = {
  position: 0,
};

viewer.setVrobject(vrobject);

Vrobject is defined with:

• position : index of current displayed image

Snapshot

viewer.snapshot('image/jpeg', 0.8);

Snapshot method takes the following parameters:

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