@lumiscaphe/react-viewer

react-viewer

Lumiscaphe 3D Viewer React Component

Installation

$ npm i @lumiscaphe/react-viewer

or

$ yarn add @lumiscaphe/react-viewer

The basics

Initialize Lumiscaphe Viewer as simply as this:

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

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

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

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

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

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

// Optional - default values
const events = {
  onInteraction: () => {},
  onLoadStart: () => {},
  onLoadProgress: () => {},
  onLoadEnd: () => {},
  onLoadError: () => {},
};

const element = (
  <LumiscapheViewer
    server="{server}"
    scene="{scene}"
    view="{view}"
    transition="{transition}"
    encoder="{encoder}"
    parameters="{parameters}"
    onInteraction="{events.onInteraction}"
    onLoadStart="{events.onLoadStart}"
    onLoadProgress="{events.onLoadProgress}"
    onLoadEnd="{events.onLoadEnd}"
    onLoadError="{events.onLoadError}"
  />
);

ReactDOM.render(element, document.body)

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

A single product will drive the main product. In case of two product, the first one should be the main product and the second one the decor.

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

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

An encoder is defined with:

• format : encoder format (jpeg, png)
• quality : encoder quality (0-100 for jpeg 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 !

Events

Events are defined with:

• onInteraction : event sent on user interaction
• onLoadStart : event sent on load start
• onLoadProgress : event sent on load progress
• onLoadEnd : event sent on load end
• onLoadError : event sent on load error