From 453d199c279cf855539f71769b15654c56f1ffc2 Mon Sep 17 00:00:00 2001 From: Thomas FORGIONE Date: Fri, 12 Jun 2015 11:07:05 +0200 Subject: [PATCH] ObjLoader should now support textures correctly --- geo/Mesh.js | 19 ++++++++++--------- js/ProgressiveLoader.js | 26 +++++++++++++++++++++++--- js/prototype/Previewer.js | 1 - js/prototype/initScene.js | 23 ++++++++++++++++++++++- js/prototype/main.js | 4 ++-- js/three/MTLLoader.js | 4 +++- socket.js | 2 +- 7 files changed, 61 insertions(+), 18 deletions(-) diff --git a/geo/Mesh.js b/geo/Mesh.js index b6cebe7..4b071f9 100644 --- a/geo/Mesh.js +++ b/geo/Mesh.js @@ -194,6 +194,10 @@ geo.Face = function() { this.a = parseInt(split[1]) - 1; this.b = parseInt(split[2]) - 1; this.c = parseInt(split[3]) - 1; + + if (split.length === 5) + this.d = parseInt(split[4]) - 1; + } else { // There might be textures coords var split = arguments[0].split(' '); @@ -206,20 +210,16 @@ geo.Face = function() { var vIndex = 0; var tIndex = split1.length === 2 ? 1 : 2; - this.a = split1[vIndex] - 1; this.aTexture = split1[tIndex] - 1; - this.b = split2[vIndex] - 1; this.bTexture = split2[tIndex] - 1; - this.c = split3[vIndex] - 1; this.cTexture = split3[tIndex] - 1; + this.a = parseInt(split1[vIndex]) - 1; this.aTexture = parseInt(split1[tIndex]) - 1; + this.b = parseInt(split2[vIndex]) - 1; this.bTexture = parseInt(split2[tIndex]) - 1; + this.c = parseInt(split3[vIndex]) - 1; this.cTexture = parseInt(split3[tIndex]) - 1; if (split.length === 5) { var split4 = split[4].split('/'); - - this.d = split3[vIndex] - 1; this.dTexture = split3[tIndex] - 1; + this.d = parseInt(split4[vIndex]) - 1; this.cTexture = parseInt(split4[tIndex]) - 1; } } - if (split.length === 5) - this.d = parseInt(split[4]) - 1; - } else if (arguments.length === 3) { this.a = arguments[0] - 1; this.b = arguments[1] - 1; @@ -244,7 +244,7 @@ geo.Face.prototype.toList = function() { if (this.d) l.push(this.d); - if (this.aTexture) { + if (this.aTexture !== undefined) { l.push(this.aTexture); l.push(this.bTexture); l.push(this.cTexture); @@ -252,6 +252,7 @@ geo.Face.prototype.toList = function() { if (this.dTexture) l.push(this.aTexture); + return l; } diff --git a/js/ProgressiveLoader.js b/js/ProgressiveLoader.js index 174006d..0d46be0 100644 --- a/js/ProgressiveLoader.js +++ b/js/ProgressiveLoader.js @@ -1,4 +1,8 @@ -var ProgressiveLoader = function(path, scene, materialCreator) { +var ProgressiveLoader = function(path, scene, materialCreator, transparentElements) { + if (transparentElements === undefined) { + transparentElements = []; + } + // Create mesh var obj = new THREE.Object3D(); obj.up = new THREE.Vector3(0,0,1); @@ -105,16 +109,29 @@ var ProgressiveLoader = function(path, scene, materialCreator) { var geo = new THREE.Geometry(); geo.vertices = vertices; geo.faces = faces; + geo.faceVertexUvs = [uvs]; - var material; + + var material, tmp = currentMaterial; if (currentMaterial === undefined || currentMaterial === null) { material = new THREE.MeshLambertMaterial({color: 'red'}); } else { - material = materialCreator.create(currentMaterial); + material = materialCreator.materials[currentMaterial.trim()]; + material.side = THREE.DoubleSide; + material.map.wrapS = material.map.wrapT = THREE.RepeatWrapping; + currentMaterial = null; } currentMesh = new THREE.Mesh(geo, material); + + if (transparentElements.indexOf(tmp.trim()) !== -1) { + THREEx.Transparency.push(currentMesh); + } else { + currentMesh.raycastable = true; + } + } + currentMesh.geometry.computeFaceNormals(); obj.add(currentMesh); } else if (elts[0] === 'u') { @@ -129,6 +146,8 @@ var ProgressiveLoader = function(path, scene, materialCreator) { uvs = []; // currentMesh.geometry.computeFaceNormals(); if (currentMesh) { + currentMesh.geometry.computeFaceNormals(); + currentMesh.geometry.computeBoundingSphere(); currentMesh.geometry.groupsNeedUpdate = true; currentMesh.geometry.elementsNeedUpdate = true; currentMesh.geometry.normalsNeedUpdate = true; @@ -146,6 +165,7 @@ var ProgressiveLoader = function(path, scene, materialCreator) { if (currentMesh) { currentMesh.geometry.computeFaceNormals(); + currentMesh.geometry.computeBoundingSphere(); currentMesh.geometry.groupsNeedUpdate = true; currentMesh.geometry.elementsNeedUpdate = true; currentMesh.geometry.normalsNeedUpdate = true; diff --git a/js/prototype/Previewer.js b/js/prototype/Previewer.js index d66ddda..49363aa 100644 --- a/js/prototype/Previewer.js +++ b/js/prototype/Previewer.js @@ -83,7 +83,6 @@ Previewer.prototype.clear = function() { if (this.clearNeeded) { this.domElement.width = this.domElement.width; this.clearNeeded = false; - console.log("Clear"); } } diff --git a/js/prototype/initScene.js b/js/prototype/initScene.js index a3c7f5d..e825dc3 100644 --- a/js/prototype/initScene.js +++ b/js/prototype/initScene.js @@ -34,6 +34,7 @@ function initPeachCastle(scene, collidableObjects, loader, static_path) { static_path + 'data/castle/princess peaches castle (outside).obj', static_path + 'data/castle/princess peaches castle (outside).mtl', function ( object ) { + glob = object; object.up = new THREE.Vector3(0,0,1); scene.add(object); collidableObjects.push(object); @@ -249,6 +250,27 @@ function createPeachCameras(width, height) { } function initBobombScene(scene, collidableObjects, loader, static_path) { + + // var loader = new THREE.MTLLoader('/static/data/bobomb/'); + // loader.load('/static/data/bobomb/bobomb battlefeild.mtl', function(materialCreator) { + + // materialCreator.preload(); + // var mesh = ProgressiveLoader('static/data/bobomb/bobomb battlefeild.obj', scene, materialCreator, [ + // 'Material.071_574B138E_c.bmp', + // 'Material.070_41A41EE3_c.bmp' + // ]); + + // // object.position.z -= 10.9; + // // object.position.y += 0.555; + // // object.position.x += 3.23; + + // var theta = 0.27; + // mesh.rotation.y = Math.PI - theta; + // mesh.up = new THREE.Vector3(0,0,1); + // collidableObjects.push(mesh); + // }); + + // Create loader if not already done if (loader === undefined) { loader = new THREE.OBJMTLLoader(); @@ -763,7 +785,6 @@ function initSponzaScene(scene, collidableObjects, loader, static_path) { if ( xhr.lengthComputable ) { var percentComplete = xhr.loaded / xhr.total * 100; console.log( Math.round(percentComplete, 2) + '% downloaded' ); - console.log(xhr); } }; diff --git a/js/prototype/main.js b/js/prototype/main.js index 62e68e8..69a24c3 100644 --- a/js/prototype/main.js +++ b/js/prototype/main.js @@ -79,9 +79,9 @@ function init() { // Initialize pointer camera var camera1 = new PointerCamera(50, container_size.width() / container_size.height(), 0.1, 100000, renderer, container); - cameras = initMainScene(camera1, scene, static_path, coins); + // cameras = initMainScene(camera1, scene, static_path, coins); // cameras = initPeach(camera1, scene, static_path, coins); - // cameras = initBobomb(camera1, scene, static_path, coins); + cameras = initBobomb(camera1, scene, static_path, coins); // cameras = initWhomp(camera1, scene, static_path, coins); // cameras = initMountain(camera1, scene, static_path, coins); // cameras = initSponza(camera1, scene, static_path, coins); diff --git a/js/three/MTLLoader.js b/js/three/MTLLoader.js index b846b1b..72e60c5 100644 --- a/js/three/MTLLoader.js +++ b/js/three/MTLLoader.js @@ -133,7 +133,7 @@ THREE.MTLLoader.MaterialCreator.prototype = { setMaterials: function( materialsInfo ) { this.materialsInfo = this.convert( materialsInfo ); - this.materials = {}; + this.materials = {}; this.materialsArray = []; this.nameLookup = {}; @@ -255,6 +255,8 @@ THREE.MTLLoader.MaterialCreator.prototype = { create: function ( materialName ) { + // console.log(materialName.indexOf(' ') === -1); + if ( this.materials[ materialName ] === undefined ) { this.createMaterial_( materialName ); diff --git a/socket.js b/socket.js index e3e1202..aa97d33 100644 --- a/socket.js +++ b/socket.js @@ -48,7 +48,7 @@ module.exports = function(io) { socket.on('next', function() { - var bound = 100; + var bound = 1; var toSend = []; var elt;