A lot of work, cleaning streaming
This commit is contained in:
Thomas FORGIONE
@@ -1,194 +1,182 @@
|
||||
var _parseList = function(arr) {
|
||||
|
||||
// For example
|
||||
// arr = [ 'f', 0, 0, 1, 2];
|
||||
// type index first second third
|
||||
|
||||
var ret = {};
|
||||
ret.index = arr[1];
|
||||
|
||||
if (arr[0] === 'v') {
|
||||
ret.type = 'vertex';
|
||||
ret.x = arr[2];
|
||||
ret.y = arr[3];
|
||||
ret.z = arr[4];
|
||||
} else if (arr[0] === 'vt') {
|
||||
ret.type = 'texCoord';
|
||||
ret.x = arr[2];
|
||||
ret.y = arr[3];
|
||||
} else if (arr[0] === 'f') {
|
||||
ret.type = 'face';
|
||||
|
||||
if (arr.length === 5 ) {
|
||||
|
||||
// Simple Face3
|
||||
ret.a = arr[2];
|
||||
ret.b = arr[3];
|
||||
ret.c = arr[4];
|
||||
|
||||
} else if (arr.length === 8) {
|
||||
|
||||
// Face3 with textures and maybe normals
|
||||
ret.a = arr[2];
|
||||
ret.b = arr[3];
|
||||
ret.c = arr[4];
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
return ret;
|
||||
}
|
||||
|
||||
var ProgressiveLoader = function(path, scene, callback) {
|
||||
// Create MTLLoader
|
||||
var loader = new THREE.MTLLoader(path.substring(0, path.lastIndexOf('/')) + '/');
|
||||
loader.load(path.replace('.obj', '.mtl'), function(materialCreator) {
|
||||
// Init attributes
|
||||
this.objPath = path;
|
||||
this.texturesPath = path.substring(0, path.lastIndexOf('/')) + '/';
|
||||
this.mtlPath = path.replace('.obj', '.mtl');
|
||||
this.scene = scene;
|
||||
this.callback = callback;
|
||||
this.counter = 0;
|
||||
|
||||
this.obj = new THREE.Object3D();
|
||||
|
||||
scene.add(this.obj);
|
||||
|
||||
this.vertices = [];
|
||||
this.texCoords = [];
|
||||
|
||||
// Init MTLLoader
|
||||
this.loader = new THREE.MTLLoader(this.texturesPath);
|
||||
|
||||
// Init io stuff
|
||||
this.socket = io();
|
||||
this.initIOCallbacks();
|
||||
|
||||
}
|
||||
|
||||
ProgressiveLoader.prototype.load = function() {
|
||||
|
||||
var self = this;
|
||||
|
||||
this.loader.load(self.mtlPath, function(materialCreator) {
|
||||
|
||||
materialCreator.preload();
|
||||
|
||||
// Create mesh
|
||||
var obj = new THREE.Object3D();
|
||||
obj.up = new THREE.Vector3(0,0,1);
|
||||
glob = obj;
|
||||
|
||||
var currentMesh;
|
||||
var currentMaterial;
|
||||
|
||||
var added = false;
|
||||
var finished = false;
|
||||
|
||||
var socket = io();
|
||||
|
||||
var vertices = [];
|
||||
var textCoords = [];
|
||||
var uvs = [];
|
||||
var faces = [];
|
||||
|
||||
// Init streaming with socket
|
||||
socket.emit('request', path.substring(1, path.length));
|
||||
|
||||
// When server's ready, start asking for the mesh
|
||||
socket.on('ok', function() {
|
||||
socket.emit('next');
|
||||
});
|
||||
|
||||
// When receiving elements
|
||||
socket.on('elements', function(arr) {
|
||||
|
||||
console.log("Got stuff");
|
||||
|
||||
if (!finished) {
|
||||
socket.emit('next');
|
||||
}
|
||||
|
||||
// Launch this code in async
|
||||
setTimeout(function() {
|
||||
|
||||
// We'll receive an array of string (obj)
|
||||
for (var i = 0; i < arr.length; i++) {
|
||||
|
||||
var elts = arr[i];
|
||||
|
||||
// console.log(line);
|
||||
|
||||
if (elts[0] === 'v') {
|
||||
|
||||
vertices.push(new THREE.Vector3(
|
||||
elts[1],
|
||||
elts[2],
|
||||
elts[3]
|
||||
));
|
||||
|
||||
} else if (elts[0] === 'vt') {
|
||||
|
||||
textCoords.push(new THREE.Vector2(
|
||||
elts[1],
|
||||
elts[2]
|
||||
));
|
||||
|
||||
} else if (elts[0] === 'f') {
|
||||
|
||||
faces.push(new THREE.Face3(
|
||||
elts[1],
|
||||
elts[2],
|
||||
elts[3]
|
||||
));
|
||||
|
||||
// If the face has 4 vertices, create second triangle
|
||||
if (elts.length === 5 || elts.length === 9) {
|
||||
|
||||
faces.push(new THREE.Face3(
|
||||
elts[1],
|
||||
elts[3],
|
||||
elts[4]
|
||||
));
|
||||
|
||||
}
|
||||
|
||||
// Add texture
|
||||
if (elts.length === 7) {
|
||||
uvs.push([
|
||||
textCoords[elts[4]],
|
||||
textCoords[elts[5]],
|
||||
textCoords[elts[6]]
|
||||
]);
|
||||
}
|
||||
|
||||
if (elts.length === 9) {
|
||||
uvs.push([
|
||||
textCoords[elts[5]],
|
||||
textCoords[elts[6]],
|
||||
textCoords[elts[7]]
|
||||
]);
|
||||
}
|
||||
|
||||
if (elts.length === 9) {
|
||||
uvs.push([
|
||||
textCoords[elts[5]],
|
||||
textCoords[elts[7]],
|
||||
textCoords[elts[8]]
|
||||
]);
|
||||
}
|
||||
|
||||
// Add currentMesh to scene one there are a few faces in it
|
||||
if (!added) {
|
||||
scene.add(obj);
|
||||
added = true;
|
||||
}
|
||||
|
||||
if (!currentMesh) {
|
||||
var geo = new THREE.Geometry();
|
||||
geo.vertices = vertices;
|
||||
geo.faces = faces;
|
||||
geo.faceVertexUvs = [uvs];
|
||||
|
||||
|
||||
var material, tmp = currentMaterial;
|
||||
if (currentMaterial === undefined || currentMaterial === null) {
|
||||
material = new THREE.MeshLambertMaterial({color: 'red'});
|
||||
} else {
|
||||
material = materialCreator.materials[currentMaterial.trim()];
|
||||
material.side = THREE.DoubleSide;
|
||||
if (material.map)
|
||||
material.map.wrapS = material.map.wrapT = THREE.RepeatWrapping;
|
||||
|
||||
currentMaterial = null;
|
||||
}
|
||||
currentMesh = new THREE.Mesh(geo, material);
|
||||
|
||||
if (typeof callback === 'function') {
|
||||
callback(currentMesh, obj);
|
||||
}
|
||||
|
||||
currentMesh.geometry.computeFaceNormals();
|
||||
}
|
||||
obj.add(currentMesh);
|
||||
|
||||
} else if (elts[0] === 'u') {
|
||||
|
||||
// Add current mesh
|
||||
// if (currentMesh) {
|
||||
// obj.add(currentMesh);
|
||||
// }
|
||||
|
||||
// Prepare new mesh
|
||||
faces = [];
|
||||
uvs = [];
|
||||
// currentMesh.geometry.computeFaceNormals();
|
||||
if (currentMesh) {
|
||||
currentMesh.geometry.computeFaceNormals();
|
||||
currentMesh.geometry.computeBoundingSphere();
|
||||
currentMesh.geometry.groupsNeedUpdate = true;
|
||||
currentMesh.geometry.elementsNeedUpdate = true;
|
||||
currentMesh.geometry.normalsNeedUpdate = true;
|
||||
currentMesh.geometry.uvsNeedUpdate = true;
|
||||
}
|
||||
currentMaterial = elts[1];
|
||||
currentMesh = null;
|
||||
|
||||
// console.log(material.map);
|
||||
// currentMesh = new THREE.Mesh(geo, material);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if (currentMesh) {
|
||||
currentMesh.material.side = THREE.DoubleSide;
|
||||
currentMesh.geometry.computeFaceNormals();
|
||||
currentMesh.geometry.computeBoundingSphere();
|
||||
currentMesh.geometry.groupsNeedUpdate = true;
|
||||
currentMesh.geometry.elementsNeedUpdate = true;
|
||||
currentMesh.geometry.normalsNeedUpdate = true;
|
||||
currentMesh.geometry.uvsNeedUpdate = true;
|
||||
}
|
||||
|
||||
},0);
|
||||
});
|
||||
|
||||
socket.on('disconnect', function() {
|
||||
console.log("Finished");
|
||||
finished = true;
|
||||
});
|
||||
self.start();
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
ProgressiveLoader.prototype.initIOCallbacks = function() {
|
||||
|
||||
var self = this;
|
||||
|
||||
this.socket.on('usemtl', function(materialName, verticesNumber, facesNumber, texCoordsNumber) {
|
||||
|
||||
// Create mesh material
|
||||
var material;
|
||||
|
||||
if (materialName === null) {
|
||||
|
||||
// If no material, create a default material
|
||||
material = new THREE.MeshLambertMaterial({color: 'red'});
|
||||
|
||||
} else {
|
||||
|
||||
// If material name exists, load if from material, and do a couple of settings
|
||||
material = materialCreator.materials[currentMaterial.trim()];
|
||||
|
||||
material.side = THREE.DoubleSide;
|
||||
|
||||
if (material.map)
|
||||
material.map.wrapS = material.map.wrapT = THREE.RepeatWrapping;
|
||||
}
|
||||
|
||||
// Create mesh geometry
|
||||
var geometry = new THREE.BufferGeometry();
|
||||
geometry.dynamic = true;
|
||||
|
||||
var positionArray = new Float32Array(facesNumber * 3 * 3);
|
||||
var positionAttribute = new THREE.BufferAttribute(positionArray, 3);
|
||||
|
||||
geometry.addAttribute('position', positionAttribute);
|
||||
|
||||
// Create mesh
|
||||
var mesh = new THREE.Mesh(geometry, material);
|
||||
|
||||
// Add mesh to obj
|
||||
self.currentMesh = mesh;
|
||||
self.obj.add(mesh);
|
||||
|
||||
// Ask for next
|
||||
self.socket.emit('next');
|
||||
});
|
||||
|
||||
this.socket.on('ok', function() {
|
||||
console.log('ok');
|
||||
self.socket.emit('next');
|
||||
});
|
||||
|
||||
this.socket.on('elements', function(arr) {
|
||||
|
||||
console.log("Received elements for the " + (++self.counter) + "th time !");
|
||||
|
||||
for (var i = 0; i < arr.length; i++) {
|
||||
|
||||
var elt = _parseList(arr[i]);
|
||||
|
||||
// console.log(elts);
|
||||
if (elt.type === 'vertex') {
|
||||
|
||||
// New vertex arrived
|
||||
self.vertices[elt.index] = [elt.x, elt.y, elt.z];
|
||||
|
||||
} else if (elt.type === 'texCoord') {
|
||||
|
||||
// New texCoord arrived
|
||||
self.texCoords[elt.index] = [elt.x, elt.y, elt.z];
|
||||
|
||||
} else if (elt.type === 'face') {
|
||||
|
||||
// New face arrived : add it into current mesh
|
||||
self.currentMesh.geometry.attributes.position.array[elt.index * 9 ] = self.vertices[elt.a][0];
|
||||
self.currentMesh.geometry.attributes.position.array[elt.index * 9 + 1] = self.vertices[elt.a][1];
|
||||
self.currentMesh.geometry.attributes.position.array[elt.index * 9 + 2] = self.vertices[elt.a][2];
|
||||
|
||||
self.currentMesh.geometry.attributes.position.array[elt.index * 9 + 3] = self.vertices[elt.b][0];
|
||||
self.currentMesh.geometry.attributes.position.array[elt.index * 9 + 4] = self.vertices[elt.b][1];
|
||||
self.currentMesh.geometry.attributes.position.array[elt.index * 9 + 5] = self.vertices[elt.b][2];
|
||||
|
||||
self.currentMesh.geometry.attributes.position.array[elt.index * 9 + 6] = self.vertices[elt.c][0];
|
||||
self.currentMesh.geometry.attributes.position.array[elt.index * 9 + 7] = self.vertices[elt.c][1];
|
||||
self.currentMesh.geometry.attributes.position.array[elt.index * 9 + 8] = self.vertices[elt.c][2];
|
||||
|
||||
self.currentMesh.geometry.attributes.position.needsUpdate = true;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// Ask for next elements
|
||||
self.socket.emit('next');
|
||||
});
|
||||
|
||||
this.socket.on('disconnect', function() {
|
||||
console.log('Finished !');
|
||||
self.finished = true;
|
||||
});
|
||||
}
|
||||
|
||||
ProgressiveLoader.prototype.start = function() {
|
||||
this.socket.emit('request', this.objPath);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
var mesh_number = 25;
|
||||
var renderer, scene, controls, cube, container, plane, mouse= {x:0, y:0}, sphere;
|
||||
var renderer, scene, controls, cube, container, plane, mouse= {x:0, y:0}, sphere, sphereLoader;
|
||||
var bigmesh;
|
||||
var raycaster;
|
||||
var objects = [];
|
||||
@@ -45,7 +45,9 @@ function init() {
|
||||
|
||||
// Load the scene
|
||||
// loader = new THREE.OBJLoader();
|
||||
sphere = ProgressiveLoader('static/data/spheres/' + params.get.res + '.obj', scene);
|
||||
sphereLoader = new ProgressiveLoader('static/data/spheres/' + params.get.res + '.obj', scene);
|
||||
sphereLoader.load();
|
||||
sphere = sphereLoader.obj;
|
||||
|
||||
plane = new Plane(1000,1000);
|
||||
plane.translate(0,0,-100);
|
||||
@@ -54,7 +56,6 @@ function init() {
|
||||
}
|
||||
|
||||
function animate() {
|
||||
// on appelle la fonction animate() récursivement à chaque frame
|
||||
requestAnimationFrame(animate);
|
||||
|
||||
var currentTime = Date.now() - previousTime;
|
||||
|
||||
Reference in New Issue
Block a user