Added loading canvas at begining...
This commit is contained in:
parent
838871b3c2
commit
d8d838ac3d
|
@ -22,6 +22,7 @@ L3D:
|
|||
--js l3d/src/utils/Objects.js \
|
||||
--js l3d/src/utils/History.js \
|
||||
--js l3d/src/canvases/StartCanvas.js \
|
||||
--js l3d/src/canvases/LoadingCanvas.js \
|
||||
--js l3d/src/canvases/MousePointer.js \
|
||||
--js l3d/src/canvases/Previewer.js \
|
||||
--js l3d/src/loaders/ProgressiveLoader.js \
|
||||
|
|
|
@ -11,6 +11,8 @@ L3D.ProgressiveLoader.onFinished = function() {
|
|||
for (var i = 0; i < coins.length; i++) {
|
||||
coins[i].mesh.visible = true;
|
||||
}
|
||||
|
||||
loadingCanvas.clear();
|
||||
}
|
||||
|
||||
// Disable scrolling
|
||||
|
@ -60,7 +62,7 @@ function main() {
|
|||
initModels();
|
||||
initListeners();
|
||||
|
||||
appendTo(container)(stats, Coin, startCanvas, pointer, previewer, renderer);
|
||||
appendTo(container)(stats, Coin, startCanvas, pointer, previewer, loadingCanvas, renderer);
|
||||
// appendTo(container)(startCanvas, pointer, previewer, renderer);
|
||||
|
||||
// Set the good size of cameras
|
||||
|
@ -68,6 +70,8 @@ function main() {
|
|||
|
||||
Coin.update(true);
|
||||
|
||||
loadingCanvas.render();
|
||||
|
||||
if (locked !== undefined && locked)
|
||||
startCanvas.render();
|
||||
|
||||
|
@ -138,6 +142,7 @@ function initCanvases() {
|
|||
// Init start canvas
|
||||
startCanvas = new L3D.StartCanvas(camera1);
|
||||
|
||||
loadingCanvas = new L3D.LoadingCanvas();
|
||||
}
|
||||
|
||||
function initModels() {
|
||||
|
@ -232,7 +237,7 @@ function render() {
|
|||
|
||||
function onWindowResize() {
|
||||
|
||||
resizeElements(renderer, container, previewer, Coin, pointer, startCanvas);
|
||||
resizeElements(renderer, container, previewer, Coin, pointer, startCanvas, loadingCanvas);
|
||||
|
||||
recommendations.forEach(function(reco) {
|
||||
resetCameraAspect(reco.camera, containerSize.width(), containerSize.height());
|
||||
|
|
|
@ -0,0 +1,97 @@
|
|||
/**
|
||||
* @memberof L3D
|
||||
* @constructor
|
||||
* @description Displays a translucid canvas over the renderer to tell to wait for loading
|
||||
*/
|
||||
L3D.LoadingCanvas = function() {
|
||||
|
||||
/**
|
||||
* @type {elemnt}
|
||||
* @description The document element to add on top of the renderer
|
||||
*/
|
||||
this.domElement = document.createElement('canvas');
|
||||
this.domElement.style.position = 'absolute';
|
||||
this.domElement.style.cssFloat = 'top-left';
|
||||
|
||||
/**
|
||||
* @type {CanvasRenderingContext2D}
|
||||
* @description The context of the canvas
|
||||
*/
|
||||
this.ctx = this.domElement.getContext('2d');
|
||||
|
||||
/**
|
||||
* @type {Boolean}
|
||||
* @description true if the canvas is displayed
|
||||
*/
|
||||
this.shown = false;
|
||||
|
||||
this.dots = '.';
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Shows the canvas with a string in the middle of it (not done if already shown)
|
||||
* @param {Boolean} force force the rendering
|
||||
*/
|
||||
L3D.LoadingCanvas.prototype.render = function(force) {
|
||||
|
||||
if (!this.shown || force) {
|
||||
|
||||
this.ctx.fillStyle = 'white';
|
||||
this.ctx.globalAlpha = 1;
|
||||
this.ctx.fillRect(0,0,this.domElement.width, this.domElement.height);
|
||||
|
||||
this.ctx.font = '30px Verdana';
|
||||
this.ctx.globalAlpha = 1;
|
||||
this.ctx.fillStyle = 'black';
|
||||
this.ctx.fillText('Loading ' + this.dots, containerSize.width()/2.75, containerSize.height()/2-10);
|
||||
|
||||
|
||||
this.shown = true;
|
||||
|
||||
var self = this;
|
||||
setTimeout(function() {
|
||||
if (self.shown) {
|
||||
self.dots += '.';
|
||||
if (self.dots === '....') {
|
||||
self.dots = '.';
|
||||
}
|
||||
self.render(true);
|
||||
}
|
||||
}, 750);
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Hide canvas
|
||||
*/
|
||||
L3D.LoadingCanvas.prototype.clear = function() {
|
||||
|
||||
if (this.shown) {
|
||||
|
||||
// Clear canvas
|
||||
this.domElement.width = this.domElement.width;
|
||||
|
||||
this.shown = false;
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Sets the size of the canvas
|
||||
* @param {Number} width new width of the canvas
|
||||
* @param {Number} height new height of the canvas
|
||||
*/
|
||||
L3D.LoadingCanvas.prototype.setSize = function(width, height) {
|
||||
|
||||
this.domElement.width = width;
|
||||
this.domElement.height = height;
|
||||
|
||||
// If the canvas was shown, redraw it
|
||||
if (this.shown)
|
||||
this.render(true);
|
||||
|
||||
};
|
Loading…
Reference in New Issue