Added progress bar
This commit is contained in:
parent
773abeb817
commit
505e43023a
|
@ -17,6 +17,10 @@ block content
|
|||
#main-div.panel-group(style={'margin-top':'10px', 'margin-bottom':'10px'})
|
||||
block description
|
||||
#alert-placeholder
|
||||
.progress
|
||||
.progress-bar.progress-bar-striped.active(role='progress-bar', aria-valuenow='0',aria-valuemin="0", aria-valuemax="100", style={width:'0%'})
|
||||
#percentage 0%
|
||||
|
||||
div(style="margin:5px")
|
||||
#container(style={'padding': '0px', 'margin': '0px'}, tabindex="1")
|
||||
|
||||
|
|
|
@ -38,6 +38,12 @@ geo.MeshContainer = function(path, callback) {
|
|||
*/
|
||||
this.texCoords = [];
|
||||
|
||||
/**
|
||||
* Number of elements to stream in the mesh
|
||||
* @type {Number}
|
||||
*/
|
||||
this.numberOfElements = -1;
|
||||
|
||||
this.callback = callback;
|
||||
|
||||
if (path !== undefined) {
|
||||
|
@ -69,6 +75,8 @@ geo.MeshContainer.prototype.loadFromFile = function(path) {
|
|||
|
||||
if (line[0] === 'v') {
|
||||
|
||||
self.numberOfElements++;
|
||||
|
||||
if (line[1] === 't') {
|
||||
|
||||
// Texture coord
|
||||
|
@ -101,6 +109,8 @@ geo.MeshContainer.prototype.loadFromFile = function(path) {
|
|||
|
||||
} else if (line[0] === 'f') {
|
||||
|
||||
self.numberOfElements++;
|
||||
|
||||
// Create mesh if it doesn't exist
|
||||
if (currentMesh === undefined) {
|
||||
currentMesh = new geo.Mesh();
|
||||
|
@ -124,6 +134,8 @@ geo.MeshContainer.prototype.loadFromFile = function(path) {
|
|||
|
||||
} else if (line[0] === 'u') {
|
||||
|
||||
self.numberOfElements++;
|
||||
|
||||
// usemtl
|
||||
// If a current mesh exists, finish it
|
||||
|
||||
|
|
|
@ -253,6 +253,9 @@ geo.MeshStreamer.prototype.nextMaterials = function() {
|
|||
|
||||
var data = [];
|
||||
|
||||
data.push(['g', this.mesh.numberOfElements]);
|
||||
|
||||
|
||||
for (var i = 0; i < this.mesh.meshes.length; i++) {
|
||||
|
||||
var currentMesh = this.mesh.meshes[i];
|
||||
|
|
|
@ -65,6 +65,12 @@ var _parseList = function(arr) {
|
|||
ret.texCoordsExist = arr[4];
|
||||
ret.normalsExist = arr[5];
|
||||
|
||||
} else if (arr[0] === 'g') {
|
||||
|
||||
ret.type = "global";
|
||||
ret.index = null;
|
||||
ret.numberOfElements = arr[1];
|
||||
|
||||
}
|
||||
|
||||
return ret;
|
||||
|
@ -81,7 +87,7 @@ var _parseList = function(arr) {
|
|||
* @constructor
|
||||
* @memberOf L3D
|
||||
*/
|
||||
var ProgressiveLoader = function(path, scene, camera, callback) {
|
||||
var ProgressiveLoader = function(path, scene, camera, callback, log) {
|
||||
|
||||
/**
|
||||
* Path to the .obj file
|
||||
|
@ -178,6 +184,27 @@ var ProgressiveLoader = function(path, scene, camera, callback) {
|
|||
*/
|
||||
this.camera = camera;
|
||||
|
||||
|
||||
/**
|
||||
* Number of total elements for loading
|
||||
* @type{Number}
|
||||
*/
|
||||
this.numberOfElements = -1;
|
||||
|
||||
/**
|
||||
* Number of elements received
|
||||
* @type {Number}
|
||||
*/
|
||||
this.numberOfElementsReceived = -1;
|
||||
|
||||
/**
|
||||
* Modulus indicator (not to log too often)
|
||||
* @type {Number}
|
||||
*/
|
||||
this.modulus = 150;
|
||||
|
||||
this.log = log;
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
|
@ -216,26 +243,19 @@ ProgressiveLoader.prototype.initIOCallbacks = function() {
|
|||
var self = this;
|
||||
|
||||
this.socket.on('ok', function() {
|
||||
console.log('ok');
|
||||
self.socket.emit('materials');
|
||||
});
|
||||
|
||||
this.socket.on('elements', function(arr) {
|
||||
|
||||
if (arr.length === 0) {
|
||||
|
||||
console.log("Empty array");
|
||||
|
||||
} else {
|
||||
|
||||
console.log("Stuff received");
|
||||
|
||||
}
|
||||
|
||||
|
||||
// console.log("Received elements for the " + (++self.counter) + "th time !");
|
||||
for (var i = 0; i < arr.length; i++) {
|
||||
|
||||
self.numberOfElementsReceived++;
|
||||
|
||||
if (typeof self.log === 'function' && self.numberOfElementsReceived % self.modulus === 0) {
|
||||
self.log(self.numberOfElementsReceived, self.numberOfElements);
|
||||
}
|
||||
|
||||
var elt = _parseList(arr[i]);
|
||||
|
||||
// console.log(elts);
|
||||
|
@ -346,6 +366,11 @@ ProgressiveLoader.prototype.initIOCallbacks = function() {
|
|||
}
|
||||
|
||||
|
||||
} else if (elt.type === 'global') {
|
||||
|
||||
self.numberOfElements = elt.numberOfElements;
|
||||
self.modulus = Math.floor(self.numberOfElements / 200);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -356,6 +381,7 @@ ProgressiveLoader.prototype.initIOCallbacks = function() {
|
|||
|
||||
this.socket.on('disconnect', function() {
|
||||
console.log('Finished !');
|
||||
self.log(self.numberOfElements, self.numberOfElements);
|
||||
self.finished = true;
|
||||
});
|
||||
};
|
||||
|
|
|
@ -1,3 +1,9 @@
|
|||
L3D.LogFunction = function(a,b) {
|
||||
var val = 100*a/b;
|
||||
$('.progress-bar').css('width', val+'%').attr('aria-valuenow', val);
|
||||
$('#percentage').html(Math.floor(10*val)/10 + '%');
|
||||
}
|
||||
|
||||
L3D.addLight = function(scene) {
|
||||
var directional_light = new THREE.DirectionalLight(0xdddddd);
|
||||
directional_light.position.set(1, 2.5, 1).normalize();
|
||||
|
@ -25,7 +31,8 @@ L3D.initPeachCastle = function(scene, collidableObjects, recommendation) {
|
|||
object.raycastable = false;
|
||||
object.material.side = THREE.FrontSide;
|
||||
}
|
||||
}
|
||||
},
|
||||
L3D.LogFunction
|
||||
);
|
||||
loader.load();
|
||||
|
||||
|
@ -161,7 +168,8 @@ L3D.initBobombScene = function(scene, collidableObjects, recommendation) {
|
|||
object.material.name === 'Material.070_41A41EE3_c.bmp') {
|
||||
THREEx.Transparency.push(object);
|
||||
}
|
||||
}
|
||||
},
|
||||
L3D.LogFunction
|
||||
);
|
||||
|
||||
loader.load();
|
||||
|
@ -314,7 +322,8 @@ L3D.initWhompScene = function(scene, collidableObjects, recommendation) {
|
|||
object.visible = false;
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
L3D.LogFunction
|
||||
);
|
||||
|
||||
loader.load();
|
||||
|
@ -489,7 +498,8 @@ L3D.initMountainScene = function(scene, collidableObjects, recommendation) {
|
|||
THREEx.Transparency.push(object);
|
||||
object.material.opacity = 0.5;
|
||||
}
|
||||
}
|
||||
},
|
||||
L3D.LogFunction
|
||||
);
|
||||
|
||||
loader.load();
|
||||
|
@ -631,15 +641,16 @@ L3D.initSponzaScene = function(scene, collidableObjects, recommendation) {
|
|||
|
||||
obj.raycastable = true;
|
||||
|
||||
}
|
||||
},
|
||||
L3D.LogFunction
|
||||
);
|
||||
|
||||
l = loader;
|
||||
loader.load();
|
||||
|
||||
|
||||
loader.getRecommendation = function() {
|
||||
var ret = loader.recommendation.toList();
|
||||
loader.getCamera = function() {
|
||||
var ret = loader.camera.toList();
|
||||
ret[0][0] *= 10;
|
||||
ret[0][1] *= 10;
|
||||
ret[0][2] *= 10;
|
||||
|
|
|
@ -28,7 +28,7 @@ THREE.OBJLoader.prototype = {
|
|||
|
||||
parse: function ( text ) {
|
||||
|
||||
console.time( 'OBJLoader' );
|
||||
// console.time( 'OBJLoader' );
|
||||
|
||||
var object, objects = [];
|
||||
var geometry, material;
|
||||
|
@ -363,7 +363,7 @@ THREE.OBJLoader.prototype = {
|
|||
|
||||
}
|
||||
|
||||
console.timeEnd( 'OBJLoader' );
|
||||
// console.timeEnd( 'OBJLoader' );
|
||||
|
||||
return container;
|
||||
|
||||
|
|
Loading…
Reference in New Issue