In many use-cases, a website simply wants to display 3D content to its viewers, without any interactions and with a simple-to-use API. Using Babylon.js is very simple, but still requires coding in order to create the engine, the scene, load the model, handle errors etc'. This is where Babylon's viewer come into play.
Babylon's viewer is a wrapper around Babylon, that automatically initializes the needed components in order to display a loaded model. It is easy to use, and require no coding at all.
The viewer automatically interacts with the DOM, searching for HTML elements named babylon
. It will then automatically read the configuration from the DOM element and will create a scene for it.
The viewer's entire behavior is extendable. It is explained in detail in Configuration
and Extending the viewer
.
The viewer automatically serves all of Babylon's loaders, and currently supports loading models from .babylon
, .gltf
, .glb
, .obj
, and .stl
files.
The latest stable viewer version can always be found at https://viewer.babylonjs.com/viewer.js. Minified version at https://viewer.babylonjs.com/viewer.min.js.
The viewer exposes BabylonViewer
to the window object, which can be used to interact with all viewers on the current page. For further details see Advanced usage.
It will soon be available on NPM as well for developers wishing to extend it.
Consider we want to display Babylon's rabbit model on a website. To do that we simply add a new <babylon>
DOM element to our already-existing HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>BabylonJS Viewer - Basic usage</title>
<style>
babylon {
max-width: 800px;
max-height: 500px;
width: 100%;
height: 600px;
}
</style>
</head>
<body>
<babylon model="https://playground.babylonjs.com/scenes/Rabbit.babylon"></babylon>
<script src="https://viewer.babylonjs.com/viewer.min.js"></script>
</body>
</html>
This will load the model(s) from Rabbit.babylon and will show them using the default configuration.