|
|
@@ -1,35 +1,36 @@
|
|
|
# BabylonJS Viewer
|
|
|
|
|
|
This project is a 3d model viewer using babylonjs.
|
|
|
-
|
|
|
-Please note that this is an *initial release*. The API and project structure could (and probably SHOULD) be changed, so please don't rely on this yet in a productive environment.
|
|
|
-
|
|
|
-The viewer is using the latest Babylon from npm (3.1 alpha).
|
|
|
-
|
|
|
-This documentation is also not full. I will slowly add more and more exmplanations.
|
|
|
-
|
|
|
-## Basic usage
|
|
|
-
|
|
|
-See `basicExample.html` in `/dist`.
|
|
|
-
|
|
|
-Basically, all that is needed is an html tag, and the viewer.js, which includes everything needed to render a Scene:
|
|
|
-
|
|
|
-```html
|
|
|
-<babylon model="https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BoomBox/glTF/BoomBox.gltf" default-viewer="true"></babylon>
|
|
|
-<script src="viewer.js"></script>
|
|
|
-```
|
|
|
-
|
|
|
-This will create a (default) viewer and will load the model in this URL using the gltf loader.
|
|
|
-
|
|
|
-The `babylon` tag will be automatically initialized.
|
|
|
-
|
|
|
-## Configuration
|
|
|
-
|
|
|
-Configuration can be provided using html attributes or a JSON (at the moment). A configuration Mapper can be registered to create new configuration readers.
|
|
|
-
|
|
|
-Before I finish a full documentation, take a look at `configuration.ts`
|
|
|
-
|
|
|
-## Templating
|
|
|
-
|
|
|
-The default templates are integrated in the viewer.js file. The current templates are located in `/assets/templates/default/` . Those templates can be extended and registered using the configuration file.
|
|
|
-
|
|
|
+Online docs: https://doc.babylonjs.com/extensions/the_babylon_viewer
|
|
|
+
|
|
|
+## ES6/NPM usage
|
|
|
+
|
|
|
+Install the package using npm:
|
|
|
+```
|
|
|
+npm install @babylonjs/viewer --save
|
|
|
+```
|
|
|
+
|
|
|
+Then in JS/Typescript the viewer to be imported via:
|
|
|
+```
|
|
|
+import * as BabylonViewer from '@babylonjs/viewer';
|
|
|
+```
|
|
|
+
|
|
|
+Add a babylon element in an html file:
|
|
|
+```
|
|
|
+<babylon id="babylon-viewer" camera.behaviors.auto-rotate="0"></babylon>
|
|
|
+```
|
|
|
+
|
|
|
+And used to load models
|
|
|
+```
|
|
|
+BabylonViewer.viewerManager.getViewerPromiseById('babylon-viewer').then(function (viewer) {
|
|
|
+ // this will resolve only after the viewer with this specific ID is initialized
|
|
|
+ viewer.onEngineInitObservable.add(function (scene) {
|
|
|
+ viewer.loadModel({
|
|
|
+ title: "Helmet",
|
|
|
+ subtitle: "BabylonJS",
|
|
|
+ thumbnail: "https://www.babylonjs.com/img/favicon/apple-icon-144x144.png",
|
|
|
+ url: "https://www.babylonjs.com/Assets/DamagedHelmet/glTF/DamagedHelmet.gltf"
|
|
|
+ });
|
|
|
+ });
|
|
|
+});
|
|
|
+```
|
Trevor Baron