Socket
Socket
Sign inDemoInstall

@lumiscaphe/viewer

Package Overview
Dependencies
3
Maintainers
1
Versions
108
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@lumiscaphe/viewer

Lumiscaphe 3D Viewer


Version published
Maintainers
1
Weekly downloads
493
decreased by-20.36%

Weekly downloads

Readme

Source

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

FAQs

Last updated on 31 Jan 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc