To use the Pictofit SDK, you will need an access token to our private registry. Please contact our sales team to get in touch.
npm access to the registry on the project scope, you have to add a
.npmrc file in project root (on the same level as
; reactive reality public registry @reactivereality-public:registry=https://gitlab.com/api/v4/projects/24837467/packages/npm/ //gitlab.com/api/v4/projects/24837467/packages/npm/:_authToken=<YOUR-TOKEN>
or if you wish not to commit the credentials to the repo:
npm config set @reactivereality-public:registry=https://gitlab.com/api/v4/projects/24837467/packages/npm/ npm config set //gitlab.com/api/v4/projects/24837467/packages/npm/:_authToken=<YOUR-TOKEN>
Then add to
Now you will have to add a canvas element to your DOM for the sdk to render your content into:
<html> <body> <canvas id="canvas3d" style="width:100%;height:100%;"></canvas> </body> </html>
Then you can import the module an use its components like so:
import * as Pictofit from "@reactivereality-public/pictofitcore-web-sdk"; const viewer = new Pictofit.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. As part of every asset bundle that we generate through the Pictofit Content Service, you’ll find a
.json config file that you can use the load the model. The configuration files only contain file names but not the full url to the assets. Therefore, we need to tell the viewer where it can actually find the assets that are linked in the configuration file.
This can be done through creating a
BaseURLResourceProvider. This simply prefixes the referenced filename with the provided url. So if an element in the configuration refers to
texture.jpg and your base url is
https://cdn.myserver.com/assets/, the viewer will try to load the asset from
For most cases, this simple provider is sufficient. Sometimes, you might need a more complex handling. Please see the section Custom Resource Providers on how to implement your own provider.
// create a URLResourceProvider and provide the base url to your server viewer.resourceProvider = new Pictofit.BaseURLResourceProvider("https://cdn.myserver.com/assets/"); // load the configuration file from your server viewer.loadConfigFromURL("https://cdn.myserver.com/assets/config.json");
That’s it, you are good to go. The viewer should now show your asset within the viewer. You can also use absolute paths in your configuration files. Still, we advise against doing this for real world integrations since you have to change your configuration files once you move the assets.