Loader.js 13 KB

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