Loader.js 15 KB

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