Loader.js 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401
  1. var Loader = function ( editor ) {
  2. var scope = this;
  3. var signals = editor.signals;
  4. document.addEventListener( 'dragover', function ( event ) {
  5. event.preventDefault();
  6. event.dataTransfer.dropEffect = 'copy';
  7. }, false );
  8. document.addEventListener( 'drop', function ( event ) {
  9. event.preventDefault();
  10. scope.loadFile( event.dataTransfer.files[ 0 ] );
  11. }, false );
  12. this.loadLocalStorage = function () {
  13. if ( localStorage.threejsEditor !== undefined ) {
  14. var loader = new THREE.ObjectLoader();
  15. var scene = loader.parse( JSON.parse( localStorage.threejsEditor ) );
  16. editor.setScene( scene );
  17. }
  18. };
  19. var exporter = new THREE.ObjectExporter();
  20. var timeout;
  21. this.saveLocalStorage = function ( scene ) {
  22. clearTimeout( timeout );
  23. timeout = setTimeout( function () {
  24. localStorage.threejsEditor = JSON.stringify( exporter.parse( editor.scene ) );
  25. console.log( '[' + /\d\d\:\d\d\:\d\d/.exec( new Date() )[ 0 ] + ']', 'Saved state to LocalStorage.' );
  26. }, 3000 );
  27. };
  28. signals.objectAdded.add( this.saveLocalStorage );
  29. signals.objectChanged.add( this.saveLocalStorage );
  30. signals.objectRemoved.add( this.saveLocalStorage );
  31. this.loadFile = function ( file ) {
  32. var filename = file.name;
  33. var extension = filename.split( '.' ).pop().toLowerCase();
  34. switch ( extension ) {
  35. case 'babylon':
  36. var reader = new FileReader();
  37. reader.addEventListener( 'load', function ( event ) {
  38. var contents = event.target.result;
  39. var json = JSON.parse( contents );
  40. var loader = new THREE.BabylonLoader();
  41. var scene = loader.parse( json );
  42. editor.setScene( scene );
  43. }, false );
  44. reader.readAsText( file );
  45. break;
  46. case 'ctm':
  47. var reader = new FileReader();
  48. reader.addEventListener( 'load', function ( event ) {
  49. var contents = event.target.result;
  50. var stream = new CTM.Stream( contents );
  51. stream.offset = 0;
  52. var loader = new THREE.CTMLoader();
  53. loader.createModelClassic( new CTM.File( stream ), function( geometry ) {
  54. geometry.sourceType = "ctm";
  55. geometry.sourceFile = file.name;
  56. var material = new THREE.MeshPhongMaterial();
  57. var mesh = new THREE.Mesh( geometry, material );
  58. mesh.name = filename;
  59. editor.addObject( mesh );
  60. } );
  61. }, false );
  62. reader.readAsBinaryString( file );
  63. break;
  64. case 'dae':
  65. var reader = new FileReader();
  66. reader.addEventListener( 'load', function ( event ) {
  67. var contents = event.target.result;
  68. var parser = new DOMParser();
  69. var xml = parser.parseFromString( contents, 'text/xml' );
  70. var loader = new THREE.ColladaLoader();
  71. loader.parse( xml, function ( collada ) {
  72. collada.scene.name = filename;
  73. editor.addObject( collada.scene );
  74. } );
  75. }, false );
  76. reader.readAsText( file );
  77. break;
  78. case 'js':
  79. case 'json':
  80. case '3geo':
  81. case '3mat':
  82. case '3obj':
  83. case '3scn':
  84. var reader = new FileReader();
  85. reader.addEventListener( 'load', function ( event ) {
  86. var contents = event.target.result;
  87. // 2.0
  88. if ( contents.indexOf( 'postMessage' ) !== -1 ) {
  89. var blob = new Blob( [ contents ], { type: 'text/javascript' } );
  90. var url = URL.createObjectURL( blob );
  91. var worker = new Worker( url );
  92. worker.onmessage = function ( event ) {
  93. event.data.metadata = { version: 2 };
  94. handleJSON( event.data, file, filename );
  95. };
  96. worker.postMessage( Date.now() );
  97. return;
  98. }
  99. // >= 3.0
  100. var data;
  101. try {
  102. data = JSON.parse( contents );
  103. } catch ( error ) {
  104. alert( error );
  105. return;
  106. }
  107. handleJSON( data, file, filename );
  108. }, false );
  109. reader.readAsText( file );
  110. break;
  111. case 'obj':
  112. var reader = new FileReader();
  113. reader.addEventListener( 'load', function ( event ) {
  114. var contents = event.target.result;
  115. var object = new THREE.OBJLoader().parse( contents );
  116. object.name = filename;
  117. editor.addObject( object );
  118. }, false );
  119. reader.readAsText( file );
  120. break;
  121. case 'ply':
  122. var reader = new FileReader();
  123. reader.addEventListener( 'load', function ( event ) {
  124. var contents = event.target.result;
  125. console.log( contents );
  126. var geometry = new THREE.PLYLoader().parse( contents );
  127. geometry.sourceType = "ply";
  128. geometry.sourceFile = file.name;
  129. var material = new THREE.MeshPhongMaterial();
  130. var mesh = new THREE.Mesh( geometry, material );
  131. mesh.name = filename;
  132. editor.addObject( mesh );
  133. }, false );
  134. reader.readAsText( file );
  135. break;
  136. case 'stl':
  137. var reader = new FileReader();
  138. reader.addEventListener( 'load', function ( event ) {
  139. var contents = event.target.result;
  140. var geometry = new THREE.STLLoader().parse( contents );
  141. geometry.sourceType = "stl";
  142. geometry.sourceFile = file.name;
  143. var material = new THREE.MeshPhongMaterial();
  144. var mesh = new THREE.Mesh( geometry, material );
  145. mesh.name = filename;
  146. editor.addObject( mesh );
  147. }, false );
  148. if ( reader.readAsBinaryString !== undefined ) {
  149. reader.readAsBinaryString( file );
  150. } else {
  151. reader.readAsArrayBuffer( file );
  152. }
  153. break;
  154. /*
  155. case 'utf8':
  156. var reader = new FileReader();
  157. reader.addEventListener( 'load', function ( event ) {
  158. var contents = event.target.result;
  159. var geometry = new THREE.UTF8Loader().parse( contents );
  160. var material = new THREE.MeshLambertMaterial();
  161. var mesh = new THREE.Mesh( geometry, material );
  162. editor.addObject( mesh );
  163. }, false );
  164. reader.readAsBinaryString( file );
  165. break;
  166. */
  167. case 'vtk':
  168. var reader = new FileReader();
  169. reader.addEventListener( 'load', function ( event ) {
  170. var contents = event.target.result;
  171. var geometry = new THREE.VTKLoader().parse( contents );
  172. geometry.sourceType = "vtk";
  173. geometry.sourceFile = file.name;
  174. var material = new THREE.MeshPhongMaterial();
  175. var mesh = new THREE.Mesh( geometry, material );
  176. mesh.name = filename;
  177. editor.addObject( mesh );
  178. }, false );
  179. reader.readAsText( file );
  180. break;
  181. case 'wrl':
  182. var reader = new FileReader();
  183. reader.addEventListener( 'load', function ( event ) {
  184. var contents = event.target.result;
  185. var result = new THREE.VRMLLoader().parse( contents );
  186. editor.setScene( result );
  187. }, false );
  188. reader.readAsText( file );
  189. break;
  190. default:
  191. alert( 'Unsupported file format.' );
  192. break;
  193. }
  194. }
  195. var handleJSON = function ( data, file, filename ) {
  196. if ( data.metadata === undefined ) { // 2.0
  197. data.metadata = { type: 'geometry' };
  198. }
  199. if ( data.metadata.type === undefined ) { // 3.0
  200. data.metadata.type = 'geometry';
  201. }
  202. if ( data.metadata.version === undefined ) {
  203. data.metadata.version = data.metadata.formatVersion;
  204. }
  205. if ( data.metadata.type === 'geometry' ) {
  206. var loader = new THREE.JSONLoader();
  207. var result = loader.parse( data );
  208. var geometry = result.geometry;
  209. var material = result.materials !== undefined
  210. ? new THREE.MeshFaceMaterial( result.materials )
  211. : new THREE.MeshPhongMaterial();
  212. geometry.sourceType = "ascii";
  213. geometry.sourceFile = file.name;
  214. var mesh = new THREE.Mesh( geometry, material );
  215. mesh.name = filename;
  216. editor.addObject( mesh );
  217. } else if ( data.metadata.type === 'object' ) {
  218. var loader = new THREE.ObjectLoader();
  219. var result = loader.parse( data );
  220. if ( result instanceof THREE.Scene ) {
  221. editor.setScene( result );
  222. } else {
  223. editor.addObject( result );
  224. }
  225. } else if ( data.metadata.type === 'scene' ) {
  226. // DEPRECATED
  227. var loader = new THREE.SceneLoader();
  228. loader.parse( data, function ( result ) {
  229. editor.setScene( result.scene );
  230. }, '' );
  231. }
  232. };
  233. }