@babylonjs/viewer 7.22.0-alpha → 7.22.0

package/viewer/defaultViewer.js

@@ -0,0 +1,675 @@
+import { __awaiter, __extends, __generator } from "@babylonjs/core/tslib.es6.js";
+import { TemplateManager } from "../templating/templateManager.js";
+import { FilesInput } from "@babylonjs/core/Misc/filesInput.js";
+import { SpotLight } from "@babylonjs/core/Lights/spotLight.js";
+import { Vector3 } from "@babylonjs/core/Maths/math.js";
+import { AbstractViewerWithTemplate } from "./viewerWithTemplate.js";
+import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial.js";
+import { PBRMaterial } from "@babylonjs/core/Materials/PBR/pbrMaterial.js";
+// eslint-disable-next-line import/no-internal-modules
+import { extendClassWithConfig } from "../helper/index.js";
+import { AnimationState } from "../model/modelAnimation.js";
+import { HDButtonPlugin } from "../templating/plugins/hdButtonPlugin.js";
+import { PrintButtonPlugin } from "../templating/plugins/printButton.js";
+import { Logger } from "@babylonjs/core/Misc/logger.js";
+import "@babylonjs/core/Lights/Shadows/shadowGeneratorSceneComponent.js";
+/**
+ * The Default viewer is the default implementation of the AbstractViewer.
+ * It uses the templating system to render a new canvas and controls.
+ */
+var DefaultViewer = /** @class */ (function (_super) {
+    __extends(DefaultViewer, _super);
+    /**
+     * Create a new default viewer
+     * @param containerElement the element in which the templates will be rendered
+     * @param initialConfiguration the initial configuration. Defaults to extending the default configuration
+     */
+    function DefaultViewer(containerElement, initialConfiguration) {
+        if (initialConfiguration === void 0) { initialConfiguration = { extends: "default" }; }
+        var _this = _super.call(this, containerElement, initialConfiguration) || this;
+        _this.containerElement = containerElement;
+        _this._registeredPlugins = [];
+        _this._handlePointerClick = function (event) {
+            var pointerDown = event.event;
+            if (pointerDown.button !== 0) {
+                return;
+            }
+            var element = event.event.target;
+            if (!element) {
+                return;
+            }
+            var parentClasses = element.parentElement.classList;
+            var elementClasses = element.classList;
+            var elementName = "";
+            for (var i = 0; i < elementClasses.length; ++i) {
+                var className = elementClasses[i];
+                if (className.indexOf("-button") !== -1 || className.indexOf("-wrapper") !== -1) {
+                    elementName = className;
+                    break;
+                }
+            }
+            switch (elementName) {
+                case "speed-button":
+                case "types-button":
+                    if (parentClasses.contains("open")) {
+                        parentClasses.remove("open");
+                    }
+                    else {
+                        parentClasses.add("open");
+                    }
+                    break;
+                case "play-pause-button":
+                    _this._togglePlayPause();
+                    break;
+                case "label-option-button": {
+                    var value = element.dataset["value"];
+                    var label = element.querySelector("span.animation-label");
+                    if (label && value) {
+                        _this._updateAnimationType({ value: value.trim(), label: label.innerHTML });
+                    }
+                    break;
+                }
+                case "speed-option-button": {
+                    if (!_this._currentAnimation) {
+                        return;
+                    }
+                    var speed = element.dataset["value"];
+                    if (speed) {
+                        _this._updateAnimationSpeed(speed);
+                    }
+                    break;
+                }
+                case "progress-wrapper":
+                    _this._resumePlay = !_this._isAnimationPaused;
+                    if (_this._resumePlay) {
+                        _this._togglePlayPause(true);
+                    }
+                    break;
+                case "fullscreen-button":
+                    _this.toggleFullscreen();
+                    break;
+                case "vr-button":
+                    _this.toggleVR();
+                    break;
+                default:
+                    return;
+            }
+        };
+        /**
+         * Plays or Pauses animation
+         * @param noUiUpdate
+         */
+        _this._togglePlayPause = function (noUiUpdate) {
+            if (!_this._currentAnimation) {
+                return;
+            }
+            if (_this._isAnimationPaused) {
+                _this._currentAnimation.restart();
+            }
+            else {
+                _this._currentAnimation.pause();
+            }
+            _this._isAnimationPaused = !_this._isAnimationPaused;
+            if (noUiUpdate) {
+                return;
+            }
+            var navbar = _this.templateManager.getTemplate("navBar");
+            if (!navbar) {
+                return;
+            }
+            navbar.updateParams({
+                paused: _this._isAnimationPaused,
+            });
+        };
+        /**
+         * Control progress bar position based on animation current frame
+         */
+        _this._updateProgressBar = function () {
+            var navbar = _this.templateManager.getTemplate("navBar");
+            if (!navbar) {
+                return;
+            }
+            var progressSlider = navbar.parent.querySelector("input.progress-wrapper");
+            if (progressSlider && _this._currentAnimation) {
+                var progress = (_this._currentAnimation.currentFrame / _this._currentAnimation.frames) * 100;
+                var currentValue = progressSlider.valueAsNumber;
+                if (Math.abs(currentValue - progress) > 0.5) {
+                    // Only move if greater than a 1% change
+                    progressSlider.value = "" + progress;
+                }
+                if (_this._currentAnimation.state === AnimationState.PLAYING) {
+                    if (_this.sceneManager.camera.autoRotationBehavior && !_this._oldIdleRotationValue) {
+                        _this._oldIdleRotationValue = _this.sceneManager.camera.autoRotationBehavior.idleRotationSpeed;
+                        _this.sceneManager.camera.autoRotationBehavior.idleRotationSpeed = 0;
+                    }
+                }
+                else {
+                    if (_this.sceneManager.camera.autoRotationBehavior && _this._oldIdleRotationValue) {
+                        _this.sceneManager.camera.autoRotationBehavior.idleRotationSpeed = _this._oldIdleRotationValue;
+                        _this._oldIdleRotationValue = 0;
+                    }
+                }
+            }
+        };
+        /**
+         * Update Current Animation Speed
+         * @param speed
+         * @param paramsObject
+         */
+        _this._updateAnimationSpeed = function (speed, paramsObject) {
+            var navbar = _this.templateManager.getTemplate("navBar");
+            if (!navbar) {
+                return;
+            }
+            if (speed && _this._currentAnimation) {
+                _this._currentAnimation.speedRatio = parseFloat(speed);
+                if (!_this._isAnimationPaused) {
+                    _this._currentAnimation.restart();
+                }
+                if (paramsObject) {
+                    paramsObject.selectedSpeed = speed + "x";
+                }
+                else {
+                    navbar.updateParams({
+                        selectedSpeed: speed + "x",
+                    });
+                }
+            }
+        };
+        /**
+         * Update Current Animation Type
+         * @param data
+         * @param data.label
+         * @param data.value
+         * @param paramsObject
+         */
+        _this._updateAnimationType = function (data, paramsObject) {
+            var navbar = _this.templateManager.getTemplate("navBar");
+            if (!navbar) {
+                return;
+            }
+            if (data) {
+                _this._currentAnimation = _this.sceneManager.models[0].setCurrentAnimationByName(data.value);
+            }
+            if (paramsObject) {
+                paramsObject.selectedAnimation = _this._animationList.indexOf(data.value) + 1;
+                paramsObject.selectedAnimationName = data.label;
+            }
+            else {
+                navbar.updateParams({
+                    selectedAnimation: _this._animationList.indexOf(data.value) + 1,
+                    selectedAnimationName: data.label,
+                });
+            }
+            _this._updateAnimationSpeed("1.0", paramsObject);
+        };
+        /**
+         * Toggle fullscreen of the entire viewer
+         */
+        _this.toggleFullscreen = function () {
+            var viewerTemplate = _this.templateManager.getTemplate("viewer");
+            var viewerElement = viewerTemplate && viewerTemplate.parent;
+            var fullscreenElement = _this.fullscreenElement || viewerElement;
+            if (fullscreenElement) {
+                var currentElement = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
+                if (!currentElement) {
+                    var requestFullScreen = fullscreenElement.requestFullscreen ||
+                        fullscreenElement.webkitRequestFullscreen ||
+                        fullscreenElement.msRequestFullscreen ||
+                        fullscreenElement.mozRequestFullScreen;
+                    requestFullScreen.call(fullscreenElement);
+                    if (viewerElement) {
+                        viewerElement.classList.add("in-fullscreen");
+                    }
+                }
+                else {
+                    var exitFullscreen = document.exitFullscreen || document.webkitExitFullscreen || document.msExitFullscreen || document.mozCancelFullScreen;
+                    exitFullscreen.call(document);
+                    if (viewerElement) {
+                        viewerElement.classList.remove("in-fullscreen");
+                    }
+                }
+            }
+        };
+        _this._onModelLoaded = function (model) {
+            _this._configureTemplate(model);
+            // with a short timeout, making sure everything is there already.
+            var hideLoadingDelay = 20;
+            if (_this.configuration.lab && _this.configuration.lab.hideLoadingDelay !== undefined) {
+                hideLoadingDelay = _this.configuration.lab.hideLoadingDelay;
+            }
+            setTimeout(function () {
+                _this.sceneManager.scene.executeWhenReady(function () {
+                    _this.hideLoadingScreen();
+                });
+            }, hideLoadingDelay);
+            return;
+        };
+        _this.onModelLoadedObservable.add(_this._onModelLoaded);
+        _this.onModelRemovedObservable.add(function () {
+            _this._configureTemplate();
+        });
+        _this.onEngineInitObservable.add(function () {
+            _this.sceneManager.onLightsConfiguredObservable.add(function () {
+                _this._configureLights();
+            });
+            _this.sceneManager.setDefaultMaterial = function (sceneConfig) {
+                var conf = sceneConfig.defaultMaterial;
+                if (!conf) {
+                    return;
+                }
+                if ((conf.materialType === "standard" && this.scene.defaultMaterial.getClassName() !== "StandardMaterial") ||
+                    (conf.materialType === "pbr" && this.scene.defaultMaterial.getClassName() !== "PBRMaterial")) {
+                    this.scene.defaultMaterial.dispose();
+                    if (conf.materialType === "standard") {
+                        this.scene.defaultMaterial = new StandardMaterial("defaultMaterial", this.scene);
+                    }
+                    else {
+                        this.scene.defaultMaterial = new PBRMaterial("defaultMaterial", this.scene);
+                    }
+                }
+                extendClassWithConfig(this.scene.defaultMaterial, conf);
+            };
+            if (!_this.sceneManager.models.length) {
+                _this.hideLoadingScreen();
+            }
+        });
+        return _this;
+    }
+    DefaultViewer.prototype.registerTemplatePlugin = function (plugin) {
+        var _this = this;
+        //validate
+        if (!plugin.templateName) {
+            throw new Error("No template name provided");
+        }
+        this._registeredPlugins.push(plugin);
+        var template = this.templateManager.getTemplate(plugin.templateName);
+        if (!template) {
+            throw new Error("Template ".concat(plugin.templateName, " not found"));
+        }
+        if (plugin.addHTMLTemplate) {
+            template.onHTMLRendered.add(function (tmpl) {
+                plugin.addHTMLTemplate(tmpl);
+            });
+            template.redraw();
+        }
+        if (plugin.eventsToAttach) {
+            plugin.eventsToAttach.forEach(function (eventName) {
+                plugin.onEvent &&
+                    _this.templateManager.eventManager.registerCallback(plugin.templateName, function (event) {
+                        if (plugin.onEvent && plugin.interactionPredicate(event)) {
+                            plugin.onEvent(event);
+                        }
+                    }, eventName);
+            });
+        }
+    };
+    /**
+     * This will be executed when the templates initialize.
+     * @returns a promise that will be resolved when the templates are loaded
+     */
+    DefaultViewer.prototype._onTemplatesLoaded = function () {
+        var _this = this;
+        this.showLoadingScreen();
+        // navbar
+        this._initNavbar();
+        // close overlay button
+        var template = this.templateManager.getTemplate("overlay");
+        if (template) {
+            var closeButton = template.parent.querySelector(".close-button");
+            if (closeButton) {
+                closeButton.addEventListener("pointerdown", function () {
+                    _this.hideOverlayScreen();
+                });
+            }
+        }
+        if (this.configuration.templates && this.configuration.templates.viewer) {
+            if (this.configuration.templates.viewer.params && this.configuration.templates.viewer.params.enableDragAndDrop) {
+                this.onSceneInitObservable.addOnce(function () {
+                    var filesInput = new FilesInput(_this.engine, _this.sceneManager.scene, function () { }, function () { }, function () { }, function () { }, function () { }, function (file) {
+                        _this.loadModel(file);
+                    }, function () { });
+                    filesInput.monitorElementForDragNDrop(_this.templateManager.getCanvas());
+                });
+            }
+        }
+        return _super.prototype._onTemplatesLoaded.call(this);
+    };
+    DefaultViewer.prototype._initNavbar = function () {
+        var _this = this;
+        var navbar = this.templateManager.getTemplate("navBar");
+        if (navbar) {
+            this.onFrameRenderedObservable.add(this._updateProgressBar);
+            this.templateManager.eventManager.registerCallback("navBar", this._handlePointerClick, "click");
+            // an example how to trigger the help button. publiclly available
+            this.templateManager.eventManager.registerCallback("navBar", function () {
+                // do your thing
+            }, "pointerdown", ".help-button");
+            this.templateManager.eventManager.registerCallback("navBar", function (event) {
+                var evt = event.event;
+                var element = evt.target;
+                if (!_this._currentAnimation) {
+                    return;
+                }
+                var gotoFrame = (+element.value / 100) * _this._currentAnimation.frames;
+                if (isNaN(gotoFrame)) {
+                    return;
+                }
+                _this._currentAnimation.goToFrame(gotoFrame);
+            }, "input");
+            this.templateManager.eventManager.registerCallback("navBar", function () {
+                if (_this._resumePlay) {
+                    _this._togglePlayPause(true);
+                }
+                _this._resumePlay = false;
+            }, "pointerup", ".progress-wrapper");
+            if (window.devicePixelRatio === 1 && navbar.configuration.params && !navbar.configuration.params.hideHdButton) {
+                navbar.updateParams({
+                    hideHdButton: true,
+                });
+            }
+            this.registerTemplatePlugin(new HDButtonPlugin(this));
+            this.registerTemplatePlugin(new PrintButtonPlugin(this));
+        }
+    };
+    DefaultViewer.prototype._initVR = function () {
+        var _this = this;
+        if (this.sceneManager.vrHelper) {
+            // due to the way the experience helper is exisintg VR, this must be added.
+            this.sceneManager.vrHelper.onExitingVR.add(function () {
+                var viewerTemplate = _this.templateManager.getTemplate("viewer");
+                var viewerElement = viewerTemplate && viewerTemplate.parent;
+                if (viewerElement) {
+                    viewerElement.classList.remove("in-vr");
+                }
+            });
+        }
+        _super.prototype._initVR.call(this);
+    };
+    /**
+     * Preparing the container element to present the viewer
+     */
+    DefaultViewer.prototype._prepareContainerElement = function () {
+        var htmlElement = this.containerElement;
+        if (htmlElement.style) {
+            htmlElement.style.position = "relative";
+            htmlElement.style.height = "100%";
+            htmlElement.style.display = "flex";
+        }
+    };
+    /**
+     * This function will configure the templates and update them after a model was loaded
+     * It is mainly responsible to changing the title and subtitle etc'.
+     * @param model the model to be used to configure the templates by
+     */
+    DefaultViewer.prototype._configureTemplate = function (model) {
+        var navbar = this.templateManager.getTemplate("navBar");
+        if (!navbar) {
+            return;
+        }
+        var newParams = navbar.configuration.params || {};
+        if (!model) {
+            newParams.animations = null;
+        }
+        else {
+            var animationNames = model.getAnimationNames();
+            newParams.animations = animationNames.map(function (a) {
+                return { label: a, value: a };
+            });
+            if (animationNames.length) {
+                this._isAnimationPaused = (model.configuration.animation && !model.configuration.animation.autoStart) || !model.configuration.animation;
+                this._animationList = animationNames;
+                newParams.paused = this._isAnimationPaused;
+                var animationIndex = 0;
+                if (model.configuration.animation && typeof model.configuration.animation.autoStart === "string") {
+                    animationIndex = animationNames.indexOf(model.configuration.animation.autoStart);
+                    if (animationIndex === -1) {
+                        animationIndex = 0;
+                    }
+                }
+                this._updateAnimationType(newParams.animations[animationIndex], newParams);
+            }
+            else {
+                newParams.animations = null;
+            }
+            if (model.configuration.thumbnail) {
+                newParams.logoImage = model.configuration.thumbnail;
+            }
+        }
+        navbar.updateParams(newParams, false);
+    };
+    /**
+     * This will load a new model to the default viewer
+     * overriding the AbstractViewer's loadModel.
+     * The scene will automatically be cleared of the old models, if exist.
+     * @param model the configuration object (or URL) to load.
+     * @returns a promise that will be resolved when the model is loaded
+     */
+    DefaultViewer.prototype.loadModel = function (model) {
+        return __awaiter(this, void 0, void 0, function () {
+            var error_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!model) {
+                            model = this.configuration.model;
+                        }
+                        this.showLoadingScreen();
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, , 5]);
+                        return [4 /*yield*/, _super.prototype.loadModel.call(this, model, true)];
+                    case 2: return [2 /*return*/, _a.sent()];
+                    case 3:
+                        error_1 = _a.sent();
+                        Logger.Log(error_1);
+                        this.hideLoadingScreen();
+                        this.showOverlayScreen("error");
+                        return [4 /*yield*/, Promise.reject(error_1)];
+                    case 4: return [2 /*return*/, _a.sent()];
+                    case 5: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /**
+     * Show the overlay and the defined sub-screen.
+     * Mainly used for help and errors
+     * @param subScreen the name of the subScreen. Those can be defined in the configuration object
+     * @returns a promise that will be resolved when the overlay is shown
+     */
+    DefaultViewer.prototype.showOverlayScreen = function (subScreen) {
+        var _this = this;
+        var template = this.templateManager.getTemplate("overlay");
+        if (!template) {
+            return Promise.resolve("Overlay template not found");
+        }
+        return template.show(function (template) {
+            var canvasRect = _this.containerElement.getBoundingClientRect();
+            template.parent.style.display = "flex";
+            template.parent.style.width = canvasRect.width + "px";
+            template.parent.style.height = canvasRect.height + "px";
+            template.parent.style.opacity = "1";
+            var subTemplate = _this.templateManager.getTemplate(subScreen);
+            if (!subTemplate) {
+                return Promise.reject(subScreen + " template not found");
+            }
+            return subTemplate.show(function (template) {
+                template.parent.style.display = "flex";
+                return Promise.resolve(template);
+            });
+        });
+    };
+    /**
+     * Hide the overlay screen.
+     * @returns a promise that will be resolved when the overlay is hidden
+     */
+    DefaultViewer.prototype.hideOverlayScreen = function () {
+        var template = this.templateManager.getTemplate("overlay");
+        if (!template) {
+            return Promise.resolve("Overlay template not found");
+        }
+        return template.hide(function (template) {
+            template.parent.style.opacity = "0";
+            var onTransitionEnd = function () {
+                template.parent.removeEventListener("transitionend", onTransitionEnd);
+                template.parent.style.display = "none";
+            };
+            template.parent.addEventListener("transitionend", onTransitionEnd);
+            var overlays = template.parent.querySelectorAll(".overlay");
+            if (overlays) {
+                for (var i = 0; i < overlays.length; ++i) {
+                    var htmlElement = overlays.item(i);
+                    htmlElement.style.display = "none";
+                }
+            }
+            return Promise.resolve(template);
+        });
+    };
+    /**
+     * show the viewer (in case it was hidden)
+     *
+     * @param visibilityFunction an optional function to execute in order to show the container
+     * @returns a promise that will be resolved when the viewer is shown
+     */
+    DefaultViewer.prototype.show = function (visibilityFunction) {
+        var template = this.templateManager.getTemplate("main");
+        //not possible, but yet:
+        if (!template) {
+            return Promise.reject("Main template not found");
+        }
+        return template.show(visibilityFunction);
+    };
+    /**
+     * hide the viewer (in case it is visible)
+     *
+     * @param visibilityFunction an optional function to execute in order to hide the container
+     * @returns a promise that will be resolved when the viewer is hidden
+     */
+    DefaultViewer.prototype.hide = function (visibilityFunction) {
+        var template = this.templateManager.getTemplate("main");
+        //not possible, but yet:
+        if (!template) {
+            return Promise.reject("Main template not found");
+        }
+        return template.hide(visibilityFunction);
+    };
+    /**
+     * Show the loading screen.
+     * The loading screen can be configured using the configuration object
+     * @returns a promise that will be resolved when the loading screen is shown
+     */
+    DefaultViewer.prototype.showLoadingScreen = function () {
+        var _this = this;
+        var template = this.templateManager.getTemplate("loadingScreen");
+        if (!template) {
+            return Promise.resolve("Loading Screen template not found");
+        }
+        return template.show(function (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";
+            template.parent.style.height = canvasRect.height + "px";
+            template.parent.style.opacity = "1";
+            // from the configuration!!!
+            var color = "black";
+            if (_this.configuration.templates && _this.configuration.templates.loadingScreen) {
+                color = (_this.configuration.templates.loadingScreen.params && _this.configuration.templates.loadingScreen.params.backgroundColor) || color;
+            }
+            template.parent.style.backgroundColor = color;
+            return Promise.resolve(template);
+        });
+    };
+    /**
+     * Hide the loading screen
+     * @returns a promise that will be resolved when the loading screen is hidden
+     */
+    DefaultViewer.prototype.hideLoadingScreen = function () {
+        var template = this.templateManager.getTemplate("loadingScreen");
+        if (!template) {
+            return Promise.resolve("Loading Screen template not found");
+        }
+        return template.hide(function (template) {
+            template.parent.style.opacity = "0";
+            var onTransitionEnd = function () {
+                template.parent.removeEventListener("transitionend", onTransitionEnd);
+                template.parent.style.display = "none";
+            };
+            template.parent.addEventListener("transitionend", onTransitionEnd);
+            return Promise.resolve(template);
+        });
+    };
+    DefaultViewer.prototype.dispose = function () {
+        this.templateManager.dispose();
+        _super.prototype.dispose.call(this);
+    };
+    DefaultViewer.prototype._onConfigurationLoaded = function (configuration) {
+        var _this = this;
+        _super.prototype._onConfigurationLoaded.call(this, configuration);
+        this.templateManager = new TemplateManager(this.containerElement);
+        // initialize the templates
+        var templateConfiguration = this.configuration.templates || {};
+        this.templateManager.initTemplate(templateConfiguration);
+        // when done, execute onTemplatesLoaded()
+        this.templateManager.onAllLoaded.add(function () {
+            var canvas = _this.templateManager.getCanvas();
+            if (canvas) {
+                _this._canvas = canvas;
+            }
+            _this._onTemplateLoaded();
+        });
+    };
+    /**
+     * An extension of the light configuration of the abstract viewer.
+     */
+    DefaultViewer.prototype._configureLights = function () {
+        var _this = this;
+        // labs feature - flashlight
+        if (this.configuration.lab && this.configuration.lab.flashlight) {
+            var lightTarget_1;
+            var angle = 0.5;
+            var exponent = Math.PI / 2;
+            if (typeof this.configuration.lab.flashlight === "object") {
+                exponent = this.configuration.lab.flashlight.exponent || exponent;
+                angle = this.configuration.lab.flashlight.angle || angle;
+            }
+            var flashlight_1 = new SpotLight("flashlight", Vector3.Zero(), Vector3.Zero(), exponent, angle, this.sceneManager.scene);
+            if (typeof this.configuration.lab.flashlight === "object") {
+                flashlight_1.intensity = this.configuration.lab.flashlight.intensity || flashlight_1.intensity;
+                if (this.configuration.lab.flashlight.diffuse) {
+                    flashlight_1.diffuse.r = this.configuration.lab.flashlight.diffuse.r;
+                    flashlight_1.diffuse.g = this.configuration.lab.flashlight.diffuse.g;
+                    flashlight_1.diffuse.b = this.configuration.lab.flashlight.diffuse.b;
+                }
+                if (this.configuration.lab.flashlight.specular) {
+                    flashlight_1.specular.r = this.configuration.lab.flashlight.specular.r;
+                    flashlight_1.specular.g = this.configuration.lab.flashlight.specular.g;
+                    flashlight_1.specular.b = this.configuration.lab.flashlight.specular.b;
+                }
+            }
+            this.sceneManager.scene.constantlyUpdateMeshUnderPointer = true;
+            this.sceneManager.scene.onPointerObservable.add(function (eventData) {
+                if (eventData.type === 4 && eventData.pickInfo) {
+                    lightTarget_1 = eventData.pickInfo.pickedPoint;
+                }
+                else {
+                    lightTarget_1 = undefined;
+                }
+            });
+            var updateFlashlightFunction = function () {
+                if (_this.sceneManager.camera && flashlight_1) {
+                    flashlight_1.position.copyFrom(_this.sceneManager.camera.position);
+                    if (lightTarget_1) {
+                        lightTarget_1.subtractToRef(flashlight_1.position, flashlight_1.direction);
+                    }
+                }
+            };
+            this.sceneManager.scene.registerBeforeRender(updateFlashlightFunction);
+            this._registeredOnBeforeRenderFunctions.push(updateFlashlightFunction);
+        }
+    };
+    return DefaultViewer;
+}(AbstractViewerWithTemplate));
+export { DefaultViewer };
+//# sourceMappingURL=defaultViewer.js.map