VR button was added and disabled per default

Viewer/assets/templates/default/navbar.html

@@ -174,6 +174,16 @@
         content: "\F766";
     }
 
+    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;
@@ -513,7 +523,7 @@
     </div>
     {{/unless}}
     <div class="default-control">
-        {{#unless hideHdButton}}
+        {{#unless hideHd}}
         <button class="hd-button hd-button" title="{{text.hdButton}}">
             {{#if hdEnabled}}
             <span class="icon sd-icon"></span>
@@ -521,7 +531,11 @@
             <span class="icon hd-icon"></span>
             {{/if}}
         </button>
-        {{/unless}} {{#unless hideHelp}}
+        {{/unless}} {{#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>

Viewer/src/configuration/types/default.ts

@@ -49,12 +49,14 @@ export let defaultConfiguration: ViewerConfiguration = {
                 logoText: 'BabylonJS',
                 logoLink: 'https://babylonjs.com',
                 hideHelp: true,
-                hideHdButton: true,
+                hideHd: true,
+                hideVr: true,
                 disableOnFullscreen: false,
                 text: {
                     hdButton: "Toggle HD",
                     fullscreenButton: "Fullscreen",
-                    helpButton: "Help"
+                    helpButton: "Help",
+                    vrButton: "Toggle VR"
                 }
             },
             events: {

Viewer/src/viewer/defaultViewer.ts

@@ -182,6 +182,9 @@ export class DefaultViewer extends AbstractViewer {
             case "hd-button":
                 this.toggleHD();
                 break;
+            case "vr-button":
+                this.toggleVR();
+                break;
             default:
                 return;
         }
@@ -307,6 +310,21 @@ export class DefaultViewer extends AbstractViewer {
         }
     }
 
+    public toggleVR() {
+        super.toggleVR();
+
+        let viewerTemplate = this.templateManager.getTemplate('viewer');
+        let viewerElement = viewerTemplate && viewerTemplate.parent;
+
+        if (viewerElement) {
+            if (this._vrToggled) {
+                viewerElement.classList.add("in-vr");
+            } else {
+                viewerElement.classList.remove("in-vr");
+            }
+        }
+    }
+
     /**
      * Toggle fullscreen of the entire viewer
      */