extensions

The Babylon.js Viewer


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:

  1. Add a script reference to the viewer

    <script src="https://cdn.babylonjs.com/viewer/babylon.viewer.js"></script>
    
  2. Add a <babylon> tag and set the model attribute to point to a .gltf or .glb file

    <babylon model="model.gltf"></babylon>
    

    We recommend using the glTF format (.gltf or .glb) for displaying 3D models on your webpage. Other formats supported by Babylon.js loaders are also supported by the viewer component including .babylon, .obj, and .stl formats.

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.

Example

See the Pen Babylon.js Viewer - Display a 3D model by Babylon.js (@BabylonJS) on CodePen.

Resizing

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.

See the Pen Babylon.js Viewer - Resize the viewer by Babylon.js (@BabylonJS) on CodePen.

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.

CDN

Stable versions of the viewer are available on:

Preview releases (nightlies) of the viewer are available on:

NPM

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:

import * as BabylonViewer from 'babylonjs-viewer';

BabylonViewer.InitTags("babylon");

This will enable the BabylonViewer namespace.

Further Reading