Loader.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717
  1. /**
  2. * @author mrdoob / http://mrdoob.com/
  3. */
  4. var Loader = function ( editor ) {
  5. var scope = this;
  6. var signals = editor.signals;
  7. this.texturePath = '';
  8. this.loadFile = function ( file ) {
  9. var filename = file.name;
  10. var extension = filename.split( '.' ).pop().toLowerCase();
  11. var reader = new FileReader();
  12. reader.addEventListener( 'progress', function ( event ) {
  13. var size = '(' + Math.floor( event.total / 1000 ).format() + ' KB)';
  14. var progress = Math.floor( ( event.loaded / event.total ) * 100 ) + '%';
  15. console.log( 'Loading', filename, size, progress );
  16. } );
  17. switch ( extension ) {
  18. case '3ds':
  19. reader.addEventListener( 'load', function ( event ) {
  20. var loader = new THREE.TDSLoader();
  21. var object = loader.parse( event.target.result );
  22. editor.execute( new AddObjectCommand( object ) );
  23. }, false );
  24. reader.readAsArrayBuffer( file );
  25. break;
  26. case 'amf':
  27. reader.addEventListener( 'load', function ( event ) {
  28. var loader = new THREE.AMFLoader();
  29. var amfobject = loader.parse( event.target.result );
  30. editor.execute( new AddObjectCommand( amfobject ) );
  31. }, false );
  32. reader.readAsArrayBuffer( file );
  33. break;
  34. case 'awd':
  35. reader.addEventListener( 'load', function ( event ) {
  36. var loader = new THREE.AWDLoader();
  37. var scene = loader.parse( event.target.result );
  38. editor.execute( new SetSceneCommand( scene ) );
  39. }, false );
  40. reader.readAsArrayBuffer( file );
  41. break;
  42. case 'babylon':
  43. reader.addEventListener( 'load', function ( event ) {
  44. var contents = event.target.result;
  45. var json = JSON.parse( contents );
  46. var loader = new THREE.BabylonLoader();
  47. var scene = loader.parse( json );
  48. editor.execute( new SetSceneCommand( scene ) );
  49. }, false );
  50. reader.readAsText( file );
  51. break;
  52. case 'babylonmeshdata':
  53. reader.addEventListener( 'load', function ( event ) {
  54. var contents = event.target.result;
  55. var json = JSON.parse( contents );
  56. var loader = new THREE.BabylonLoader();
  57. var geometry = loader.parseGeometry( json );
  58. var material = new THREE.MeshStandardMaterial();
  59. var mesh = new THREE.Mesh( geometry, material );
  60. mesh.name = filename;
  61. editor.execute( new AddObjectCommand( mesh ) );
  62. }, false );
  63. reader.readAsText( file );
  64. break;
  65. case 'ctm':
  66. reader.addEventListener( 'load', function ( event ) {
  67. var data = new Uint8Array( event.target.result );
  68. var stream = new CTM.Stream( data );
  69. stream.offset = 0;
  70. var loader = new THREE.CTMLoader();
  71. loader.createModel( new CTM.File( stream ), function( geometry ) {
  72. geometry.sourceType = "ctm";
  73. geometry.sourceFile = file.name;
  74. var material = new THREE.MeshStandardMaterial();
  75. var mesh = new THREE.Mesh( geometry, material );
  76. mesh.name = filename;
  77. editor.execute( new AddObjectCommand( mesh ) );
  78. } );
  79. }, false );
  80. reader.readAsArrayBuffer( file );
  81. break;
  82. case 'dae':
  83. reader.addEventListener( 'load', function ( event ) {
  84. var contents = event.target.result;
  85. var loader = new THREE.ColladaLoader();
  86. var collada = loader.parse( contents );
  87. collada.scene.name = filename;
  88. editor.execute( new AddObjectCommand( collada.scene ) );
  89. }, false );
  90. reader.readAsText( file );
  91. break;
  92. case 'fbx':
  93. reader.addEventListener( 'load', function ( event ) {
  94. var contents = event.target.result;
  95. var loader = new THREE.FBXLoader();
  96. var object = loader.parse( contents );
  97. editor.execute( new AddObjectCommand( object ) );
  98. }, false );
  99. reader.readAsArrayBuffer( file );
  100. break;
  101. case 'glb':
  102. case 'gltf':
  103. reader.addEventListener( 'load', function ( event ) {
  104. var contents = event.target.result;
  105. var loader;
  106. if ( isGltf1( contents ) ) {
  107. loader = new THREE.LegacyGLTFLoader();
  108. } else {
  109. loader = new THREE.GLTFLoader();
  110. }
  111. loader.parse( contents, '', function ( result ) {
  112. result.scene.name = filename;
  113. editor.execute( new AddObjectCommand( result.scene ) );
  114. } );
  115. }, false );
  116. reader.readAsArrayBuffer( file );
  117. break;
  118. case 'js':
  119. case 'json':
  120. case '3geo':
  121. case '3mat':
  122. case '3obj':
  123. case '3scn':
  124. reader.addEventListener( 'load', function ( event ) {
  125. var contents = event.target.result;
  126. // 2.0
  127. if ( contents.indexOf( 'postMessage' ) !== - 1 ) {
  128. var blob = new Blob( [ contents ], { type: 'text/javascript' } );
  129. var url = URL.createObjectURL( blob );
  130. var worker = new Worker( url );
  131. worker.onmessage = function ( event ) {
  132. event.data.metadata = { version: 2 };
  133. handleJSON( event.data, file, filename );
  134. };
  135. worker.postMessage( Date.now() );
  136. return;
  137. }
  138. // >= 3.0
  139. var data;
  140. try {
  141. data = JSON.parse( contents );
  142. } catch ( error ) {
  143. alert( error );
  144. return;
  145. }
  146. handleJSON( data, file, filename );
  147. }, false );
  148. reader.readAsText( file );
  149. break;
  150. case 'kmz':
  151. reader.addEventListener( 'load', function ( event ) {
  152. var loader = new THREE.KMZLoader();
  153. var collada = loader.parse( event.target.result );
  154. collada.scene.name = filename;
  155. editor.execute( new AddObjectCommand( collada.scene ) );
  156. }, false );
  157. reader.readAsArrayBuffer( file );
  158. break;
  159. case 'md2':
  160. reader.addEventListener( 'load', function ( event ) {
  161. var contents = event.target.result;
  162. var geometry = new THREE.MD2Loader().parse( contents );
  163. var material = new THREE.MeshStandardMaterial( {
  164. morphTargets: true,
  165. morphNormals: true
  166. } );
  167. var mesh = new THREE.Mesh( geometry, material );
  168. mesh.mixer = new THREE.AnimationMixer( mesh );
  169. mesh.name = filename;
  170. editor.execute( new AddObjectCommand( mesh ) );
  171. }, false );
  172. reader.readAsArrayBuffer( file );
  173. break;
  174. case 'obj':
  175. reader.addEventListener( 'load', function ( event ) {
  176. var contents = event.target.result;
  177. var object = new THREE.OBJLoader().parse( contents );
  178. object.name = filename;
  179. editor.execute( new AddObjectCommand( object ) );
  180. }, false );
  181. reader.readAsText( file );
  182. break;
  183. case 'playcanvas':
  184. reader.addEventListener( 'load', function ( event ) {
  185. var contents = event.target.result;
  186. var json = JSON.parse( contents );
  187. var loader = new THREE.PlayCanvasLoader();
  188. var object = loader.parse( json );
  189. editor.execute( new AddObjectCommand( object ) );
  190. }, false );
  191. reader.readAsText( file );
  192. break;
  193. case 'ply':
  194. reader.addEventListener( 'load', function ( event ) {
  195. var contents = event.target.result;
  196. var geometry = new THREE.PLYLoader().parse( contents );
  197. geometry.sourceType = "ply";
  198. geometry.sourceFile = file.name;
  199. var material = new THREE.MeshStandardMaterial();
  200. var mesh = new THREE.Mesh( geometry, material );
  201. mesh.name = filename;
  202. editor.execute( new AddObjectCommand( mesh ) );
  203. }, false );
  204. reader.readAsArrayBuffer( file );
  205. break;
  206. case 'stl':
  207. reader.addEventListener( 'load', function ( event ) {
  208. var contents = event.target.result;
  209. var geometry = new THREE.STLLoader().parse( contents );
  210. geometry.sourceType = "stl";
  211. geometry.sourceFile = file.name;
  212. var material = new THREE.MeshStandardMaterial();
  213. var mesh = new THREE.Mesh( geometry, material );
  214. mesh.name = filename;
  215. editor.execute( new AddObjectCommand( mesh ) );
  216. }, false );
  217. if ( reader.readAsBinaryString !== undefined ) {
  218. reader.readAsBinaryString( file );
  219. } else {
  220. reader.readAsArrayBuffer( file );
  221. }
  222. break;
  223. case 'svg':
  224. reader.addEventListener( 'load', function ( event ) {
  225. var contents = event.target.result;
  226. var loader = new THREE.SVGLoader();
  227. var paths = loader.parse( contents );
  228. //
  229. var group = new THREE.Group();
  230. group.scale.multiplyScalar( 0.1 );
  231. group.scale.y *= -1;
  232. for ( var i = 0; i < paths.length; i ++ ) {
  233. var path = paths[ i ];
  234. var material = new THREE.MeshBasicMaterial( {
  235. color: path.color,
  236. depthWrite: false
  237. } );
  238. var shapes = path.toShapes( true );
  239. for ( var j = 0; j < shapes.length; j ++ ) {
  240. var shape = shapes[ j ];
  241. var geometry = new THREE.ShapeBufferGeometry( shape );
  242. var mesh = new THREE.Mesh( geometry, material );
  243. group.add( mesh );
  244. }
  245. }
  246. editor.execute( new AddObjectCommand( group ) );
  247. }, false );
  248. reader.readAsText( file );
  249. break;
  250. case 'vtk':
  251. reader.addEventListener( 'load', function ( event ) {
  252. var contents = event.target.result;
  253. var geometry = new THREE.VTKLoader().parse( contents );
  254. geometry.sourceType = "vtk";
  255. geometry.sourceFile = file.name;
  256. var material = new THREE.MeshStandardMaterial();
  257. var mesh = new THREE.Mesh( geometry, material );
  258. mesh.name = filename;
  259. editor.execute( new AddObjectCommand( mesh ) );
  260. }, false );
  261. reader.readAsText( file );
  262. break;
  263. case 'wrl':
  264. reader.addEventListener( 'load', function ( event ) {
  265. var contents = event.target.result;
  266. var result = new THREE.VRMLLoader().parse( contents );
  267. editor.execute( new SetSceneCommand( result ) );
  268. }, false );
  269. reader.readAsText( file );
  270. break;
  271. case 'zip':
  272. reader.addEventListener( 'load', function ( event ) {
  273. var contents = event.target.result;
  274. var zip = new JSZip( contents );
  275. // Poly
  276. if ( zip.files[ 'model.obj' ] && zip.files[ 'materials.mtl' ] ) {
  277. var materials = new THREE.MTLLoader().parse( zip.file( 'materials.mtl' ).asText() );
  278. var object = new THREE.OBJLoader().setMaterials( materials ).parse( zip.file( 'model.obj' ).asText() );
  279. editor.execute( new AddObjectCommand( object ) );
  280. }
  281. //
  282. zip.filter( function ( path, file ) {
  283. // FBX
  284. if ( file.name.search( /\.fbx$/i ) > - 1 ) {
  285. var manager = new THREE.LoadingManager();
  286. manager.setURLModifier( function ( url ) {
  287. var file = zip.files[ url ];
  288. if ( file ) {
  289. var blob = new Blob( [ file.asArrayBuffer() ], { type: 'application/octet-stream' } );
  290. return URL.createObjectURL( blob );
  291. }
  292. } );
  293. var loader = new THREE.FBXLoader( manager );
  294. var object = loader.parse( file.asArrayBuffer() );
  295. editor.execute( new AddObjectCommand( object ) );
  296. }
  297. // GLB
  298. if ( file.name.search( /\.glb$/i ) > - 1 ) {
  299. var loader = new THREE.GLTFLoader();
  300. loader.parse( file.asArrayBuffer(), '', function ( result ) {
  301. editor.execute( new AddObjectCommand( result.scene ) );
  302. } );
  303. }
  304. // GLTF
  305. if ( file.name.search( /\.gltf$/i ) > - 1 ) {
  306. var manager = new THREE.LoadingManager();
  307. manager.setURLModifier( function ( url ) {
  308. var file = zip.files[ url ];
  309. if ( file ) {
  310. var blob = new Blob( [ file.asArrayBuffer() ], { type: 'application/octet-stream' } );
  311. return URL.createObjectURL( blob );
  312. }
  313. } );
  314. var loader = new THREE.GLTFLoader( manager );
  315. loader.parse( file.asText(), '', function ( result ) {
  316. editor.execute( new AddObjectCommand( result.scene ) );
  317. } );
  318. }
  319. } );
  320. }, false );
  321. reader.readAsBinaryString( file );
  322. break;
  323. default:
  324. alert( 'Unsupported file format (' + extension + ').' );
  325. break;
  326. }
  327. };
  328. function handleJSON( data, file, filename ) {
  329. if ( data.metadata === undefined ) { // 2.0
  330. data.metadata = { type: 'Geometry' };
  331. }
  332. if ( data.metadata.type === undefined ) { // 3.0
  333. data.metadata.type = 'Geometry';
  334. }
  335. if ( data.metadata.formatVersion !== undefined ) {
  336. data.metadata.version = data.metadata.formatVersion;
  337. }
  338. switch ( data.metadata.type.toLowerCase() ) {
  339. case 'buffergeometry':
  340. var loader = new THREE.BufferGeometryLoader();
  341. var result = loader.parse( data );
  342. var mesh = new THREE.Mesh( result );
  343. editor.execute( new AddObjectCommand( mesh ) );
  344. break;
  345. case 'geometry':
  346. var loader = new THREE.JSONLoader();
  347. loader.setTexturePath( scope.texturePath );
  348. var result = loader.parse( data );
  349. var geometry = result.geometry;
  350. var material;
  351. if ( result.materials !== undefined ) {
  352. if ( result.materials.length > 1 ) {
  353. material = new THREE.MultiMaterial( result.materials );
  354. } else {
  355. material = result.materials[ 0 ];
  356. }
  357. } else {
  358. material = new THREE.MeshStandardMaterial();
  359. }
  360. geometry.sourceType = "ascii";
  361. geometry.sourceFile = file.name;
  362. var mesh;
  363. if ( geometry.animation && geometry.animation.hierarchy ) {
  364. mesh = new THREE.SkinnedMesh( geometry, material );
  365. } else {
  366. mesh = new THREE.Mesh( geometry, material );
  367. }
  368. mesh.name = filename;
  369. editor.execute( new AddObjectCommand( mesh ) );
  370. break;
  371. case 'object':
  372. var loader = new THREE.ObjectLoader();
  373. loader.setTexturePath( scope.texturePath );
  374. var result = loader.parse( data );
  375. if ( result instanceof THREE.Scene ) {
  376. editor.execute( new SetSceneCommand( result ) );
  377. } else {
  378. editor.execute( new AddObjectCommand( result ) );
  379. }
  380. break;
  381. case 'app':
  382. editor.fromJSON( data );
  383. break;
  384. }
  385. }
  386. function isGltf1( contents ) {
  387. var resultContent;
  388. if ( typeof contents === 'string' ) {
  389. // contents is a JSON string
  390. resultContent = contents;
  391. } else {
  392. var magic = THREE.LoaderUtils.decodeText( new Uint8Array( contents, 0, 4 ) );
  393. if ( magic === 'glTF' ) {
  394. // contents is a .glb file; extract the version
  395. var version = new DataView( contents ).getUint32( 4, true );
  396. return version < 2;
  397. } else {
  398. // contents is a .gltf file
  399. resultContent = THREE.LoaderUtils.decodeText( new Uint8Array( contents ) );
  400. }
  401. }
  402. var json = JSON.parse( resultContent );
  403. return ( json.asset != undefined && json.asset.version[ 0 ] < 2 );
  404. }
  405. };