BabylonJS Viewer

The Babylon Viewer aims to simplify a specific but common Babylon.js use case: loading, viewing, and interacting with a 3D model.

Using with a Bundler

Install the package using npm:

bash

npm install @babylonjs/viewer

To use the HTML3DElement you can import the @babylonjs/viewer module and then reference the <babylon-viewer> custom element in your HTML like this:

html

<html lang="en">
    <body>
        <!-- Note: If @babylonjs/viewer is already being imported somewhere in your JavaScript, you don't need this script import. -->
        <script type="module">
            import "@babylonjs/viewer";
        </script>
        <babylon-viewer source="https://playground.babylonjs.com/scenes/BoomBox.glb"></babylon-viewer>
    </body>
</html>

Using the Lite Viewer

A lighter-weight, WebGPU-first variant is available by switching your import path from @babylonjs/viewer to @babylonjs/viewer/lite:

import "@babylonjs/viewer/lite";

The <babylon-viewer> element works the same way. This variant is built on @babylonjs/lite (install it alongside the viewer), which is a much smaller engine but is not yet feature complete, so some viewer capabilities may be unavailable.

Using Directly in a Browser

If you want to use the viewer directly in a browser without any build tools, you can use the self-contained ESM bundle (which includes all dependencies) through a CDN such as jsDelivr, UNPKG, or your own CDN like this:

html

<html lang="en">
    <body>
        <script type="module" src="https://cdn.jsdelivr.net/npm/@babylonjs/viewer/dist/babylon-viewer.esm.min.js"></script>
        <babylon-viewer source="https://playground.babylonjs.com/scenes/BoomBox.glb"></babylon-viewer>
    </body>
</html>

See the codepen.io example for a live demo.