Installation & Usage

Add the Reactive Reality registry

To use the Pictofit SDK, you need to add our registry to npm so that the package can be fetched.

You can add our registry globally by running the following command:

BASH

npm config set @reactivereality-public:registry=https://gitlab.com/api/v4/projects/24837467/packages/npm/

Or to give npm access to the registry on the project scope, you have to add a .npmrc file in project root (on the same level as package.json):

CODE

; reactive reality public registry
@reactivereality-public:registry=https://gitlab.com/api/v4/projects/24837467/packages/npm/

Then add to your package.json dependencies: "@reactivereality-public/pictofit-web-sdk": "major.minor.patch"

Setup the DOM and init a WebViewer

Now you will have to add a canvas element to your DOM for the SDK to render your content into:

HTML

<html>
    <body>
        <pictofit-web id="canvas3d" style="width:100%;height:100%;"></pictofit-web>       
    </body>
</html>

Then you can import the module an use its components like so:

JS

import { WebViewer } from "@reactivereality-public/pictofit-web-sdk";
const viewer = new WebViewer("canvas3d"); // ID of the canvas element

All you have to provide here is the ID of the canvas element so that the viewer can use it as the rendering target.

A note on BabylonJS

The rendering within our SDK is based on the Babylon.js engine. Depending on the use case, additional extensions might be required (which can be seen from the respective documentation/samples).

SDK version 20 and higher

Since version 20 babylons ES6 package is a transitive dependency of the SDK. It will therefore automatically be installed when installing the SDK. That means that since that version the SDK as well as the babylon package can be treeshaken by your bundler, reducing your app size by a good chunk. 🎉

SDK version 19 and lower

Including BabylonJS via a CDN / script tag

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/babylonjs@5.16.0/babylon.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/babylonjs-loaders@5.16.0/babylonjs.loaders.min.js"></script>
    // only add this if you are using the VirtualDressingroom2D
    <script src="https://cdn.jsdelivr.net/npm/babylonjs-gui@5.16.0/babylon.gui.min.js"></script>
</head>
...

If you wish to include the BabylonJS dependency via the script tag, please make sure that it is loaded before the Web SDK!

Including BabylonJS via a NPM package

If you are using NPM to assemble your project you might want to use the babylon NPM packages. These are not peer dependencies of the Web SDK package, because we also want to enable the CDN approach above. To add

JSON

"babylonjs": "^5.16.0"
"babylonjs-loaders": "^5.16.0"
"babylonjs-gui": "^5.16.0" // only add this if you are using the VirtualDressingroom2D

After that you will have to make sure your bundler (webpack or similar) is importing BabylonJS at. global level. Its likely not bundled if you are not directly referencing it anywhere in your own code.