JSONLoader.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543
  1. /**
  2. * @author mrdoob / http://mrdoob.com/
  3. * @author alteredq / http://alteredqualia.com/
  4. */
  5. THREE.JSONLoader = function ( showStatus ) {
  6. THREE.Loader.call( this, showStatus );
  7. this.withCredentials = false;
  8. };
  9. THREE.JSONLoader.prototype = Object.create( THREE.Loader.prototype );
  10. THREE.JSONLoader.prototype.load = function ( url, callback, texturePath ) {
  11. var scope = this;
  12. // todo: unify load API to for easier SceneLoader use
  13. texturePath = texturePath && ( typeof texturePath === "string" ) ? texturePath : this.extractUrlBase( url );
  14. this.onLoadStart();
  15. this.loadAjaxJSON( this, url, callback, texturePath );
  16. };
  17. THREE.JSONLoader.prototype.loadAjaxJSON = function ( context, url, callback, texturePath, callbackProgress ) {
  18. var xhr = new XMLHttpRequest();
  19. var length = 0;
  20. xhr.onreadystatechange = function () {
  21. if ( xhr.readyState === xhr.DONE ) {
  22. if ( xhr.status === 200 || xhr.status === 0 ) {
  23. if ( xhr.responseText ) {
  24. var json = JSON.parse( xhr.responseText );
  25. if ( json.metadata.type === 'scene' ) {
  26. console.error( 'THREE.JSONLoader: "' + url + '" seems to be a Scene. Use THREE.SceneLoader instead.' );
  27. return;
  28. }
  29. var result = context.parse( json, texturePath );
  30. callback( result.geometry, result.materials );
  31. } else {
  32. console.error( 'THREE.JSONLoader: "' + url + '" seems to be unreachable or the file is empty.' );
  33. }
  34. // in context of more complex asset initialization
  35. // do not block on single failed file
  36. // maybe should go even one more level up
  37. context.onLoadComplete();
  38. } else {
  39. console.error( 'THREE.JSONLoader: Couldn\'t load "' + url + '" (' + xhr.status + ')' );
  40. }
  41. } else if ( xhr.readyState === xhr.LOADING ) {
  42. if ( callbackProgress ) {
  43. if ( length === 0 ) {
  44. length = xhr.getResponseHeader( 'Content-Length' );
  45. }
  46. callbackProgress( { total: length, loaded: xhr.responseText.length } );
  47. }
  48. } else if ( xhr.readyState === xhr.HEADERS_RECEIVED ) {
  49. if ( callbackProgress !== undefined ) {
  50. length = xhr.getResponseHeader( "Content-Length" );
  51. }
  52. }
  53. };
  54. xhr.open( "GET", url, true );
  55. xhr.withCredentials = this.withCredentials;
  56. xhr.send( null );
  57. };
  58. THREE.JSONLoader.prototype.parse = function ( json, texturePath ) {
  59. var scope = this,
  60. geometry = new THREE.Geometry(),
  61. scale = ( json.scale !== undefined ) ? 1.0 / json.scale : 1.0;
  62. parseModel( scale );
  63. parseSkin();
  64. parseMorphing( scale );
  65. geometry.computeCentroids();
  66. geometry.computeFaceNormals();
  67. geometry.computeBoundingSphere();
  68. function parseModel( scale ) {
  69. function isBitSet( value, position ) {
  70. return value & ( 1 << position );
  71. }
  72. var i, j, fi,
  73. offset, zLength,
  74. colorIndex, normalIndex, uvIndex, materialIndex,
  75. type,
  76. isQuad,
  77. hasMaterial,
  78. hasFaceVertexUv,
  79. hasFaceNormal, hasFaceVertexNormal,
  80. hasFaceColor, hasFaceVertexColor,
  81. vertex, face, faceA, faceB, color, hex, normal,
  82. uvLayer, uv, u, v,
  83. faces = json.faces,
  84. vertices = json.vertices,
  85. normals = json.normals,
  86. colors = json.colors,
  87. nUvLayers = 0;
  88. if ( json.uvs !== undefined ) {
  89. // disregard empty arrays
  90. for ( i = 0; i < json.uvs.length; i++ ) {
  91. if ( json.uvs[ i ].length ) nUvLayers ++;
  92. }
  93. for ( i = 0; i < nUvLayers; i++ ) {
  94. geometry.faceVertexUvs[ i ] = [];
  95. }
  96. }
  97. offset = 0;
  98. zLength = vertices.length;
  99. while ( offset < zLength ) {
  100. vertex = new THREE.Vector3();
  101. vertex.x = vertices[ offset ++ ] * scale;
  102. vertex.y = vertices[ offset ++ ] * scale;
  103. vertex.z = vertices[ offset ++ ] * scale;
  104. geometry.vertices.push( vertex );
  105. }
  106. offset = 0;
  107. zLength = faces.length;
  108. while ( offset < zLength ) {
  109. type = faces[ offset ++ ];
  110. isQuad = isBitSet( type, 0 );
  111. hasMaterial = isBitSet( type, 1 );
  112. hasFaceVertexUv = isBitSet( type, 3 );
  113. hasFaceNormal = isBitSet( type, 4 );
  114. hasFaceVertexNormal = isBitSet( type, 5 );
  115. hasFaceColor = isBitSet( type, 6 );
  116. hasFaceVertexColor = isBitSet( type, 7 );
  117. // console.log("type", type, "bits", isQuad, hasMaterial, hasFaceVertexUv, hasFaceNormal, hasFaceVertexNormal, hasFaceColor, hasFaceVertexColor);
  118. if ( isQuad ) {
  119. faceA = new THREE.Face3();
  120. faceA.a = faces[ offset ];
  121. faceA.b = faces[ offset + 1 ];
  122. faceA.c = faces[ offset + 3 ];
  123. faceB = new THREE.Face3();
  124. faceB.a = faces[ offset + 1 ];
  125. faceB.b = faces[ offset + 2 ];
  126. faceB.c = faces[ offset + 3 ];
  127. offset += 4;
  128. if ( hasMaterial ) {
  129. materialIndex = faces[ offset ++ ];
  130. faceA.materialIndex = materialIndex;
  131. faceB.materialIndex = materialIndex;
  132. }
  133. // to get face <=> uv index correspondence
  134. fi = geometry.faces.length;
  135. if ( hasFaceVertexUv ) {
  136. for ( i = 0; i < nUvLayers; i++ ) {
  137. uvLayer = json.uvs[ i ];
  138. geometry.faceVertexUvs[ i ][ fi ] = [];
  139. geometry.faceVertexUvs[ i ][ fi + 1 ] = []
  140. for ( j = 0; j < 4; j ++ ) {
  141. uvIndex = faces[ offset ++ ];
  142. u = uvLayer[ uvIndex * 2 ];
  143. v = uvLayer[ uvIndex * 2 + 1 ];
  144. uv = new THREE.Vector2( u, v );
  145. if ( j !== 2 ) geometry.faceVertexUvs[ i ][ fi ].push( uv );
  146. if ( j !== 0 ) geometry.faceVertexUvs[ i ][ fi + 1 ].push( uv );
  147. }
  148. }
  149. }
  150. if ( hasFaceNormal ) {
  151. normalIndex = faces[ offset ++ ] * 3;
  152. faceA.normal.set(
  153. normals[ normalIndex ++ ],
  154. normals[ normalIndex ++ ],
  155. normals[ normalIndex ]
  156. );
  157. faceB.normal.copy( faceA.normal );
  158. }
  159. if ( hasFaceVertexNormal ) {
  160. for ( i = 0; i < 4; i++ ) {
  161. normalIndex = faces[ offset ++ ] * 3;
  162. normal = new THREE.Vector3(
  163. normals[ normalIndex ++ ],
  164. normals[ normalIndex ++ ],
  165. normals[ normalIndex ]
  166. );
  167. if ( i !== 2 ) faceA.vertexNormals.push( normal );
  168. if ( i !== 0 ) faceB.vertexNormals.push( normal );
  169. }
  170. }
  171. if ( hasFaceColor ) {
  172. colorIndex = faces[ offset ++ ];
  173. hex = colors[ colorIndex ];
  174. faceA.color.setHex( hex );
  175. faceB.color.setHex( hex );
  176. }
  177. if ( hasFaceVertexColor ) {
  178. for ( i = 0; i < 4; i++ ) {
  179. colorIndex = faces[ offset ++ ];
  180. hex = colors[ colorIndex ];
  181. if ( i !== 2 ) faceA.vertexColors.push( new THREE.Color( hex ) );
  182. if ( i !== 0 ) faceB.vertexColors.push( new THREE.Color( hex ) );
  183. }
  184. }
  185. geometry.faces.push( faceA );
  186. geometry.faces.push( faceB );
  187. } else {
  188. face = new THREE.Face3();
  189. face.a = faces[ offset ++ ];
  190. face.b = faces[ offset ++ ];
  191. face.c = faces[ offset ++ ];
  192. if ( hasMaterial ) {
  193. materialIndex = faces[ offset ++ ];
  194. face.materialIndex = materialIndex;
  195. }
  196. // to get face <=> uv index correspondence
  197. fi = geometry.faces.length;
  198. if ( hasFaceVertexUv ) {
  199. for ( i = 0; i < nUvLayers; i++ ) {
  200. uvLayer = json.uvs[ i ];
  201. geometry.faceVertexUvs[ i ][ fi ] = [];
  202. for ( j = 0; j < 3; j ++ ) {
  203. uvIndex = faces[ offset ++ ];
  204. u = uvLayer[ uvIndex * 2 ];
  205. v = uvLayer[ uvIndex * 2 + 1 ];
  206. uv = new THREE.Vector2( u, v );
  207. geometry.faceVertexUvs[ i ][ fi ].push( uv );
  208. }
  209. }
  210. }
  211. if ( hasFaceNormal ) {
  212. normalIndex = faces[ offset ++ ] * 3;
  213. face.normal.set(
  214. normals[ normalIndex ++ ],
  215. normals[ normalIndex ++ ],
  216. normals[ normalIndex ]
  217. );
  218. }
  219. if ( hasFaceVertexNormal ) {
  220. for ( i = 0; i < 3; i++ ) {
  221. normalIndex = faces[ offset ++ ] * 3;
  222. normal = new THREE.Vector3(
  223. normals[ normalIndex ++ ],
  224. normals[ normalIndex ++ ],
  225. normals[ normalIndex ]
  226. );
  227. face.vertexNormals.push( normal );
  228. }
  229. }
  230. if ( hasFaceColor ) {
  231. colorIndex = faces[ offset ++ ];
  232. face.color.setHex( colors[ colorIndex ] );
  233. }
  234. if ( hasFaceVertexColor ) {
  235. for ( i = 0; i < 3; i++ ) {
  236. colorIndex = faces[ offset ++ ];
  237. face.vertexColors.push( new THREE.Color( colors[ colorIndex ] ) );
  238. }
  239. }
  240. geometry.faces.push( face );
  241. }
  242. }
  243. };
  244. function parseSkin() {
  245. var i, l, x, y, z, w, a, b, c, d;
  246. if ( json.skinWeights ) {
  247. for ( i = 0, l = json.skinWeights.length; i < l; i += 2 ) {
  248. x = json.skinWeights[ i ];
  249. y = json.skinWeights[ i + 1 ];
  250. z = 0;
  251. w = 0;
  252. geometry.skinWeights.push( new THREE.Vector4( x, y, z, w ) );
  253. }
  254. }
  255. if ( json.skinIndices ) {
  256. for ( i = 0, l = json.skinIndices.length; i < l; i += 2 ) {
  257. a = json.skinIndices[ i ];
  258. b = json.skinIndices[ i + 1 ];
  259. c = 0;
  260. d = 0;
  261. geometry.skinIndices.push( new THREE.Vector4( a, b, c, d ) );
  262. }
  263. }
  264. geometry.bones = json.bones;
  265. if ( (geometry.bones.length > 0) && (
  266. (geometry.skinWeights.length != geometry.skinIndices.length) ||
  267. (geometry.skinWeights.length != geometry.vertices.length) ) ) {
  268. console.warn('When skinning, number of vertices (' + geometry.vertices.length + '), skinIndices (' +
  269. geometry.skinIndices.length + '), and skinWeights (' + geometry.skinWeights.length + ') should match.');
  270. }
  271. // could change this to json.animations[0] or remove completely
  272. geometry.animation = json.animation;
  273. geometry.animations = json.animations;
  274. };
  275. function parseMorphing( scale ) {
  276. if ( json.morphTargets !== undefined ) {
  277. var i, l, v, vl, dstVertices, srcVertices;
  278. for ( i = 0, l = json.morphTargets.length; i < l; i ++ ) {
  279. geometry.morphTargets[ i ] = {};
  280. geometry.morphTargets[ i ].name = json.morphTargets[ i ].name;
  281. geometry.morphTargets[ i ].vertices = [];
  282. dstVertices = geometry.morphTargets[ i ].vertices;
  283. srcVertices = json.morphTargets [ i ].vertices;
  284. for( v = 0, vl = srcVertices.length; v < vl; v += 3 ) {
  285. var vertex = new THREE.Vector3();
  286. vertex.x = srcVertices[ v ] * scale;
  287. vertex.y = srcVertices[ v + 1 ] * scale;
  288. vertex.z = srcVertices[ v + 2 ] * scale;
  289. dstVertices.push( vertex );
  290. }
  291. }
  292. }
  293. if ( json.morphColors !== undefined ) {
  294. var i, l, c, cl, dstColors, srcColors, color;
  295. for ( i = 0, l = json.morphColors.length; i < l; i++ ) {
  296. geometry.morphColors[ i ] = {};
  297. geometry.morphColors[ i ].name = json.morphColors[ i ].name;
  298. geometry.morphColors[ i ].colors = [];
  299. dstColors = geometry.morphColors[ i ].colors;
  300. srcColors = json.morphColors [ i ].colors;
  301. for ( c = 0, cl = srcColors.length; c < cl; c += 3 ) {
  302. color = new THREE.Color( 0xffaa00 );
  303. color.setRGB( srcColors[ c ], srcColors[ c + 1 ], srcColors[ c + 2 ] );
  304. dstColors.push( color );
  305. }
  306. }
  307. }
  308. };
  309. if ( json.materials === undefined ) {
  310. return { geometry: geometry };
  311. } else {
  312. var materials = this.initMaterials( json.materials, texturePath );
  313. if ( this.needsTangents( materials ) ) {
  314. geometry.computeTangents();
  315. }
  316. return { geometry: geometry, materials: materials };
  317. }
  318. };