Installation

There are several installation options that are detailed below.

As a library under a global variable

When using this method, you must ensure that the three.js library is available as a global variable under the name THREE. In the simplest form this can be achieved by including the minified library code from a CDN by including it in your html. For example to include the version 0.118.0 from CDNJS, include the following script tag:

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r118/three.min.js" integrity="sha512-ZoEQdcOJ16M20VnLaQxmZlthvLdTbF9CSAAyvZyzru+Em8NEY+7Xy0jdWdUjdOlo7hbPVmaobVBpUF9aqmXENA==" crossorigin="anonymous"></script>

After this script (order is important, also see the defer attribute for script elements), you will want to include the minified library for materia. You can get the newest version from the GitHub repository or install and use a specific version from npm. Then place the minified file (materia.min.js) in your server and include it as a script element:

<script src="/path/in/your/server/materia.min.js"></script>

All functionality will then be available under the materia variable, e.g.

let structureViewer = new materia.StructureViewer();

As a module

The library is distributed as an npm package and can be installed with:

npm install @lauri-codes/materia

This command will also install the three.js library as a dependency. With the npm installation you have direct access to individual modules that can also be tree-shaked in your own build. For example:

import { StructureViewer } from "@lauri-codes/materia"