Loader.js 13 KB

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