Skip to main content

Installing WebGi to JS/TS projects

This guide gives instructions on how to install 3D viewer capabilities with WebGi to an existing project using any javascript build system.

Getting started template

Public template to create a project with vite bundler and typescript: https://github.com/pixotronics/webgi-vanilla-starter This has webgi module included with types. Make sure to set the latest version in package.json.

Click the Use this template button on github to create a new repo.

To starting adding 3D to a project:

Create a canvas​

First add a HTML Canvas element on the page, if there isn't any.

<canvas id="my-canvas"></canvas>

The canvas can be styled independently with css or js to set the width and the height.

Import the Library​

Next we need to import the webgi library. We provide ES6 module for use in custom apps. For common use-cases we also provide pre-built files for the websites (see quickstart). The library can be imported in HTML/JS directly in any modern supported browser as a ES6 module.

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

While this is fine for testing/experiments, it's better to use the library in a typescript/javascript project as a npm library and use a bundler to build custom bundles for your target platforms.

If using a bundler, add the dependency in pacakge.json


"devDependecies": {
	"webgi": "https://dist.pixotronics.com/webgi/runtime/bundle-0.9.20.tgz",
	"@types/webgi": "https://dist.pixotronics.com/webgi/runtime/bundle-types-0.9.20.tgz",
	...
}
In a typescript or javascript file, the viewer can be imported directly.
import {ViewerApp} from "webgi";

The webgi-vanilla-starter repository is an example of using vite with typescript to bundle an example for the browser. More plugins and configuration can be added to parcel to target old browsers and to integrate UI libraries. You may use any other bundler like webpack, rollup.

Next checkout the Viewer Getting Started guide to display a model in the canvas.