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