3D Viewer and Editor Quick-start

We offer some pre-built templates for setting up a 3D Viewer or our sandbox editor with all basic plugins. Use these templates if not much customisation is required or to create proof of concept and demo applications.

Sample Viewer setup

First, include the viewer js file in the HTML (ideally in the head portion)

<script src="https://dist.pixotronics.com/webgi/runtime/viewer-0.2.81.js"> </script>

Note: This file is already optimised and minified, no extra processing is required.
Check the latest version in the Readme.

Now, add the below javascript code in any script tag to initialise the viewer in a canvas and load a model.

setupCoreWebGiViewer({ canvas: document.getElementById("mcanvas") }, {}).then(
  (viewer) => {
    const model =
      "https://demo-assets.pixotronics.com/pixo/gltf/earringScene1.glb";
    viewer.getManager().addFromPath(model);
    console.log(viewer);
  }
);

Note: The environment map must be loaded separately if not present in the glb model. Check the editor sample below which loads the environment map.

Check the codepen links below for an example.

Sandbox editor setup

Same as for the viewer, include the editor js file in the HTML (ideally in the head portion)

<script src="https://dist.pixotronics.com/webgi/runtime/editor-0.2.51.js"> </script>

Note: This file is already optimised and minified, no extra processing is required.
Do not use the editor in production for just a viewer, it also contains a UI library.
Check the latest version in the Readme.

Now, add the below javascript code in any script tag to initialise the viewer with sandbox UI in a canvas and load a model.

setupSandboxWebGiEditor(
  { canvas: document.getElementById("mcanvas") },
  {}
).then((viewer) => {
  const env = "https://demo-assets.pixotronics.com/pixo/hdr/gem_2.hdr";
  viewer
    .getManager()
    .importer.importSinglePath(env)
    .then((v) => {
      viewer.scene.setEnvironment(v);
    });
  console.log(viewer);
});

This loads an environment map. Now, any model can be drag and dropped.

Check the codepen links below for a complete example.

ES6 module bundles

Its recommended to use module bundles to import and add just the plugins that are required for the applications to keep the size small and get good performance.

NPM module

The SDK can be added to package.json with module bundle and type declarations like this:

...
"devDependecies": {
	"webgi": "https://dist.pixotronics.com/webgi/runtime/bundle-<version>.tgz",  
	"@types/webgi": "https://storage.googleapis.com/webgi/runtime/bundle-types-<version>.tgz",
	...
}
...

JS Import

The complete SDK can also be imported as a ES6 module from a single JS file.

<script type="module">
import {ViewerApp} from "https://dist.pixotronics.com/webgi/runtime/bundle-<version>.js";
</script>

Example:

For more details on the ViewerAPI, check the API Getting Started page

CodePen Links

Sample WebGI Editor: https://codepen.io/repalash/pen/mdpyrNa
Sample WebGI Viewer: https://codepen.io/repalash/pen/qBpEazp
Sample JS module Import: https://codepen.io/repalash/pen/BaJwVOO
All samples: https://codepen.io/collection/kNgvVW

Note: You can see the imported JS files in CodePen by going into pen settings -> JS tab -> external files.

---

Back to home