Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@lumiscaphe/viewer
Advanced tools
Lumiscaphe 3D Viewer
$ npm i @lumiscaphe/viewer
or
$ yarn add @lumiscaphe/viewer
Initialize Lumiscaphe Viewer as simply as this:
const container = document.getElementById('viewer');
const viewer = new LumiscapheViewer(container, {
server: 'https://wr.lumiscaphe.com',
onInteraction: () => {},
onLoadStart: () => {},
onLoadProgress: () => {},
onLoadEnd: () => {},
onLoadError: () => {},
});
LumiscapheViewer constructor accept following parameters:
container
: div where viewer will be integratedserver
: WebRender server urlonInteraction
: event sent on user interactiononLoadStart
: event sent on load startonLoadProgress
: event sent on load progressonLoadEnd
: event sent on load endonLoadError
: event sent on load errorconst 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 stringconfiguration
: product configuration as a string of concatenated values separated by a slashanimations
: product animations as an array of stringBasic scenes should contain only one product.
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. 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];
viewer.load(scene);
Decor product is defined with:
database
: decor product 3D model guid stringtranslation
: decor product 3D position (e.g. decorDeltaAltitude)Note: decor product should always be the first product in the scene.
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 pathbackground
: view background mode (product
, transparent
, gradient
)VRCube
mode
: vrcube
camera
: camera pathbackground
: view background mode (product
, transparent
, gradient
)VRObject - animation
mode
: vrobject
animation
: animation namecamera
: camera pathframes
: number of framesloop
: whether animation loops or notbackground
: view background mode (product
, transparent
, gradient
)VRObject - bookmark set
mode
: vrobject
camera
: camera group pathbackground
: view background mode (product
, transparent
, gradient
)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 - optionaltoPosition
: go to specific vrobject image at the end - optionalanimation
:
name
: animation namecamera
: camera path to use for animationduration
: animation duration in secondsreverse
: whether to reverse animation direction// Default values
const encoder = {
format: 'jpeg',
quality: 80,
};
viewer.setEncoder(encoder);
An encoder is defined with:
format
: encoder format (jpeg
, png
)quality
: encoder quality (0-100 for jpeg
and 0-9 for png
)// Default values
const parameters = {
antialiasing: false,
superSampling: 2,
};
viewer.setParameters(parameters);
Render parameters are defined with:
antialiasing
: whether software antialiasing is enabled or notsuperSampling
: super sampling coefficient 1-4WebRender is always optimized for the following default values (false, 2). Change this with precaution !
FAQs
Lumiscaphe 3D Viewer
The npm package @lumiscaphe/viewer receives a total of 278 weekly downloads. As such, @lumiscaphe/viewer popularity was classified as not popular.
We found that @lumiscaphe/viewer demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
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.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.