Browse Source

move enter vr to click event as pointup is not a user action on mobile

Trevor Baron 7 năm trước cách đây
mục cha
commit
aeca8c4c0b

+ 16 - 13
Viewer/dist/basicExample.html

@@ -8,27 +8,30 @@
         <title>BabylonJS Viewer - Basic usage</title>
         <style>
             babylon {
-                max-width: 800px;
-                max-height: 500px;
-                width: 100%;
-                height: 600px;
+                width: 300px;
+                height: 200px;
             }
         </style>
     </head>
 
     <body>
-        <babylon id="babylon-viewer" configuration="config.json" model.title="Damaged Helmet" model.subtitle="BabylonJS" model.thumbnail="https://www.babylonjs.com/img/favicon/apple-icon-144x144.png"
-            model.url="https://www.babylonjs.com/Assets/DamagedHelmet/glTF/DamagedHelmet.gltf" camera.behaviors.auto-rotate="0"
-            templates.nav-bar.params.disable-on-fullscreen="true"></babylon>
+        <babylon id="babylon-viewer" model="https://models.babylonjs.com/boombox.glb">
+            <!-- Setting the vr object (or vr="true" in the <babylon tag) is enough to enable VR.
+                 The object-scale-factor is optional an can be used to scale the model in VR mode.
+                 If setting "2", the model will be twice the size of its normalized size.
+            -->
+            <vr object-scale-factor="2">
+            </vr>
+            <!-- This is needed in order to show the VR button. It is also possible to toggleVR() using javascript -->
+            <templates>
+                <nav-bar>
+                    <params hide-vr="false"></params>
+                </nav-bar>
+            </templates>
+        </babylon>
         <script src="viewer.js"></script>
         <script>
-            // The following lines are redundant. 
-            // They are only here to show how you could achive the tag initialization on your own.
 
-            // a simple way of disabling auto init 
-            BabylonViewer.disableInit = true;
-            // Initializing the viewer on specific HTML tags.
-            BabylonViewer.InitTags('babylon');
         </script>
     </body>
 

+ 3 - 1
Viewer/src/configuration/types/default.ts

@@ -62,8 +62,10 @@ export let defaultConfiguration: ViewerConfiguration = {
                 }
             },
             events: {
+                click: {
+                    '.navbar-control': true
+                },
                 pointerdown: {
-                    '.navbar-control': true,
                     '.help-button': true
                 },
                 input: {

+ 2 - 2
Viewer/src/viewer/defaultViewer.ts

@@ -120,7 +120,7 @@ export class DefaultViewer extends AbstractViewer {
         let navbar = this.templateManager.getTemplate('navBar');
         if (navbar) {
             this.onFrameRenderedObservable.add(this._updateProgressBar);
-            this.templateManager.eventManager.registerCallback('navBar', this._handlePointerDown, 'pointerdown');
+            this.templateManager.eventManager.registerCallback('navBar', this._handlePointerClick, 'click');
             // an example how to trigger the help button. publiclly available
             this.templateManager.eventManager.registerCallback("navBar", () => {
                 // do your thing
@@ -158,7 +158,7 @@ export class DefaultViewer extends AbstractViewer {
     private _isAnimationPaused: boolean;
     private _resumePlay: boolean;
 
-    private _handlePointerDown = (event: EventCallback) => {
+    private _handlePointerClick = (event: EventCallback) => {
 
         let pointerDown = <PointerEvent>event.event;
         if (pointerDown.button !== 0) return;