Browse Source

Merge pull request #4238 from RaananW/ufo-animation

Updated ufo animation
Raanan Weber 7 năm trước cách đây
mục cha
commit
d3f83662cf

+ 10 - 3
Viewer/assets/templates/default/defaultTemplate.html

@@ -9,8 +9,15 @@
     .icon {
         font-family: "babylon";
     }
+
+    html,
+    body {
+        width: 100%;
+        height: 100%;
+
+        margin: 0;
+        padding: 0;
+    }
 </style>
 
-<viewer></viewer>
-<loading-screen></loading-screen>
-<overlay></overlay>
+<fill-container></fill-container>

+ 38 - 0
Viewer/assets/templates/default/fillContainer.html

@@ -0,0 +1,38 @@
+<style>
+    fill-container {
+        display: flex;
+    }
+</style>
+
+{{#unless disable}}
+<style>
+    fill-container {
+        width: 100%;
+        height: 100%;
+        flex-direction: column;
+
+        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>

+ 7 - 2
Viewer/assets/templates/default/navbar.html

@@ -317,9 +317,14 @@
 <div class="nav-container" id="navbar-control">
     {{#unless hideLogo}}
     <div class="logo-button" title="{{logoText}}">
-        <img src="{{logoImg}}">
+        {{#if logoLink}}
+        <a href="{{logoLink}}" target="_blank">
+            <img src="{{logoImage}}">
+        </a>
+        {{else}}
+        <img src="{{logoImage}}"> {{/if}}
     </div>
-    {{/unless}} {{#unless (or (not animations) hideAnimations)}}
+    {{/unless}}{{#unless (or (not animations) hideAnimations)}}
     <div class="animation-control">
         <div class="types">
             <button class="flex-container" id="types-button">

+ 3 - 5
Viewer/dist/ufoExample.html

@@ -9,16 +9,14 @@
         <style>
             babylon,
             #viewport {
-                max-width: 900px;
-                max-height: 600px;
-                width: 100%;
-                height: 600px;
+                /*max-width: 900px;
+                max-height: 600px;*/
             }
         </style>
     </head>
 
     <body>
-        <babylon extends="default, shadowDirectionalLight, environmentMap" templates.nav-bar.params.hide-animations="true" templates.nav-bar.params.disable-on-fullscreen="true">
+        <babylon extends="default, shadowDirectionalLight, environmentMap" templates.nav-bar.params.disable-on-fullscreen="true">
             <scene glow="true">
             </scene>
             <lab>

+ 1 - 0
Viewer/src/configuration/configuration.ts

@@ -188,6 +188,7 @@ export interface IModelConfiguration {
     animation?: {
         autoStart?: boolean | string;
         playOnce?: boolean;
+        autoStartIndex?: number;
     }
 
     entryAnimation?: IModelAnimationConfiguration;

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

@@ -10,6 +10,12 @@ export let defaultConfiguration: ViewerConfiguration = {
                 noEscape: true
             }
         },
+        fillContainer: {
+            html: require("../../../assets/templates/default/fillContainer.html"),
+            params: {
+                disable: false
+            }
+        },
         loadingScreen: {
             html: require("../../../assets/templates/default/loadingScreen.html"),
             params: {
@@ -34,8 +40,9 @@ export let defaultConfiguration: ViewerConfiguration = {
                     "1.5x": "1.5",
                     "2.0x": "2.0",
                 },
-                logoImg: require('../../../assets/img/BabylonJS_Logo_Small.png'),
+                logoImage: require('../../../assets/img/BabylonJS_Logo_Small.png'),
                 logoText: 'BabylonJS',
+                logoLink: 'https://babylonjs.com',
                 hideHelp: true,
                 disableOnFullscreen: true,
             },

+ 3 - 3
Viewer/src/configuration/types/shadowLight.ts

@@ -18,13 +18,13 @@ export const shadowDirectionalLightConfiguration: ViewerConfiguration = {
             intensity: 4.887,
             intensityMode: 0,
             shadowBufferSize: 1024,
-            shadowFrustumSize: 8.0,
+            shadowFrustumSize: 6.0,
             shadowFieldOfView: 50.977,
             shadowMinZ: 0.1,
-            shadowMaxZ: 12.0,
+            shadowMaxZ: 10.0,
             shadowConfig: {
                 blurKernel: 32,
-                useBlurExponentialShadowMap: true
+                useBlurCloseExponentialShadowMap: true
             }
         }
     }

+ 43 - 23
Viewer/src/viewer/defaultViewer.ts

@@ -154,7 +154,7 @@ export class DefaultViewer extends AbstractViewer {
     /** 
      * Update Current Animation Speed
      */
-    private _updateAnimationSpeed = (speed: string) => {
+    private _updateAnimationSpeed = (speed: string, paramsObject?: any) => {
         let navbar = this.templateManager.getTemplate('navBar');
         if (!navbar) return;
 
@@ -163,16 +163,21 @@ export class DefaultViewer extends AbstractViewer {
             if (!this._isAnimationPaused) {
                 this._currentAnimation.restart();
             }
-            navbar.updateParams({
-                selectedSpeed: speed + "x",
-            });
+
+            if (paramsObject) {
+                paramsObject.selectedSpeed = speed + "x"
+            } else {
+                navbar.updateParams({
+                    selectedSpeed: speed + "x",
+                });
+            }
         }
     }
 
     /** 
      * Update Current Animation Type
      */
-    private _updateAnimationType = (label: string) => {
+    private _updateAnimationType = (label: string, paramsObject?: any) => {
         let navbar = this.templateManager.getTemplate('navBar');
         if (!navbar) return;
 
@@ -180,12 +185,15 @@ export class DefaultViewer extends AbstractViewer {
             this._currentAnimation = this.sceneManager.models[0].setCurrentAnimationByName(label);
         }
 
-        navbar.updateParams({
-            selectedAnimation: (this._animationList.indexOf(label) + 1),
-        });
+        if (paramsObject) {
+            paramsObject.selectedAnimation = (this._animationList.indexOf(label) + 1)
+        } else {
+            navbar.updateParams({
+                selectedAnimation: (this._animationList.indexOf(label) + 1),
+            });
+        }
 
-        // reset speed when a new animation is selected
-        this._updateAnimationSpeed("1.0");
+        this._updateAnimationSpeed("1.0", paramsObject);
     }
 
     /**
@@ -212,6 +220,7 @@ export class DefaultViewer extends AbstractViewer {
      */
     protected _prepareContainerElement() {
         this.containerElement.style.position = 'relative';
+        this.containerElement.style.height = '100%';
         this.containerElement.style.display = 'flex';
     }
 
@@ -224,19 +233,26 @@ export class DefaultViewer extends AbstractViewer {
         let navbar = this.templateManager.getTemplate('navBar');
         if (!navbar) return;
 
-        if (model.getAnimationNames().length >= 1) {
+        let newParams: any = {};
+
+        let animationNames = model.getAnimationNames();
+        if (animationNames.length >= 1) {
             this._isAnimationPaused = (model.configuration.animation && !model.configuration.animation.autoStart) || !model.configuration.animation;
-            this._animationList = model.getAnimationNames(),
-                navbar.updateParams({
-                    animations: this._animationList,
-                    paused: this._isAnimationPaused,
-                });
+            this._animationList = animationNames;
+            newParams.animations = this._animationList;
+            newParams.paused = this._isAnimationPaused;
+            let animationIndex = 0;
+            if (model.configuration.animation && model.configuration.animation.autoStartIndex) {
+                animationIndex = model.configuration.animation.autoStartIndex;
+            }
+            this._updateAnimationSpeed("1.0", newParams);
+            this._updateAnimationType(animationNames[animationIndex]);
+        }
 
-            // default animation & speed
-            this._updateAnimationSpeed("1.0");
-            this._updateAnimationType(this._animationList[0]);
+        if (model.configuration.thumbnail) {
+            newParams.logoImage = model.configuration.thumbnail
         }
-        let modelConfiguration = model.configuration;
+        navbar.updateParams(newParams);
     }
 
     /**
@@ -286,7 +302,6 @@ export class DefaultViewer extends AbstractViewer {
         return template.show((template => {
 
             var canvasRect = this.containerElement.getBoundingClientRect();
-            var canvasPositioning = window.getComputedStyle(this.containerElement).position;
 
             template.parent.style.display = 'flex';
             template.parent.style.width = canvasRect.width + "px";
@@ -365,14 +380,19 @@ export class DefaultViewer extends AbstractViewer {
         return template.show((template => {
 
             var canvasRect = this.containerElement.getBoundingClientRect();
-            var canvasPositioning = window.getComputedStyle(this.containerElement).position;
+            // var canvasPositioning = window.getComputedStyle(this.containerElement).position;
 
             template.parent.style.display = 'flex';
             template.parent.style.width = canvasRect.width + "px";
             template.parent.style.height = canvasRect.height + "px";
             template.parent.style.opacity = "1";
             // from the configuration!!!
-            template.parent.style.backgroundColor = "black";
+            let color = "black";
+            if (this.configuration.templates && this.configuration.templates.loadingScreen) {
+                color = (this.configuration.templates.loadingScreen.params &&
+                    <string>this.configuration.templates.loadingScreen.params.backgroundColor) || color;
+            }
+            template.parent.style.backgroundColor = color;
             return Promise.resolve(template);
         }));
     }