JSONLoader.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544
  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 !== undefined && 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.computeFaceNormals();
  66. geometry.computeBoundingSphere();
  67. function parseModel( scale ) {
  68. function isBitSet( value, position ) {
  69. return value & ( 1 << position );
  70. }
  71. var i, j, fi,
  72. offset, zLength,
  73. colorIndex, normalIndex, uvIndex, materialIndex,
  74. type,
  75. isQuad,
  76. hasMaterial,
  77. hasFaceVertexUv,
  78. hasFaceNormal, hasFaceVertexNormal,
  79. hasFaceColor, hasFaceVertexColor,
  80. vertex, face, faceA, faceB, color, hex, normal,
  81. uvLayer, uv, u, v,
  82. faces = json.faces,
  83. vertices = json.vertices,
  84. normals = json.normals,
  85. colors = json.colors,
  86. nUvLayers = 0;
  87. if ( json.uvs !== undefined ) {
  88. // disregard empty arrays
  89. for ( i = 0; i < json.uvs.length; i++ ) {
  90. if ( json.uvs[ i ].length ) nUvLayers ++;
  91. }
  92. for ( i = 0; i < nUvLayers; i++ ) {
  93. geometry.faceVertexUvs[ i ] = [];
  94. }
  95. }
  96. offset = 0;
  97. zLength = vertices.length;
  98. while ( offset < zLength ) {
  99. vertex = new THREE.Vector3();
  100. vertex.x = vertices[ offset ++ ] * scale;
  101. vertex.y = vertices[ offset ++ ] * scale;
  102. vertex.z = vertices[ offset ++ ] * scale;
  103. geometry.vertices.push( vertex );
  104. }
  105. offset = 0;
  106. zLength = faces.length;
  107. while ( offset < zLength ) {
  108. type = faces[ offset ++ ];
  109. isQuad = isBitSet( type, 0 );
  110. hasMaterial = isBitSet( type, 1 );
  111. hasFaceVertexUv = isBitSet( type, 3 );
  112. hasFaceNormal = isBitSet( type, 4 );
  113. hasFaceVertexNormal = isBitSet( type, 5 );
  114. hasFaceColor = isBitSet( type, 6 );
  115. hasFaceVertexColor = isBitSet( type, 7 );
  116. // console.log("type", type, "bits", isQuad, hasMaterial, hasFaceVertexUv, hasFaceNormal, hasFaceVertexNormal, hasFaceColor, hasFaceVertexColor);
  117. if ( isQuad ) {
  118. faceA = new THREE.Face3();
  119. faceA.a = faces[ offset ];
  120. faceA.b = faces[ offset + 1 ];
  121. faceA.c = faces[ offset + 3 ];
  122. faceB = new THREE.Face3();
  123. faceB.a = faces[ offset + 1 ];
  124. faceB.b = faces[ offset + 2 ];
  125. faceB.c = faces[ offset + 3 ];
  126. offset += 4;
  127. if ( hasMaterial ) {
  128. materialIndex = faces[ offset ++ ];
  129. faceA.materialIndex = materialIndex;
  130. faceB.materialIndex = materialIndex;
  131. }
  132. // to get face <=> uv index correspondence
  133. fi = geometry.faces.length;
  134. if ( hasFaceVertexUv ) {
  135. for ( i = 0; i < nUvLayers; i++ ) {
  136. uvLayer = json.uvs[ i ];
  137. geometry.faceVertexUvs[ i ][ fi ] = [];
  138. geometry.faceVertexUvs[ i ][ fi + 1 ] = []
  139. for ( j = 0; j < 4; j ++ ) {
  140. uvIndex = faces[ offset ++ ];
  141. u = uvLayer[ uvIndex * 2 ];
  142. v = uvLayer[ uvIndex * 2 + 1 ];
  143. uv = new THREE.Vector2( u, v );
  144. if ( j !== 2 ) geometry.faceVertexUvs[ i ][ fi ].push( uv );
  145. if ( j !== 0 ) geometry.faceVertexUvs[ i ][ fi + 1 ].push( uv );
  146. }
  147. }
  148. }
  149. if ( hasFaceNormal ) {
  150. normalIndex = faces[ offset ++ ] * 3;
  151. faceA.normal.set(
  152. normals[ normalIndex ++ ],
  153. normals[ normalIndex ++ ],
  154. normals[ normalIndex ]
  155. );
  156. faceB.normal.copy( faceA.normal );
  157. }
  158. if ( hasFaceVertexNormal ) {
  159. for ( i = 0; i < 4; i++ ) {
  160. normalIndex = faces[ offset ++ ] * 3;
  161. normal = new THREE.Vector3(
  162. normals[ normalIndex ++ ],
  163. normals[ normalIndex ++ ],
  164. normals[ normalIndex ]
  165. );
  166. if ( i !== 2 ) faceA.vertexNormals.push( normal );
  167. if ( i !== 0 ) faceB.vertexNormals.push( normal );
  168. }
  169. }
  170. if ( hasFaceColor ) {
  171. colorIndex = faces[ offset ++ ];
  172. hex = colors[ colorIndex ];
  173. faceA.color.setHex( hex );
  174. faceB.color.setHex( hex );
  175. }
  176. if ( hasFaceVertexColor ) {
  177. for ( i = 0; i < 4; i++ ) {
  178. colorIndex = faces[ offset ++ ];
  179. hex = colors[ colorIndex ];
  180. if ( i !== 2 ) faceA.vertexColors.push( new THREE.Color( hex ) );
  181. if ( i !== 0 ) faceB.vertexColors.push( new THREE.Color( hex ) );
  182. }
  183. }
  184. geometry.faces.push( faceA );
  185. geometry.faces.push( faceB );
  186. } else {
  187. face = new THREE.Face3();
  188. face.a = faces[ offset ++ ];
  189. face.b = faces[ offset ++ ];
  190. face.c = faces[ offset ++ ];
  191. if ( hasMaterial ) {
  192. materialIndex = faces[ offset ++ ];
  193. face.materialIndex = materialIndex;
  194. }
  195. // to get face <=> uv index correspondence
  196. fi = geometry.faces.length;
  197. if ( hasFaceVertexUv ) {
  198. for ( i = 0; i < nUvLayers; i++ ) {
  199. uvLayer = json.uvs[ i ];
  200. geometry.faceVertexUvs[ i ][ fi ] = [];
  201. for ( j = 0; j < 3; j ++ ) {
  202. uvIndex = faces[ offset ++ ];
  203. u = uvLayer[ uvIndex * 2 ];
  204. v = uvLayer[ uvIndex * 2 + 1 ];
  205. uv = new THREE.Vector2( u, v );
  206. geometry.faceVertexUvs[ i ][ fi ].push( uv );
  207. }
  208. }
  209. }
  210. if ( hasFaceNormal ) {
  211. normalIndex = faces[ offset ++ ] * 3;
  212. face.normal.set(
  213. normals[ normalIndex ++ ],
  214. normals[ normalIndex ++ ],
  215. normals[ normalIndex ]
  216. );
  217. }
  218. if ( hasFaceVertexNormal ) {
  219. for ( i = 0; i < 3; i++ ) {
  220. normalIndex = faces[ offset ++ ] * 3;
  221. normal = new THREE.Vector3(
  222. normals[ normalIndex ++ ],
  223. normals[ normalIndex ++ ],
  224. normals[ normalIndex ]
  225. );
  226. face.vertexNormals.push( normal );
  227. }
  228. }
  229. if ( hasFaceColor ) {
  230. colorIndex = faces[ offset ++ ];
  231. face.color.setHex( colors[ colorIndex ] );
  232. }
  233. if ( hasFaceVertexColor ) {
  234. for ( i = 0; i < 3; i++ ) {
  235. colorIndex = faces[ offset ++ ];
  236. face.vertexColors.push( new THREE.Color( colors[ colorIndex ] ) );
  237. }
  238. }
  239. geometry.faces.push( face );
  240. }
  241. }
  242. };
  243. function parseSkin() {
  244. var influencesPerVertex = ( json.influencesPerVertex !== undefined ) ? json.influencesPerVertex : 2;
  245. if ( json.skinWeights ) {
  246. for ( var i = 0, l = json.skinWeights.length; i < l; i += influencesPerVertex ) {
  247. var x = json.skinWeights[ i ];
  248. var y = ( influencesPerVertex > 1 ) ? json.skinWeights[ i + 1 ] : 0;
  249. var z = ( influencesPerVertex > 2 ) ? json.skinWeights[ i + 2 ] : 0;
  250. var w = ( influencesPerVertex > 3 ) ? json.skinWeights[ i + 3 ] : 0;
  251. geometry.skinWeights.push( new THREE.Vector4( x, y, z, w ) );
  252. }
  253. }
  254. if ( json.skinIndices ) {
  255. for ( var i = 0, l = json.skinIndices.length; i < l; i += influencesPerVertex ) {
  256. var a = json.skinIndices[ i ];
  257. var b = ( influencesPerVertex > 1 ) ? json.skinIndices[ i + 1 ] : 0;
  258. var c = ( influencesPerVertex > 2 ) ? json.skinIndices[ i + 2 ] : 0;
  259. var d = ( influencesPerVertex > 3 ) ? json.skinIndices[ i + 3 ] : 0;
  260. geometry.skinIndices.push( new THREE.Vector4( a, b, c, d ) );
  261. }
  262. }
  263. geometry.bones = json.bones;
  264. if ( geometry.bones && geometry.bones.length > 0 && ( geometry.skinWeights.length !== geometry.skinIndices.length || geometry.skinIndices.length !== geometry.vertices.length ) ) {
  265. console.warn( 'When skinning, number of vertices (' + geometry.vertices.length + '), skinIndices (' +
  266. geometry.skinIndices.length + '), and skinWeights (' + geometry.skinWeights.length + ') should match.' );
  267. }
  268. // could change this to json.animations[0] or remove completely
  269. geometry.animation = json.animation;
  270. geometry.animations = json.animations;
  271. };
  272. function parseMorphing( scale ) {
  273. if ( json.morphTargets !== undefined ) {
  274. var i, l, v, vl, dstVertices, srcVertices;
  275. for ( i = 0, l = json.morphTargets.length; i < l; i ++ ) {
  276. geometry.morphTargets[ i ] = {};
  277. geometry.morphTargets[ i ].name = json.morphTargets[ i ].name;
  278. geometry.morphTargets[ i ].vertices = [];
  279. dstVertices = geometry.morphTargets[ i ].vertices;
  280. srcVertices = json.morphTargets [ i ].vertices;
  281. for( v = 0, vl = srcVertices.length; v < vl; v += 3 ) {
  282. var vertex = new THREE.Vector3();
  283. vertex.x = srcVertices[ v ] * scale;
  284. vertex.y = srcVertices[ v + 1 ] * scale;
  285. vertex.z = srcVertices[ v + 2 ] * scale;
  286. dstVertices.push( vertex );
  287. }
  288. }
  289. }
  290. if ( json.morphColors !== undefined ) {
  291. var i, l, c, cl, dstColors, srcColors, color;
  292. for ( i = 0, l = json.morphColors.length; i < l; i++ ) {
  293. geometry.morphColors[ i ] = {};
  294. geometry.morphColors[ i ].name = json.morphColors[ i ].name;
  295. geometry.morphColors[ i ].colors = [];
  296. dstColors = geometry.morphColors[ i ].colors;
  297. srcColors = json.morphColors [ i ].colors;
  298. for ( c = 0, cl = srcColors.length; c < cl; c += 3 ) {
  299. color = new THREE.Color( 0xffaa00 );
  300. color.setRGB( srcColors[ c ], srcColors[ c + 1 ], srcColors[ c + 2 ] );
  301. dstColors.push( color );
  302. }
  303. }
  304. }
  305. };
  306. if ( json.materials === undefined || json.materials.length === 0 ) {
  307. return { geometry: geometry };
  308. } else {
  309. var materials = this.initMaterials( json.materials, texturePath );
  310. if ( this.needsTangents( materials ) ) {
  311. geometry.computeTangents();
  312. }
  313. return { geometry: geometry, materials: materials };
  314. }
  315. };