Loader.js 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373
  1. /**
  2. * @author alteredq / http://alteredqualia.com/
  3. */
  4. THREE.Loader = function ( showStatus ) {
  5. this.showStatus = showStatus;
  6. this.statusDomElement = showStatus ? THREE.Loader.prototype.addStatusElement() : null;
  7. this.onLoadStart = function () {};
  8. this.onLoadProgress = function() {};
  9. this.onLoadComplete = function () {};
  10. };
  11. THREE.Loader.prototype = {
  12. addStatusElement: function () {
  13. var e = document.createElement( "div" );
  14. e.style.position = "absolute";
  15. e.style.right = "0px";
  16. e.style.top = "0px";
  17. e.style.fontSize = "0.8em";
  18. e.style.textAlign = "left";
  19. e.style.background = "rgba(0,0,0,0.25)";
  20. e.style.color = "#fff";
  21. e.style.width = "120px";
  22. e.style.padding = "0.5em 0.5em 0.5em 0.5em";
  23. e.style.zIndex = 1000;
  24. e.innerHTML = "Loading ...";
  25. return e;
  26. },
  27. updateProgress: function ( progress ) {
  28. var message = "Loaded ";
  29. if ( progress.total ) {
  30. message += ( 100 * progress.loaded / progress.total ).toFixed(0) + "%";
  31. } else {
  32. message += ( progress.loaded / 1000 ).toFixed(2) + " KB";
  33. }
  34. this.statusDomElement.innerHTML = message;
  35. },
  36. extractUrlbase: function ( url ) {
  37. var chunks = url.split( "/" );
  38. chunks.pop();
  39. return chunks.length < 1 ? "." : chunks.join( "/" );
  40. },
  41. init_materials: function ( scope, materials, texture_path ) {
  42. scope.materials = [];
  43. for ( var i = 0; i < materials.length; ++ i ) {
  44. scope.materials[ i ] = [ THREE.Loader.prototype.createMaterial( materials[ i ], texture_path ) ];
  45. }
  46. },
  47. hasNormals: function ( scope ) {
  48. var m, i, il = scope.materials.length;
  49. for( i = 0; i < il; i++ ) {
  50. m = scope.materials[ i ][ 0 ];
  51. if ( m instanceof THREE.ShaderMaterial ) return true;
  52. }
  53. return false;
  54. },
  55. createMaterial: function ( m, texture_path ) {
  56. function is_pow2( n ) {
  57. var l = Math.log( n ) / Math.LN2;
  58. return Math.floor( l ) == l;
  59. }
  60. function nearest_pow2( n ) {
  61. var l = Math.log( n ) / Math.LN2;
  62. return Math.pow( 2, Math.round( l ) );
  63. }
  64. function load_image( where, url ) {
  65. var image = new Image();
  66. image.onload = function () {
  67. if ( !is_pow2( this.width ) || !is_pow2( this.height ) ) {
  68. var w = nearest_pow2( this.width ),
  69. h = nearest_pow2( this.height );
  70. where.image.width = w;
  71. where.image.height = h;
  72. where.image.getContext("2d").drawImage( this, 0, 0, w, h );
  73. } else {
  74. where.image = this;
  75. }
  76. where.needsUpdate = true;
  77. };
  78. image.src = url;
  79. }
  80. function create_texture( where, name, sourceFile, repeat, offset, wrap ) {
  81. var texture = document.createElement( 'canvas' );
  82. where[ name ] = new THREE.Texture( texture );
  83. where[ name ].sourceFile = sourceFile;
  84. if( repeat ) {
  85. where[ name ].repeat.set( repeat[ 0 ], repeat[ 1 ] );
  86. if ( repeat[ 0 ] != 1 ) where[ name ].wrapS = THREE.RepeatWrapping;
  87. if ( repeat[ 1 ] != 1 ) where[ name ].wrapT = THREE.RepeatWrapping;
  88. }
  89. if( offset ) {
  90. where[ name ].offset.set( offset[ 0 ], offset[ 1 ] );
  91. }
  92. if( wrap ) {
  93. var wrapMap = {
  94. "repeat" : THREE.RepeatWrapping,
  95. "mirror" : THREE.MirroredRepeatWrapping
  96. }
  97. if ( wrapMap[ wrap[ 0 ] ] !== undefined ) where[ name ].wrapS = wrapMap[ wrap[ 0 ] ];
  98. if ( wrapMap[ wrap[ 1 ] ] !== undefined ) where[ name ].wrapT = wrapMap[ wrap[ 1 ] ];
  99. }
  100. load_image( where[ name ], texture_path + "/" + sourceFile );
  101. }
  102. function rgb2hex( rgb ) {
  103. return ( rgb[ 0 ] * 255 << 16 ) + ( rgb[ 1 ] * 255 << 8 ) + rgb[ 2 ] * 255;
  104. }
  105. var material, mtype, mpars,
  106. color, specular, ambient,
  107. vertexColors;
  108. // defaults
  109. mtype = "MeshLambertMaterial";
  110. // vertexColors
  111. mpars = { color: 0xeeeeee, opacity: 1.0, map: null, lightMap: null, normalMap: null, wireframe: m.wireframe };
  112. // parameters from model file
  113. if ( m.shading ) {
  114. if ( m.shading == "Phong" ) mtype = "MeshPhongMaterial";
  115. else if ( m.shading == "Basic" ) mtype = "MeshBasicMaterial";
  116. }
  117. if ( m.blending ) {
  118. if ( m.blending == "Additive" ) mpars.blending = THREE.AdditiveBlending;
  119. else if ( m.blending == "Subtractive" ) mpars.blending = THREE.SubtractiveBlending;
  120. else if ( m.blending == "Multiply" ) mpars.blending = THREE.MultiplyBlending;
  121. }
  122. if ( m.transparent !== undefined || m.opacity < 1.0 ) {
  123. mpars.transparent = m.transparent;
  124. }
  125. if ( m.depthTest !== undefined ) {
  126. mpars.depthTest = m.depthTest;
  127. }
  128. if ( m.vertexColors !== undefined ) {
  129. if ( m.vertexColors == "face" ) {
  130. mpars.vertexColors = THREE.FaceColors;
  131. } else if ( m.vertexColors ) {
  132. mpars.vertexColors = THREE.VertexColors;
  133. }
  134. }
  135. // colors
  136. if ( m.colorDiffuse ) {
  137. mpars.color = rgb2hex( m.colorDiffuse );
  138. } else if ( m.DbgColor ) {
  139. mpars.color = m.DbgColor;
  140. }
  141. if ( m.colorSpecular ) {
  142. mpars.specular = rgb2hex( m.colorSpecular );
  143. }
  144. if ( m.colorAmbient ) {
  145. mpars.ambient = rgb2hex( m.colorAmbient );
  146. }
  147. // modifiers
  148. if ( m.transparency ) {
  149. mpars.opacity = m.transparency;
  150. }
  151. if ( m.specularCoef ) {
  152. mpars.shininess = m.specularCoef;
  153. }
  154. // textures
  155. if ( m.mapDiffuse && texture_path ) {
  156. create_texture( mpars, "map", m.mapDiffuse, m.mapDiffuseRepeat, m.mapDiffuseOffset, m.mapDiffuseWrap );
  157. }
  158. if ( m.mapLight && texture_path ) {
  159. create_texture( mpars, "lightMap", m.mapLight, m.mapLightRepeat, m.mapLightOffset, m.mapLightWrap );
  160. }
  161. if ( m.mapNormal && texture_path ) {
  162. create_texture( mpars, "normalMap", m.mapNormal, m.mapNormalRepeat, m.mapNormalOffset, m.mapNormalWrap );
  163. }
  164. if ( m.mapSpecular && texture_path ) {
  165. create_texture( mpars, "specularMap", m.mapSpecular, m.mapSpecularRepeat, m.mapSpecularOffset, m.mapSpecularWrap );
  166. }
  167. // special case for normal mapped material
  168. if ( m.mapNormal ) {
  169. var shader = THREE.ShaderUtils.lib[ "normal" ];
  170. var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
  171. var diffuse = mpars.color;
  172. var specular = mpars.specular;
  173. var ambient = mpars.ambient;
  174. var shininess = mpars.shininess;
  175. uniforms[ "tNormal" ].texture = mpars.normalMap;
  176. if ( m.mapNormalFactor ) {
  177. uniforms[ "uNormalScale" ].value = m.mapNormalFactor;
  178. }
  179. if ( mpars.map ) {
  180. uniforms[ "tDiffuse" ].texture = mpars.map;
  181. uniforms[ "enableDiffuse" ].value = true;
  182. }
  183. if ( mpars.specularMap ) {
  184. uniforms[ "tSpecular" ].texture = mpars.specularMap;
  185. uniforms[ "enableSpecular" ].value = true;
  186. }
  187. if ( mpars.lightMap ) {
  188. uniforms[ "tAO" ].texture = mpars.lightMap;
  189. uniforms[ "enableAO" ].value = true;
  190. }
  191. // for the moment don't handle displacement texture
  192. uniforms[ "uDiffuseColor" ].value.setHex( diffuse );
  193. uniforms[ "uSpecularColor" ].value.setHex( specular );
  194. uniforms[ "uAmbientColor" ].value.setHex( ambient );
  195. uniforms[ "uShininess" ].value = shininess;
  196. if ( mpars.opacity ) {
  197. uniforms[ "uOpacity" ].value = mpars.opacity;
  198. }
  199. var parameters = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: uniforms, lights: true, fog: true };
  200. material = new THREE.ShaderMaterial( parameters );
  201. } else {
  202. material = new THREE[ mtype ]( mpars );
  203. }
  204. return material;
  205. },
  206. constructor : THREE.Loader
  207. };