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/Objects.js \
|
||||||
--js l3d/src/utils/History.js \
|
--js l3d/src/utils/History.js \
|
||||||
--js l3d/src/canvases/StartCanvas.js \
|
--js l3d/src/canvases/StartCanvas.js \
|
||||||
|
--js l3d/src/canvases/LoadingCanvas.js \
|
||||||
--js l3d/src/canvases/MousePointer.js \
|
--js l3d/src/canvases/MousePointer.js \
|
||||||
--js l3d/src/canvases/Previewer.js \
|
--js l3d/src/canvases/Previewer.js \
|
||||||
--js l3d/src/loaders/ProgressiveLoader.js \
|
--js l3d/src/loaders/ProgressiveLoader.js \
|
||||||
|
|
|
@ -11,6 +11,8 @@ L3D.ProgressiveLoader.onFinished = function() {
|
||||||
for (var i = 0; i < coins.length; i++) {
|
for (var i = 0; i < coins.length; i++) {
|
||||||
coins[i].mesh.visible = true;
|
coins[i].mesh.visible = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
loadingCanvas.clear();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Disable scrolling
|
// Disable scrolling
|
||||||
|
@ -60,7 +62,7 @@ function main() {
|
||||||
initModels();
|
initModels();
|
||||||
initListeners();
|
initListeners();
|
||||||
|
|
||||||
appendTo(container)(stats, Coin, startCanvas, pointer, previewer, renderer);
|
appendTo(container)(stats, Coin, startCanvas, pointer, previewer, loadingCanvas, renderer);
|
||||||
// appendTo(container)(startCanvas, pointer, previewer, renderer);
|
// appendTo(container)(startCanvas, pointer, previewer, renderer);
|
||||||
|
|
||||||
// Set the good size of cameras
|
// Set the good size of cameras
|
||||||
|
@ -68,6 +70,8 @@ function main() {
|
||||||
|
|
||||||
Coin.update(true);
|
Coin.update(true);
|
||||||
|
|
||||||
|
loadingCanvas.render();
|
||||||
|
|
||||||
if (locked !== undefined && locked)
|
if (locked !== undefined && locked)
|
||||||
startCanvas.render();
|
startCanvas.render();
|
||||||
|
|
||||||
|
@ -138,6 +142,7 @@ function initCanvases() {
|
||||||
// Init start canvas
|
// Init start canvas
|
||||||
startCanvas = new L3D.StartCanvas(camera1);
|
startCanvas = new L3D.StartCanvas(camera1);
|
||||||
|
|
||||||
|
loadingCanvas = new L3D.LoadingCanvas();
|
||||||
}
|
}
|
||||||
|
|
||||||
function initModels() {
|
function initModels() {
|
||||||
|
@ -232,7 +237,7 @@ function render() {
|
||||||
|
|
||||||
function onWindowResize() {
|
function onWindowResize() {
|
||||||
|
|
||||||
resizeElements(renderer, container, previewer, Coin, pointer, startCanvas);
|
resizeElements(renderer, container, previewer, Coin, pointer, startCanvas, loadingCanvas);
|
||||||
|
|
||||||
recommendations.forEach(function(reco) {
|
recommendations.forEach(function(reco) {
|
||||||
resetCameraAspect(reco.camera, containerSize.width(), containerSize.height());
|
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