Pictofit / Web SDK / 7.3.1 / Installation and Usage

Installation and Usage

Integrating the viewer into you website is fairly simple. The following example shows how it’s done. The viewer requires a HTML5 canvas element to render its content. You can load the module and setup the viewer using the following snippet:

<script src="https://cdn.babylonjs.com/babylon.js"></script> 
<!-- Required if you want to load 3D models from files -->
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<script type="module">
    import * as Pictofit from "./pictofit.min.js";
    let viewer = new Pictofit.WebViewer("canvas3d"); // ID of the canvas element
</script>

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 https://cdn.myserver.com/assets/texture.jpg.

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 absout 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. Here’s a full example code that shows how to set the viewer up:

Example: Add the web viewer component to your website

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
        <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
    </head>
    <body>
        <canvas id="canvas3d" style="width:100%;height:100%;"></canvas>       

        <script type="module">
            import * as Pictofit from "./pictofit.min.js";
            let viewer = new Pictofit.WebViewer("canvas3d");
            viewer.resourceProvider = new Pictofit.BaseURLResourceProvider("https://cdn.myserver.com/assets/");
            viewer.loadConfigFromURL("https://cdn.myserver.com/assets/config.json");
        </script>
    </body>
</html>
© 2014-2020 Reactive Reality AG