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.

WebGi Viewer setup (HTML)​

Easiest way is to use the webgi-viewer web component with a src file (glb/gltf) and optionally an environment map (hdr/png)

<!--Add this script tag in the page head-->
<script src="https://dist.pixotronics.com/webgi/runtime/viewer-0.8.3.js"> </script>
<!--Add the viewer element somewhere inside the body of the page.-->
<webgi-viewer
        id="viewer-3d"
        src="https://dist.pixotronics.com/webgi/assets/gltf/cube_diamond_sample.gltf"
        environment="https://dist.pixotronics.com/webgi/assets/hdr/gem_2.hdr"
        style="width: 100%; height: 100%; z-index: 1; display: block;"
/>
Try this example on codepen here: WebGi Viewer HTML Component

The viewer can be accessed later in javascript to change the model, add plugins, make changes.

<script>
const element = document.getElementById('viewer-3d');

element.addEventListener('initialized', ()=>{
    const viewer = element.viewer; // `ViewerApp`
    console.log(viewer);
    // Use the viewer
    viewer.load("some_other_model");
    viewer.getPlugin(DepthOfFieldPlugin).enabled = true;

})

</script>
tip

Include the complete bundle js (instead of the viewer) to access all plugins and utilities.

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

WebGi Viewer setup (JS)​

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

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

This file is already optimised and minified, no extra processing is required.

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

<canvas style="width:100%; height: 300px;" id="webgi-canvas"></canvas>
<script>
const viewer = new CoreViewerApp({canvas: document.getElementById('mcanvas')})
viewer.initialize({
    caching: true,
    ground: true,
    bloom: true,
    depthTonemap: true,
    enableDrop: false,
    importPopup: false,
    debug: false
}).then(()=>{
    const model = "https://demo-assets.pixotronics.com/pixo/gltf/earringScene1.glb";
    viewer.load(model);
    console.log(viewer);
}
</script>

or by adding plugins manually and loading a model

<canvas style="width:100%; height: 300px;" id="webgi-canvas"></canvas>
<script>
async function setupViewer(){
    const viewer = new ViewerApp({canvas: document.getElementById('mcanvas')})
    // Add some plugins
    await viewer.addPlugin(AssetManagerPlugin);
    // Add all the important plugins at once: to see the plugins list and default settings, check: https://codepen.io/repalash/pen/JjLxGmy
    await addBasePlugins(viewer);

    // Load a 3d model.
    await viewer.load("https://dist.pixotronics.com/webgi/assets/gltf/cube_diamond_sample.gltf");

    // Load an environment map
    await viewer.setEnvironmentMap("https://dist.pixotronics.com/webgi/assets/hdr/gem_2.hdr.png?v=1");

}
</script>

:::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.
:::

<iframe height="400" width="100%" scrolling="no" title="Sample WebGI Viewer" src="https://codepen.io/repalash/embed/preview/qBpEazp?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/repalash/pen/qBpEazp">
  Sample WebGI Viewer</a> by Palash Bansal (<a href="https://codepen.io/repalash">@repalash</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>
Check the codepen links below for an example.

## Sandbox editor setup
Same as for the viewer, include the webgi bundle `js` file in the HTML (ideally in the `head` portion)
<code language="html">{`<script src="https://dist.pixotronics.com/webgi/runtime/bundle-${siteConfig.customFields.sdkVersion}.js"> </script>
`}</code>

:::note
Do not use the complete bundle in production for just a viewer, it also contains a UI library and many utils. <br />
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.
```javascript
setupSandboxWebGiEditor(
  { canvas: document.getElementById("my-canvas") },
  {}
).then((viewer) => {
  console.log(viewer);

  viewer.setEnvironmentMap("https://demo-assets.pixotronics.com/pixo/hdr/gem_2.hdr");
});

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.8.3.tgz",
	"@types/webgi": "https://dist.pixotronics.com/webgi/runtime/bundle-types-0.8.3.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.8.3.mjs";
</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.