Skip to main content

3D Viewer and Editor Quickstart

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.3.4.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("my-canvas") }, {}).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.3.4.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("my-canvas") },
  {}
).then((viewer) => {
  console.log(viewer);

  const env = "https://demo-assets.pixotronics.com/pixo/hdr/gem_2.hdr";
  viewer
    .getManager()
    .importer.importSinglePath(env)
    .then((v) => {
      viewer.scene.setEnvironment(v);
    });
});

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​

It's 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-0.3.4.tgz",
	"@types/webgi": "https://dist.pixotronics.com/webgi/runtime/bundle-types-0.3.4.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-0.3.4.js";
</script>

Example:

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

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