Loader.js 15 KB

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