Loader.js 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441
  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. constructor: THREE.Loader,
  13. crossOrigin: 'anonymous',
  14. addStatusElement: function () {
  15. var e = document.createElement( "div" );
  16. e.style.position = "absolute";
  17. e.style.right = "0px";
  18. e.style.top = "0px";
  19. e.style.fontSize = "0.8em";
  20. e.style.textAlign = "left";
  21. e.style.background = "rgba(0,0,0,0.25)";
  22. e.style.color = "#fff";
  23. e.style.width = "120px";
  24. e.style.padding = "0.5em 0.5em 0.5em 0.5em";
  25. e.style.zIndex = 1000;
  26. e.innerHTML = "Loading ...";
  27. return e;
  28. },
  29. updateProgress: function ( progress ) {
  30. var message = "Loaded ";
  31. if ( progress.total ) {
  32. message += ( 100 * progress.loaded / progress.total ).toFixed(0) + "%";
  33. } else {
  34. message += ( progress.loaded / 1000 ).toFixed(2) + " KB";
  35. }
  36. this.statusDomElement.innerHTML = message;
  37. },
  38. extractUrlBase: function ( url ) {
  39. var parts = url.split( '/' );
  40. parts.pop();
  41. return ( parts.length < 1 ? '.' : parts.join( '/' ) ) + '/';
  42. },
  43. initMaterials: function ( materials, texturePath ) {
  44. var array = [];
  45. for ( var i = 0; i < materials.length; ++ i ) {
  46. array[ i ] = THREE.Loader.prototype.createMaterial( materials[ i ], texturePath );
  47. }
  48. return array;
  49. },
  50. needsTangents: function ( materials ) {
  51. for( var i = 0, il = materials.length; i < il; i ++ ) {
  52. var m = materials[ i ];
  53. if ( m instanceof THREE.ShaderMaterial ) return true;
  54. }
  55. return false;
  56. },
  57. createMaterial: function ( m, texturePath ) {
  58. var _this = this;
  59. function is_pow2( n ) {
  60. var l = Math.log( n ) / Math.LN2;
  61. return Math.floor( l ) == l;
  62. }
  63. function nearest_pow2( n ) {
  64. var l = Math.log( n ) / Math.LN2;
  65. return Math.pow( 2, Math.round( l ) );
  66. }
  67. function load_image( where, url ) {
  68. var image = new Image();
  69. image.onload = function () {
  70. if ( !is_pow2( this.width ) || !is_pow2( this.height ) ) {
  71. var width = nearest_pow2( this.width );
  72. var height = nearest_pow2( this.height );
  73. where.image.width = width;
  74. where.image.height = height;
  75. where.image.getContext( '2d' ).drawImage( this, 0, 0, width, height );
  76. } else {
  77. where.image = this;
  78. }
  79. where.needsUpdate = true;
  80. };
  81. image.crossOrigin = _this.crossOrigin;
  82. image.src = url;
  83. }
  84. function create_texture( where, name, sourceFile, repeat, offset, wrap, anisotropy ) {
  85. var isCompressed = /\.dds$/i.test( sourceFile );
  86. var fullPath = texturePath + "/" + sourceFile;
  87. if ( isCompressed ) {
  88. var texture = THREE.ImageUtils.loadCompressedTexture( fullPath );
  89. where[ name ] = texture;
  90. } else {
  91. var texture = document.createElement( 'canvas' );
  92. where[ name ] = new THREE.Texture( texture );
  93. }
  94. where[ name ].sourceFile = sourceFile;
  95. if( repeat ) {
  96. where[ name ].repeat.set( repeat[ 0 ], repeat[ 1 ] );
  97. if ( repeat[ 0 ] !== 1 ) where[ name ].wrapS = THREE.RepeatWrapping;
  98. if ( repeat[ 1 ] !== 1 ) where[ name ].wrapT = THREE.RepeatWrapping;
  99. }
  100. if ( offset ) {
  101. where[ name ].offset.set( offset[ 0 ], offset[ 1 ] );
  102. }
  103. if ( wrap ) {
  104. var wrapMap = {
  105. "repeat": THREE.RepeatWrapping,
  106. "mirror": THREE.MirroredRepeatWrapping
  107. }
  108. if ( wrapMap[ wrap[ 0 ] ] !== undefined ) where[ name ].wrapS = wrapMap[ wrap[ 0 ] ];
  109. if ( wrapMap[ wrap[ 1 ] ] !== undefined ) where[ name ].wrapT = wrapMap[ wrap[ 1 ] ];
  110. }
  111. if ( anisotropy ) {
  112. where[ name ].anisotropy = anisotropy;
  113. }
  114. if ( ! isCompressed ) {
  115. load_image( where[ name ], fullPath );
  116. }
  117. }
  118. function rgb2hex( rgb ) {
  119. return ( rgb[ 0 ] * 255 << 16 ) + ( rgb[ 1 ] * 255 << 8 ) + rgb[ 2 ] * 255;
  120. }
  121. // defaults
  122. var mtype = "MeshLambertMaterial";
  123. var mpars = { color: 0xeeeeee, opacity: 1.0, map: null, lightMap: null, normalMap: null, bumpMap: null, wireframe: false };
  124. // parameters from model file
  125. if ( m.shading ) {
  126. var shading = m.shading.toLowerCase();
  127. if ( shading === "phong" ) mtype = "MeshPhongMaterial";
  128. else if ( shading === "basic" ) mtype = "MeshBasicMaterial";
  129. }
  130. if ( m.blending !== undefined && THREE[ m.blending ] !== undefined ) {
  131. mpars.blending = THREE[ m.blending ];
  132. }
  133. if ( m.transparent !== undefined || m.opacity < 1.0 ) {
  134. mpars.transparent = m.transparent;
  135. }
  136. if ( m.depthTest !== undefined ) {
  137. mpars.depthTest = m.depthTest;
  138. }
  139. if ( m.depthWrite !== undefined ) {
  140. mpars.depthWrite = m.depthWrite;
  141. }
  142. if ( m.visible !== undefined ) {
  143. mpars.visible = m.visible;
  144. }
  145. if ( m.flipSided !== undefined ) {
  146. mpars.side = THREE.BackSide;
  147. }
  148. if ( m.doubleSided !== undefined ) {
  149. mpars.side = THREE.DoubleSide;
  150. }
  151. if ( m.wireframe !== undefined ) {
  152. mpars.wireframe = m.wireframe;
  153. }
  154. if ( m.vertexColors !== undefined ) {
  155. if ( m.vertexColors === "face" ) {
  156. mpars.vertexColors = THREE.FaceColors;
  157. } else if ( m.vertexColors ) {
  158. mpars.vertexColors = THREE.VertexColors;
  159. }
  160. }
  161. // colors
  162. if ( m.colorDiffuse ) {
  163. mpars.color = rgb2hex( m.colorDiffuse );
  164. } else if ( m.DbgColor ) {
  165. mpars.color = m.DbgColor;
  166. }
  167. if ( m.colorSpecular ) {
  168. mpars.specular = rgb2hex( m.colorSpecular );
  169. }
  170. if ( m.colorAmbient ) {
  171. mpars.ambient = rgb2hex( m.colorAmbient );
  172. }
  173. // modifiers
  174. if ( m.transparency ) {
  175. mpars.opacity = m.transparency;
  176. }
  177. if ( m.specularCoef ) {
  178. mpars.shininess = m.specularCoef;
  179. }
  180. // textures
  181. if ( m.mapDiffuse && texturePath ) {
  182. create_texture( mpars, "map", m.mapDiffuse, m.mapDiffuseRepeat, m.mapDiffuseOffset, m.mapDiffuseWrap, m.mapDiffuseAnisotropy );
  183. }
  184. if ( m.mapLight && texturePath ) {
  185. create_texture( mpars, "lightMap", m.mapLight, m.mapLightRepeat, m.mapLightOffset, m.mapLightWrap, m.mapLightAnisotropy );
  186. }
  187. if ( m.mapBump && texturePath ) {
  188. create_texture( mpars, "bumpMap", m.mapBump, m.mapBumpRepeat, m.mapBumpOffset, m.mapBumpWrap, m.mapBumpAnisotropy );
  189. }
  190. if ( m.mapNormal && texturePath ) {
  191. create_texture( mpars, "normalMap", m.mapNormal, m.mapNormalRepeat, m.mapNormalOffset, m.mapNormalWrap, m.mapNormalAnisotropy );
  192. }
  193. if ( m.mapSpecular && texturePath ) {
  194. create_texture( mpars, "specularMap", m.mapSpecular, m.mapSpecularRepeat, m.mapSpecularOffset, m.mapSpecularWrap, m.mapSpecularAnisotropy );
  195. }
  196. //
  197. if ( m.mapBumpScale ) {
  198. mpars.bumpScale = m.mapBumpScale;
  199. }
  200. // special case for normal mapped material
  201. if ( m.mapNormal ) {
  202. var shader = THREE.ShaderLib[ "normalmap" ];
  203. var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
  204. uniforms[ "tNormal" ].value = mpars.normalMap;
  205. if ( m.mapNormalFactor ) {
  206. uniforms[ "uNormalScale" ].value.set( m.mapNormalFactor, m.mapNormalFactor );
  207. }
  208. if ( mpars.map ) {
  209. uniforms[ "tDiffuse" ].value = mpars.map;
  210. uniforms[ "enableDiffuse" ].value = true;
  211. }
  212. if ( mpars.specularMap ) {
  213. uniforms[ "tSpecular" ].value = mpars.specularMap;
  214. uniforms[ "enableSpecular" ].value = true;
  215. }
  216. if ( mpars.lightMap ) {
  217. uniforms[ "tAO" ].value = mpars.lightMap;
  218. uniforms[ "enableAO" ].value = true;
  219. }
  220. // for the moment don't handle displacement texture
  221. uniforms[ "uDiffuseColor" ].value.setHex( mpars.color );
  222. uniforms[ "uSpecularColor" ].value.setHex( mpars.specular );
  223. uniforms[ "uAmbientColor" ].value.setHex( mpars.ambient );
  224. uniforms[ "uShininess" ].value = mpars.shininess;
  225. if ( mpars.opacity !== undefined ) {
  226. uniforms[ "uOpacity" ].value = mpars.opacity;
  227. }
  228. var parameters = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: uniforms, lights: true, fog: true };
  229. var material = new THREE.ShaderMaterial( parameters );
  230. if ( mpars.transparent ) {
  231. material.transparent = true;
  232. }
  233. } else {
  234. var material = new THREE[ mtype ]( mpars );
  235. }
  236. if ( m.DbgName !== undefined ) material.name = m.DbgName;
  237. return material;
  238. }
  239. };