<html>
<head>
<title>Recreating the default configuration for Babylon.js viewer</title>
<style>
/* Force the viewer to have a specific size. This can be changed, of course. */
babylon {
width: 800px;
height: 500px;
}
</style>
</head>
<body>
<script id="main-template" type="text/x-babylon-viewer-template">
<style>
@font-face {
font-family: 'babylon';
src: url('{{babylonFont}}') format('woff');
font-weight: normal;
font-style: normal;
}
.icon {
font-family: "babylon";
}
</style>
{{#if fillScreen}}
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
{{/if}}
<fill-container></fill-container>
</script>
<script id="fill-container-template" type="text/x-babylon-viewer-template">
<style>
fill-container {
display: flex;
}
fill-container>* {
touch-action: none;
}
</style>
{{#unless disable}}
<style>
fill-container {
width: 100%;
height: 100%;
justify-content: flex-start;
/* align items in Main Axis */
align-items: stretch;
/* align items in Cross Axis */
align-content: stretch;
/* Extra space in Cross Axis */
}
fill-container>* {
flex: 1 1 auto;
flex-direction: row;
justify-content: flex-start;
/* align items in Main Axis */
align-items: stretch;
/* align items in Cross Axis */
align-content: stretch;
/* Extra space in Cross Axis */
}
</style>
{{/unless}}
<viewer></viewer>
<loading-screen></loading-screen>
<overlay></overlay>
</script>
<script id="loading-screen-template" type="text/x-babylon-viewer-template">
<style>
/* Loading Screen element */
loading-screen {
position: absolute;
left: 0;
z-index: 100;
opacity: 1;
pointer-events: none;
display: flex;
justify-content: center;
align-items: center;
-webkit-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
transition: opacity 1s ease;
}
img.loading-image {
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<img class="loading-image" src="{{loadingImage}}">
</script>
<script id="viewer-template" type="text/x-babylon-viewer-template">
<style>
viewer {
position: relative;
overflow: hidden;
/* Start stage */
z-index: 1;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.babylonjs-canvas {
flex: 1;
width: 100%;
height: 100%;
/* enable cross-browser pointer events */
touch-action: none;
}
</style>
<canvas class="babylonjs-canvas" touch-action="none"></canvas>
<nav-bar></nav-bar>
</script>
<script id="nav-bar-template" type="text/x-babylon-viewer-template">
<style>
nav-bar {
position: absolute;
height: 48px;
width: 100%;
bottom: 10px;
display: flex;
justify-content: center;
}
nav-bar .nav-container {
display: flex;
flex-direction: row;
margin: 0 10px;
height: 100%;
width: 100%;
justify-content: center;
}
nav-bar .animation-control {
background-color: rgba(91, 93, 107, .75);
display: flex;
flex-direction: row;
height: 100%;
width: 100%;
max-width: 1280px;
justify-content: center;
}
nav-bar .flex-container {
display: flex;
flex-direction: row;
justify-content: center;
height: 100%;
width: 100%;
}
nav-bar button {
background: none;
border: none;
color: white;
margin: 0;
padding: 0;
height: 100%;
min-width: 48px;
cursor: pointer;
}
nav-bar button:hover,
nav-bar button:active,
nav-bar button:focus {
background: none;
border: none;
outline: none;
}
nav-bar button:hover {
background-color: rgba(22, 24, 26, .20);
}
nav-bar .control-text {
font-family: "Segoe UI";
font-size: 12px;
font-weight: 400;
pointer-events: none;
}
nav-bar img,
nav-bar .icon {
pointer-events: none;
}
.logo-button {
display: flex;
align-items: center;
flex-direction: row;
justify-content: center;
background-color: rgba(91, 93, 107, .75);
height: 48px;
min-width: 48px;
margin-right: 4px;
}
.logo-button img {
height: 20px;
width: 20px;
}
.types {
display: flex;
flex-direction: column;
width: 48px;
}
.types .flex-container,
.speed .flex-container {
align-items: center;
}
.menu-options {
position: absolute;
bottom: 48px;
width: 48px;
background-color: rgba(22, 24, 26, .90);
}
.logo-button,
.animation-label,
.types-icon,
.help,
.speed {
display: none;
}
.types-icon:after {
font-size: 16px;
content: "\F6BE";
}
.up-icon:after {
line-height: 16px;
font-size: 12px;
content: "\E70E";
}
.play-icon:after {
font-size: 16px;
content: "\E768";
}
.pause-icon:after {
font-size: 16px;
content: "\E769";
}
.fullscreen-icon:after {
font-size: 16px;
content: "\E740";
}
/*
A few browsers dont support combining the next rule to one. Redudant.
*/
viewer.in-fullscreen .fullscreen-icon:after {
content: "\E73F";
}
.help-icon:after {
font-size: 16px;
content: "\EF4E";
}
viewer.in-vr .vr-icon:after {
font-size: 16px;
content: "\E7F4";
}
.vr-icon:after {
font-size: 16px;
content: "\F119";
}
.progress-control {
display: flex;
flex: 1;
position: relative;
overflow: hidden;
cursor: pointer;
align-items: center;
}
.animation-number {
margin: 0 6px;
}
.speed-text {
margin-right: 6px;
}
.progress-circle {
width: 12px;
height: 12px;
border: 2px solid rgb(255, 255, 255);
border-radius: 50%;
background-color: rgb(91, 93, 107);
cursor: pointer;
position: relative;
bottom: 10px;
pointer-events: none;
}
.default-control {
display: flex;
flex-direction: row;
height: 100%;
background-color: rgba(91, 93, 107, .75);
}
.menu-options button {
width: 100%;
height: 48px;
color: rgb(142, 147, 155);
}
.menu-options button {
width: 100%;
height: 48px;
color: rgb(142, 147, 155);
}
.menu-options button:hover {
background-color: transparent;
color: rgb(255, 255, 255);
}
.menu-options .animation-number {
margin: 0 18px 0 6px;
}
.menu-options .speed-text {
margin-right: 18px;
}
.menu-options {
visibility: hidden;
}
.open .menu-options {
visibility: visible;
}
.types .menu-options {
width: 144px;
}
.types .menu-options button {
padding: 0 8px;
justify-content: left;
}
.types .menu-options button>* {
display: flex;
margin: 8px;
}
.types .menu-options button span.animation-number {
display: none;
}
/* Disable fullscreen button for small screens */
.fullscreen {
display: none;
}
@media screen and (min-width: 540px) {
.help,
.types-icon,
.speed {
display: inline-block;
}
.logo-button {
display: flex;
}
.types {
width: 84px;
}
.progress-bar-container {
margin: 0 12px;
}
.speed {
width: 64px;
}
.speed .menu-options {
width: 64px;
}
.fullscreen {
display: block;
}
}
@media screen and (min-width: 1024px) {
.animation-label {
display: block;
margin-left: 6px;
text-overflow: ellipsis;
overflow: hidden;
}
nav-bar button.animation-buttons {
padding: 0 8px;
justify-content: left;
}
.icon.up-icon {
margin-left: 8px;
}
nav-bar button.animation-buttons>div {
display: flex;
pointer-events: none;
}
.animation-number {
display: none;
}
.progress-bar-container {
margin: 0 12px;
}
.types {
width: 144px;
}
}
.progress-wrapper {
-webkit-appearance: none;
cursor: pointer;
width: 100%;
outline: none;
margin: 0 12px;
height: 30px;
background-color: transparent;
}
/*Chrome -webkit */
.progress-wrapper::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
border: 2px solid white;
border-radius: 50%;
background: rgba(91, 93, 107, 1);
margin-top: -10px;
}
.progress-wrapper::-webkit-slider-runnable-track {
height: 2px;
-webkit-appearance: none;
background-color: white;
}
/** FireFox -moz */
.progress-wrapper::-moz-range-progress {
background-color: white;
height: 2px;
}
.progress-wrapper::-moz-range-thumb {
width: 20px;
height: 20px;
border: 2px solid white;
border-radius: 50%;
background: rgba(91, 93, 107, 1);
}
.progress-wrapper::-moz-range-track {
background: white;
height: 2px;
}
/** IE -ms */
.progress-wrapper::-ms-track {
height: 2px;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
background: transparent;
/*leave room for the larger thumb to overflow with a transparent border */
border-color: transparent;
border-width: 10px 0;
/*remove default tick marks*/
color: transparent;
}
.progress-wrapper::-ms-fill-lower {
background: white;
border-radius: 5px;
}
.progress-wrapper::-ms-fill-upper {
background: white;
border-radius: 5px;
}
.progress-wrapper::-ms-thumb {
width: 16px;
height: 16px;
border: 2px solid white;
border-radius: 50%;
background: rgba(91, 93, 107, 1);
margin-top: 0px;
}
span {
display: inline-block;
}
</style>
{{#if (or (not animations) hideAnimations)}} {{#if hideLogo}}
<style>
nav-bar .nav-container {
justify-content: flex-end;
}
</style>
{{else}}
<style>
nav-bar .nav-container {
justify-content: space-between;
}
</style>
{{/if}} {{/if}} {{#if disableOnFullscreen}}
<style>
viewer.in-fullscreen nav-bar {
display: none;
}
</style>
{{/if}}
<div class="nav-container navbar-control">
{{#unless hideLogo}}
<div class="logo-button" title="{{logoText}}">
{{#if logoLink}}
<a href="{{logoLink}}" target="_blank">
<img src="{{logoImage}}">
</a> {{else}}
<img src="{{logoImage}}"> {{/if}}
</div>
{{/unless}}{{#unless (or (not animations) hideAnimations)}}
<div class="animation-control">
<div class="types">
<button class="flex-container types-button animation-buttons">
<!-- <div> -->
<span class="icon types-icon"></span>
<span class="control-text animation-label">{{selectedAnimationName}}</span>
<span class="control-text animation-number">{{selectedAnimation}}</span>
<!-- </div> -->
{{#if (gt (count animations) 1)}}
<span class="icon up-icon"></span>
{{/if}}
</button>
<div class="menu-options">
{{#each animations}} {{#unless (eq ../selectedAnimation (add @index 1))}}
<button class="flex-container label-option-button animation-buttons" data-value="{{this.value}}">
<!-- <div> -->
<span class="icon types-icon"></span>
<span class="control-text animation-label">{{this.label}}</span>
<span class="control-text animation-number">{{add @index 1}}</span>
<!-- </div> -->
</button> {{/unless}} {{/each}}
</div>
</div>
<div class="progress-control">
<button class="play-pause play-pause-button">
{{#if paused}}
<span class="icon play-icon"></span>
{{else}}
<span class="icon pause-icon"></span>
{{/if}}
</button>
<input class="progress-wrapper" type="range" min="0" max="100" step="0.01">
</div>
<div class="speed">
<button class="flex-container speed-button">
<span class="control-text speed-text">{{selectedSpeed}}</span>
<span class="icon up-icon"></span>
</button>
<div class="menu-options">
{{#eachInMap speedList}} {{#unless (eq ../selectedSpeed id)}}
<button class="flex-container speed-option-button" data-value="{{value}}">
<span class="control-text speed-text">{{id}}</span>
</button> {{/unless}} {{/eachInMap}}
</div>
</div>
</div>
{{/unless}}
<div class="default-control">
{{#unless hideVr}}
<button class="vr vr-button" title="{{text.vrButton}}">
<span class="icon vr-icon"></span>
</button> {{/unless}}{{#unless hideHelp}}
<button class="help help-button" title="{{text.helpButton}}">
<span class="icon help-icon"></span>
</button> {{/unless}} {{#unless hideFullscreen}}
<button class="fullscreen fullscreen-button" title="{{text.fullscreenButton}}">
<span class="icon fullscreen-icon"></span>
</button> {{/unless}}
</div>
</div>
</script>
<babylon extends="none">
<templates>
<main location="#main-template">
<params no-escape="true" babylon-font="https://viewer.babylonjs.com/babylon.woff"></params>
</main>
<fill-container location="fill-container-template">
<params disable="false"></params>
</fill-container>
<loading-screen location="#loading-screen-template">
<params background-color="#000000" loading-image="https://blogs.windows.com/uploads/mswbprod/sites/3/2018/05/b58474ab97a2708346422fe7ce30c15e.png"></params>
</loading-screen>
<viewer location="#viewer-template">
<params enable-drag-and-drop="false"></params>
</viewer>
<nav-bar location="#nav-bar-template">
<!-- Configuring the navbar's parameters - hide certain buttons, set the main button's text, link and image -->
<params logo-image="https://blogs.windows.com/uploads/mswbprod/sites/3/2018/05/b58474ab97a2708346422fe7ce30c15e.png" logo-text="BabylonJS" logo-link="https://babylonjs.com" hide-help="true" hide-hd="true" hide-vr="true" disable-on-fullscreen="false">
<!-- define the list of speeds to be shown when a model has animations -->
<speed-list "0.5x"="0.5" "1.0x"="1.0" "2.0x"="2.0"></speed-list>
<!-- I18n -->
<text hd-button="Toggle HD" fullscreen-button="Fullscreen"></text>
</params>
<!-- enable events - pointerdown, pointerup and input events will have callbacks if triggered on the navbar element -->
<events pointerdown="true" pointerup="true" input="true"></events>
</nav-bar>
</templates>
<!-- Ground that receives shadows -->
<ground receive-shadows="true"></ground>
<!-- Default skybox -->
<skybox></skybox>
<!-- enable antialiasing -->
<engine antialiasing="true"></engine>
<!-- camera configuration -->
<camera>
<!-- add camera behaviors -->
<behaviors>
<!-- enable default auto-rotate behavior -->
<auto-rotate type="0"></auto-rotate>
<!-- enable and configure the framing behavior -->
<framing type="2" zoom-on-bounding-info="true" zoom-stops-animation="false"></framing>
<!-- enable default bouncing behavior -->
<bouncing type="1"></bouncing>
</behaviors>
</camera>
<model url="https://models.babylonjs.com/shark.glb"></model>
</babylon>
<script src="https://preview.babylonjs.com/viewer/babylon.viewer.js"></script>
</body>
</html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.