Trang chủ Khám phá Trợ giúp
Đăng ký Đăng nhập
zhangyupeng
/
Babylon.js
1
0
Fork 0
Các tập tin Các vấn đề 0 Yêu cầu khéo về 0 Wiki
Browse Source

Event-based development
ViewerManager now supports async callbacks (will be executed after a viewer is added)
eventsExample.html shows the possibilities

Raanan Weber 7 năm trước cách đây
mục cha
2e2d358d04
commit
98003a4cc0
4 tập tin đã thay đổi với 110 bổ sung và 17 xóa
Split View Hiển thị tình trạng sai khác
  1. 67 0
      Viewer/dist/eventsExample.html
  2. 6 5
      Viewer/src/util/promiseObservable.ts
  3. 14 12
      Viewer/src/viewer/viewer.ts
  4. 23 0
      Viewer/src/viewer/viewerManager.ts

+ 67 - 0
Viewer/dist/eventsExample.html
Xem Tập Tin 

@@ -0,0 +1,67 @@
 
+<!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 id="babylon-viewer" model.title="Amazing Rabbit" model.subtitle="BabylonJS" model.thumbnail="https://www.babylonjs.com/img/favicon/apple-icon-144x144.png"

+            model.url="https://playground.babylonjs.com/scenes/Rabbit.babylon" observers.on-scene-init="globalSceneInitCallback"></babylon>

+        <script src="viewer.js"></script>

+        <script>

+            //get by id ONLY after viewer init

+            var willNotWork = BabylonViewer.viewerManager.getViewerById('babylon-viewer');

+            console.log('viewer not yet initialized');

+

+            // Pomise-based API:

+            BabylonViewer.viewerManager.getViewerPromiseById('babylon-viewer').then(function (viewer) {

+                // this will resolve only after the viewer with this specific ID is initialized

+                console.log('Using promises: ', 'viewer - ' + viewer.getBaseId());

+

+                viewerObservables(viewer);

+            });

+

+            // call back variant:

+            BabylonViewer.viewerManager.onViewerAdded = function (viewer) {

+                console.log('Using viewerManager.onViewerAdded: ', 'viewer - ' + viewer.getBaseId());

+            }

+

+            // using observers:

+            BabylonViewer.viewerManager.onViewerAddedObservable.add(function (viewer) {

+                console.log('Using viewerManager.onViewerAddedObservable: ', 'viewer - ' + viewer.getBaseId());

+            });

+

+            function viewerObservables(viewer) {

+                viewer.onEngineInitObservable.add(function (engine) {

+                    console.log('Engine initialized');

+                });

+

+                viewer.onSceneInitObservable.add(function (scene) {

+                    console.log('Scene initialized');

+                });

+

+                viewer.onModelLoadedObservable.add(function (meshes) {

+                    console.log('Model loaded');

+                });

+            }

+

+            function globalSceneInitCallback(scene) {

+                console.log('scene-init function defined in the configuration');

+            }

+

+        </script>

+    </body>

+

+</html>

+ 6 - 5
Viewer/src/util/promiseObservable.ts
Xem Tập Tin 

@@ -16,7 +16,10 @@ export class PromiseObservable<T> extends Observable<T> {
 
         state.currentTarget = currentTarget;

         state.skipNextObservers = false;

 

-        for (var obs of this._observers) {

+        this._observers.forEach(obs => {

+            if (state.skipNextObservers) {

+                return;

+            }

             if (obs.mask & mask) {

                 if (obs.scope) {

                     // TODO - I can add the variable from the last function here. Requires changing callback sig

@@ -29,10 +32,8 @@ export class PromiseObservable<T> extends Observable<T> {
 
                     });

                 }

             }

-            if (state.skipNextObservers) {

-                return p;

-            }

-        }

+        });

+

         return p;

     }

 }

+ 14 - 12
Viewer/src/viewer/viewer.ts
Xem Tập Tin 

@@ -31,18 +31,6 @@ export abstract class AbstractViewer {
 
         this.onSceneInitObservable = new PromiseObservable();

         this.onEngineInitObservable = new PromiseObservable();

         this.onModelLoadedObservable = new PromiseObservable();

-        // adding preconfigured functions

-        if (this.configuration.observers) {

-            if (this.configuration.observers.onEngineInit) {

-                this.onEngineInitObservable.add(window[this.configuration.observers.onEngineInit]);

-            }

-            if (this.configuration.observers.onSceneInit) {

-                this.onEngineInitObservable.add(window[this.configuration.observers.onSceneInit]);

-            }

-            if (this.configuration.observers.onModelLoaded) {

-                this.onEngineInitObservable.add(window[this.configuration.observers.onModelLoaded]);

-            }

-        }

 

         // add this viewer to the viewer manager

         viewerManager.addViewer(this);

@@ -55,6 +43,20 @@ export abstract class AbstractViewer {
 
         // extend the configuration

         configurationLoader.loadConfiguration(initialConfiguration).then((configuration) => {

             this.configuration = configuration;

+

+            // adding preconfigured functions

+            if (this.configuration.observers) {

+                if (this.configuration.observers.onEngineInit) {

+                    this.onEngineInitObservable.add(window[this.configuration.observers.onEngineInit]);

+                }

+                if (this.configuration.observers.onSceneInit) {

+                    this.onSceneInitObservable.add(window[this.configuration.observers.onSceneInit]);

+                }

+                if (this.configuration.observers.onModelLoaded) {

+                    this.onModelLoadedObservable.add(window[this.configuration.observers.onModelLoaded]);

+                }

+            }

+

             // initialize the templates

             let templateConfiguration = this.configuration.templates || {};

             this.templateManager.initTemplate(templateConfiguration);

+ 23 - 0
Viewer/src/viewer/viewerManager.ts
Xem Tập Tin 

@@ -1,15 +1,21 @@
 
+import { Observable } from 'babylonjs';

 import { AbstractViewer } from './viewer';

 

 class ViewerManager {

 

     private viewers: { [key: string]: AbstractViewer };

 

+    public onViewerAdded: (viewer: AbstractViewer) => void;

+    public onViewerAddedObservable: Observable<AbstractViewer>;

+

     constructor() {

         this.viewers = {};

+        this.onViewerAddedObservable = new Observable();

     }

 

     public addViewer(viewer: AbstractViewer) {

         this.viewers[viewer.getBaseId()] = viewer;

+        this._onViewerAdded(viewer);

     }

 

     public getViewerById(id: string): AbstractViewer {

@@ -23,6 +29,23 @@ class ViewerManager {
 
             }

         }

     }

+

+    public getViewerPromiseById(id: string): Promise<AbstractViewer> {

+        return new Promise((resolve, reject) => {

+            let viewerFunction = (viewer: AbstractViewer) => {

+                if (viewer.getBaseId() === id) {

+                    resolve(viewer);

+                    this.onViewerAddedObservable.removeCallback(viewerFunction);

+                }

+            }

+            this.onViewerAddedObservable.add(viewerFunction);

+        });

+    }

+

+    private _onViewerAdded(viewer: AbstractViewer) {

+        this.onViewerAdded && this.onViewerAdded(viewer);

+        this.onViewerAddedObservable.notifyObservers(viewer);

+    }

 }

 

 export let viewerManager = new ViewerManager();