bimU.io Viewer API is based on Three.js. So the both libraries must be included in your project. Additionally, Three.js must be loaded in global scope and exposed as a global variable called THREE.
</body> tag. For example, the both libraries are available over a CDN:
<script src="https://email@example.com/build/three.min.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bimu.io.viewer@latest/dist/bimU.io.Viewer.umd.js" crossorigin="anonymous"></script>
npm install bimu.io.viewer --save
If you use a front-end framework that requires a module loader or a compilation step, such as React, Angular, Vue, etc., please make sure Three.js is loaded first and accessible by a global variable called
THREE before importing bimU.io's ES6 module. The type definitions are included in the package, so you can also benefit from the IntelliSense in Visual Studio Code.
// ThreeImporter.js import * as THREE from 'three/build/three'; // Assign THREE to global variable window.THREE = THREE;
// ViewerComponent.js import ThreeImporter from './ThreeImporter'; import * as bimU from 'bimu.io.viewer';
All available bimU.io Viewer API functions are exposed as methods of the
Viewer object. It would be easier to explore and inspect in browser console if a
viewer variable is also exposed in global scope.
let viewer = new bimU.Viewer(viewerConfigs); viewer.initialize(); window.viewer = viewer;
We've created a couple of Hello World boilerplates: