Display 3D models on your webpage
The Babylon.js viewer is the simplest way to display 3D content on a web page.
To display a 3D model on you web page:
Add a script reference to the viewer<script src="https://cdn.babylonjs.com/viewer/babylon.viewer.js"></script>
<babylon>tag and set the model attribute to point to a
We recommend using the glTF format (
.glb) for displaying 3D models on your webpage. Other formats supported by Babylon.js loaders are also supported by the viewer component including
The Babylon.js viewer automatically provides a default viewing experience for 3D models. All aspects of this experience are configurable. See Configuring the viewer for more information on customizing the viewing experience.
Controlling the size of the viewer is one of the most common configuration operation. It is rather easy as the viewer in default mode will fill 100% of the width and height of its container. So in order to control the viewer, you can simply style its encclosing container.
Using the viewer in your project
The Babylon.js viewer is available on CDN as well as an NPM package. The Babylon.js viewer is a wrapper around the Babylon.js engine and follows the same versioning scheme as the engine. The currently stable version of the Babylon.js viewer will use the current stable version of Babylon.js engine and the preview version of the Babylon.js viewer will use the preview version of Babylon.js engine.
Stable versions of the viewer are available on:
- https://cdn.babylonjs.com/viewer/babylon.viewer.js (minified)
Preview releases (nightlies) of the viewer are available on:
- https://preview.babylonjs.com/viewer/babylon.viewer.js (minified)
To install the Babylon.js viewer through NPM use:
npm install --save babylonjs-viewer
This will install the latest stable version of the viewer, including its needed dependencies.
Afterwards it can be imported to the project using:
This will enable the