@lumiscaphe/react-viewer

Official React component for Lumiscaphe 3D Viewer

Stats

StarsIssuesVersionUpdatedCreatedSize
@lumiscaphe/react-viewer
1.0.102 years ago4 years agoMinified + gzip package size for @lumiscaphe/react-viewer in KB

Readme

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 onLoadStart = () => {};
const onLoadProgress = () => {};
const onLoadEnd = () => {};
const onLoadError = () => {};
const onVrcubeInteraction = () => {};
const onVrobjectInteraction = () => {};
};

const element = (
  <LumiscapheViewer
    server={server}
    scene={scene}
    view={view}
    transition={transition}
    encoder={encoder}
    parameters={parameters}
    onLoadStart={onLoadStart}
    onLoadProgress={onLoadProgress}
    onLoadEnd={onLoadEnd}
    onLoadError={onLoadError}
    onVrcubeInteraction={onVrcubeInteraction}
    onVrobjectInteraction={onVrobjectInteraction}
  />
);

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

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)

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, 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 !

Events

Events are defined with:

  • onLoadStart : event sent on load start
  • onLoadProgress : event sent on load progress
  • onLoadEnd : event sent on load end
  • onLoadError : event sent on load error
  • onInteraction : event sent on vrcube or vrobject interaction
  • onVrcubeInteraction : event sent on vrcube interaction
  • onVrobjectInteraction : event sent on vrobject interaction

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.