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

FAQs

What is @lumiscaphe/viewer?

Is @lumiscaphe/viewer popular?

Is @lumiscaphe/viewer well maintained?

Last updated on 31 Jan 2023

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket