3MFLoader.js 34 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329
  1. ( function () {
  2. /**
  3. *
  4. * 3D Manufacturing Format (3MF) specification: https://3mf.io/specification/
  5. *
  6. * The following features from the core specification are supported:
  7. *
  8. * - 3D Models
  9. * - Object Resources (Meshes and Components)
  10. * - Material Resources (Base Materials)
  11. *
  12. * 3MF Materials and Properties Extension are only partially supported.
  13. *
  14. * - Texture 2D
  15. * - Texture 2D Groups
  16. * - THREE.Color Groups (Vertex Colors)
  17. * - Metallic Display Properties (PBR)
  18. */
  19. class ThreeMFLoader extends THREE.Loader {
  20. constructor( manager ) {
  21. super( manager );
  22. this.availableExtensions = [];
  23. }
  24. load( url, onLoad, onProgress, onError ) {
  25. const scope = this;
  26. const loader = new THREE.FileLoader( scope.manager );
  27. loader.setPath( scope.path );
  28. loader.setResponseType( 'arraybuffer' );
  29. loader.setRequestHeader( scope.requestHeader );
  30. loader.setWithCredentials( scope.withCredentials );
  31. loader.load( url, function ( buffer ) {
  32. try {
  33. onLoad( scope.parse( buffer ) );
  34. } catch ( e ) {
  35. if ( onError ) {
  36. onError( e );
  37. } else {
  38. console.error( e );
  39. }
  40. scope.manager.itemError( url );
  41. }
  42. }, onProgress, onError );
  43. }
  44. parse( data ) {
  45. const scope = this;
  46. const textureLoader = new THREE.TextureLoader( this.manager );
  47. function loadDocument( data ) {
  48. let zip = null;
  49. let file = null;
  50. let relsName;
  51. let modelRelsName;
  52. const modelPartNames = [];
  53. const printTicketPartNames = [];
  54. const texturesPartNames = [];
  55. let modelRels;
  56. const modelParts = {};
  57. const printTicketParts = {};
  58. const texturesParts = {};
  59. try {
  60. zip = fflate.unzipSync( new Uint8Array( data ) ); // eslint-disable-line no-undef
  61. } catch ( e ) {
  62. if ( e instanceof ReferenceError ) {
  63. console.error( 'THREE.3MFLoader: fflate missing and file is compressed.' );
  64. return null;
  65. }
  66. }
  67. for ( file in zip ) {
  68. if ( file.match( /\_rels\/.rels$/ ) ) {
  69. relsName = file;
  70. } else if ( file.match( /3D\/_rels\/.*\.model\.rels$/ ) ) {
  71. modelRelsName = file;
  72. } else if ( file.match( /^3D\/.*\.model$/ ) ) {
  73. modelPartNames.push( file );
  74. } else if ( file.match( /^3D\/Metadata\/.*\.xml$/ ) ) {
  75. printTicketPartNames.push( file );
  76. } else if ( file.match( /^3D\/Textures?\/.*/ ) ) {
  77. texturesPartNames.push( file );
  78. }
  79. } //
  80. const relsView = zip[ relsName ];
  81. const relsFileText = THREE.LoaderUtils.decodeText( relsView );
  82. const rels = parseRelsXml( relsFileText ); //
  83. if ( modelRelsName ) {
  84. const relsView = zip[ modelRelsName ];
  85. const relsFileText = THREE.LoaderUtils.decodeText( relsView );
  86. modelRels = parseRelsXml( relsFileText );
  87. } //
  88. for ( let i = 0; i < modelPartNames.length; i ++ ) {
  89. const modelPart = modelPartNames[ i ];
  90. const view = zip[ modelPart ];
  91. const fileText = THREE.LoaderUtils.decodeText( view );
  92. const xmlData = new DOMParser().parseFromString( fileText, 'application/xml' );
  93. if ( xmlData.documentElement.nodeName.toLowerCase() !== 'model' ) {
  94. console.error( 'THREE.3MFLoader: Error loading 3MF - no 3MF document found: ', modelPart );
  95. }
  96. const modelNode = xmlData.querySelector( 'model' );
  97. const extensions = {};
  98. for ( let i = 0; i < modelNode.attributes.length; i ++ ) {
  99. const attr = modelNode.attributes[ i ];
  100. if ( attr.name.match( /^xmlns:(.+)$/ ) ) {
  101. extensions[ attr.value ] = RegExp.$1;
  102. }
  103. }
  104. const modelData = parseModelNode( modelNode );
  105. modelData[ 'xml' ] = modelNode;
  106. if ( 0 < Object.keys( extensions ).length ) {
  107. modelData[ 'extensions' ] = extensions;
  108. }
  109. modelParts[ modelPart ] = modelData;
  110. } //
  111. for ( let i = 0; i < texturesPartNames.length; i ++ ) {
  112. const texturesPartName = texturesPartNames[ i ];
  113. texturesParts[ texturesPartName ] = zip[ texturesPartName ].buffer;
  114. }
  115. return {
  116. rels: rels,
  117. modelRels: modelRels,
  118. model: modelParts,
  119. printTicket: printTicketParts,
  120. texture: texturesParts
  121. };
  122. }
  123. function parseRelsXml( relsFileText ) {
  124. const relationships = [];
  125. const relsXmlData = new DOMParser().parseFromString( relsFileText, 'application/xml' );
  126. const relsNodes = relsXmlData.querySelectorAll( 'Relationship' );
  127. for ( let i = 0; i < relsNodes.length; i ++ ) {
  128. const relsNode = relsNodes[ i ];
  129. const relationship = {
  130. target: relsNode.getAttribute( 'Target' ),
  131. //required
  132. id: relsNode.getAttribute( 'Id' ),
  133. //required
  134. type: relsNode.getAttribute( 'Type' ) //required
  135. };
  136. relationships.push( relationship );
  137. }
  138. return relationships;
  139. }
  140. function parseMetadataNodes( metadataNodes ) {
  141. const metadataData = {};
  142. for ( let i = 0; i < metadataNodes.length; i ++ ) {
  143. const metadataNode = metadataNodes[ i ];
  144. const name = metadataNode.getAttribute( 'name' );
  145. const validNames = [ 'Title', 'Designer', 'Description', 'Copyright', 'LicenseTerms', 'Rating', 'CreationDate', 'ModificationDate' ];
  146. if ( 0 <= validNames.indexOf( name ) ) {
  147. metadataData[ name ] = metadataNode.textContent;
  148. }
  149. }
  150. return metadataData;
  151. }
  152. function parseBasematerialsNode( basematerialsNode ) {
  153. const basematerialsData = {
  154. id: basematerialsNode.getAttribute( 'id' ),
  155. // required
  156. basematerials: []
  157. };
  158. const basematerialNodes = basematerialsNode.querySelectorAll( 'base' );
  159. for ( let i = 0; i < basematerialNodes.length; i ++ ) {
  160. const basematerialNode = basematerialNodes[ i ];
  161. const basematerialData = parseBasematerialNode( basematerialNode );
  162. basematerialData.index = i; // the order and count of the material nodes form an implicit 0-based index
  163. basematerialsData.basematerials.push( basematerialData );
  164. }
  165. return basematerialsData;
  166. }
  167. function parseTexture2DNode( texture2DNode ) {
  168. const texture2dData = {
  169. id: texture2DNode.getAttribute( 'id' ),
  170. // required
  171. path: texture2DNode.getAttribute( 'path' ),
  172. // required
  173. contenttype: texture2DNode.getAttribute( 'contenttype' ),
  174. // required
  175. tilestyleu: texture2DNode.getAttribute( 'tilestyleu' ),
  176. tilestylev: texture2DNode.getAttribute( 'tilestylev' ),
  177. filter: texture2DNode.getAttribute( 'filter' )
  178. };
  179. return texture2dData;
  180. }
  181. function parseTextures2DGroupNode( texture2DGroupNode ) {
  182. const texture2DGroupData = {
  183. id: texture2DGroupNode.getAttribute( 'id' ),
  184. // required
  185. texid: texture2DGroupNode.getAttribute( 'texid' ),
  186. // required
  187. displaypropertiesid: texture2DGroupNode.getAttribute( 'displaypropertiesid' )
  188. };
  189. const tex2coordNodes = texture2DGroupNode.querySelectorAll( 'tex2coord' );
  190. const uvs = [];
  191. for ( let i = 0; i < tex2coordNodes.length; i ++ ) {
  192. const tex2coordNode = tex2coordNodes[ i ];
  193. const u = tex2coordNode.getAttribute( 'u' );
  194. const v = tex2coordNode.getAttribute( 'v' );
  195. uvs.push( parseFloat( u ), parseFloat( v ) );
  196. }
  197. texture2DGroupData[ 'uvs' ] = new Float32Array( uvs );
  198. return texture2DGroupData;
  199. }
  200. function parseColorGroupNode( colorGroupNode ) {
  201. const colorGroupData = {
  202. id: colorGroupNode.getAttribute( 'id' ),
  203. // required
  204. displaypropertiesid: colorGroupNode.getAttribute( 'displaypropertiesid' )
  205. };
  206. const colorNodes = colorGroupNode.querySelectorAll( 'color' );
  207. const colors = [];
  208. const colorObject = new THREE.Color();
  209. for ( let i = 0; i < colorNodes.length; i ++ ) {
  210. const colorNode = colorNodes[ i ];
  211. const color = colorNode.getAttribute( 'color' );
  212. colorObject.setStyle( color.substring( 0, 7 ) );
  213. colorObject.convertSRGBToLinear(); // color is in sRGB
  214. colors.push( colorObject.r, colorObject.g, colorObject.b );
  215. }
  216. colorGroupData[ 'colors' ] = new Float32Array( colors );
  217. return colorGroupData;
  218. }
  219. function parseMetallicDisplaypropertiesNode( metallicDisplaypropetiesNode ) {
  220. const metallicDisplaypropertiesData = {
  221. id: metallicDisplaypropetiesNode.getAttribute( 'id' ) // required
  222. };
  223. const metallicNodes = metallicDisplaypropetiesNode.querySelectorAll( 'pbmetallic' );
  224. const metallicData = [];
  225. for ( let i = 0; i < metallicNodes.length; i ++ ) {
  226. const metallicNode = metallicNodes[ i ];
  227. metallicData.push( {
  228. name: metallicNode.getAttribute( 'name' ),
  229. // required
  230. metallicness: parseFloat( metallicNode.getAttribute( 'metallicness' ) ),
  231. // required
  232. roughness: parseFloat( metallicNode.getAttribute( 'roughness' ) ) // required
  233. } );
  234. }
  235. metallicDisplaypropertiesData.data = metallicData;
  236. return metallicDisplaypropertiesData;
  237. }
  238. function parseBasematerialNode( basematerialNode ) {
  239. const basematerialData = {};
  240. basematerialData[ 'name' ] = basematerialNode.getAttribute( 'name' ); // required
  241. basematerialData[ 'displaycolor' ] = basematerialNode.getAttribute( 'displaycolor' ); // required
  242. basematerialData[ 'displaypropertiesid' ] = basematerialNode.getAttribute( 'displaypropertiesid' );
  243. return basematerialData;
  244. }
  245. function parseMeshNode( meshNode ) {
  246. const meshData = {};
  247. const vertices = [];
  248. const vertexNodes = meshNode.querySelectorAll( 'vertices vertex' );
  249. for ( let i = 0; i < vertexNodes.length; i ++ ) {
  250. const vertexNode = vertexNodes[ i ];
  251. const x = vertexNode.getAttribute( 'x' );
  252. const y = vertexNode.getAttribute( 'y' );
  253. const z = vertexNode.getAttribute( 'z' );
  254. vertices.push( parseFloat( x ), parseFloat( y ), parseFloat( z ) );
  255. }
  256. meshData[ 'vertices' ] = new Float32Array( vertices );
  257. const triangleProperties = [];
  258. const triangles = [];
  259. const triangleNodes = meshNode.querySelectorAll( 'triangles triangle' );
  260. for ( let i = 0; i < triangleNodes.length; i ++ ) {
  261. const triangleNode = triangleNodes[ i ];
  262. const v1 = triangleNode.getAttribute( 'v1' );
  263. const v2 = triangleNode.getAttribute( 'v2' );
  264. const v3 = triangleNode.getAttribute( 'v3' );
  265. const p1 = triangleNode.getAttribute( 'p1' );
  266. const p2 = triangleNode.getAttribute( 'p2' );
  267. const p3 = triangleNode.getAttribute( 'p3' );
  268. const pid = triangleNode.getAttribute( 'pid' );
  269. const triangleProperty = {};
  270. triangleProperty[ 'v1' ] = parseInt( v1, 10 );
  271. triangleProperty[ 'v2' ] = parseInt( v2, 10 );
  272. triangleProperty[ 'v3' ] = parseInt( v3, 10 );
  273. triangles.push( triangleProperty[ 'v1' ], triangleProperty[ 'v2' ], triangleProperty[ 'v3' ] ); // optional
  274. if ( p1 ) {
  275. triangleProperty[ 'p1' ] = parseInt( p1, 10 );
  276. }
  277. if ( p2 ) {
  278. triangleProperty[ 'p2' ] = parseInt( p2, 10 );
  279. }
  280. if ( p3 ) {
  281. triangleProperty[ 'p3' ] = parseInt( p3, 10 );
  282. }
  283. if ( pid ) {
  284. triangleProperty[ 'pid' ] = pid;
  285. }
  286. if ( 0 < Object.keys( triangleProperty ).length ) {
  287. triangleProperties.push( triangleProperty );
  288. }
  289. }
  290. meshData[ 'triangleProperties' ] = triangleProperties;
  291. meshData[ 'triangles' ] = new Uint32Array( triangles );
  292. return meshData;
  293. }
  294. function parseComponentsNode( componentsNode ) {
  295. const components = [];
  296. const componentNodes = componentsNode.querySelectorAll( 'component' );
  297. for ( let i = 0; i < componentNodes.length; i ++ ) {
  298. const componentNode = componentNodes[ i ];
  299. const componentData = parseComponentNode( componentNode );
  300. components.push( componentData );
  301. }
  302. return components;
  303. }
  304. function parseComponentNode( componentNode ) {
  305. const componentData = {};
  306. componentData[ 'objectId' ] = componentNode.getAttribute( 'objectid' ); // required
  307. const transform = componentNode.getAttribute( 'transform' );
  308. if ( transform ) {
  309. componentData[ 'transform' ] = parseTransform( transform );
  310. }
  311. return componentData;
  312. }
  313. function parseTransform( transform ) {
  314. const t = [];
  315. transform.split( ' ' ).forEach( function ( s ) {
  316. t.push( parseFloat( s ) );
  317. } );
  318. const matrix = new THREE.Matrix4();
  319. matrix.set( t[ 0 ], t[ 3 ], t[ 6 ], t[ 9 ], t[ 1 ], t[ 4 ], t[ 7 ], t[ 10 ], t[ 2 ], t[ 5 ], t[ 8 ], t[ 11 ], 0.0, 0.0, 0.0, 1.0 );
  320. return matrix;
  321. }
  322. function parseObjectNode( objectNode ) {
  323. const objectData = {
  324. type: objectNode.getAttribute( 'type' )
  325. };
  326. const id = objectNode.getAttribute( 'id' );
  327. if ( id ) {
  328. objectData[ 'id' ] = id;
  329. }
  330. const pid = objectNode.getAttribute( 'pid' );
  331. if ( pid ) {
  332. objectData[ 'pid' ] = pid;
  333. }
  334. const pindex = objectNode.getAttribute( 'pindex' );
  335. if ( pindex ) {
  336. objectData[ 'pindex' ] = pindex;
  337. }
  338. const thumbnail = objectNode.getAttribute( 'thumbnail' );
  339. if ( thumbnail ) {
  340. objectData[ 'thumbnail' ] = thumbnail;
  341. }
  342. const partnumber = objectNode.getAttribute( 'partnumber' );
  343. if ( partnumber ) {
  344. objectData[ 'partnumber' ] = partnumber;
  345. }
  346. const name = objectNode.getAttribute( 'name' );
  347. if ( name ) {
  348. objectData[ 'name' ] = name;
  349. }
  350. const meshNode = objectNode.querySelector( 'mesh' );
  351. if ( meshNode ) {
  352. objectData[ 'mesh' ] = parseMeshNode( meshNode );
  353. }
  354. const componentsNode = objectNode.querySelector( 'components' );
  355. if ( componentsNode ) {
  356. objectData[ 'components' ] = parseComponentsNode( componentsNode );
  357. }
  358. return objectData;
  359. }
  360. function parseResourcesNode( resourcesNode ) {
  361. const resourcesData = {};
  362. resourcesData[ 'basematerials' ] = {};
  363. const basematerialsNodes = resourcesNode.querySelectorAll( 'basematerials' );
  364. for ( let i = 0; i < basematerialsNodes.length; i ++ ) {
  365. const basematerialsNode = basematerialsNodes[ i ];
  366. const basematerialsData = parseBasematerialsNode( basematerialsNode );
  367. resourcesData[ 'basematerials' ][ basematerialsData[ 'id' ] ] = basematerialsData;
  368. } //
  369. resourcesData[ 'texture2d' ] = {};
  370. const textures2DNodes = resourcesNode.querySelectorAll( 'texture2d' );
  371. for ( let i = 0; i < textures2DNodes.length; i ++ ) {
  372. const textures2DNode = textures2DNodes[ i ];
  373. const texture2DData = parseTexture2DNode( textures2DNode );
  374. resourcesData[ 'texture2d' ][ texture2DData[ 'id' ] ] = texture2DData;
  375. } //
  376. resourcesData[ 'colorgroup' ] = {};
  377. const colorGroupNodes = resourcesNode.querySelectorAll( 'colorgroup' );
  378. for ( let i = 0; i < colorGroupNodes.length; i ++ ) {
  379. const colorGroupNode = colorGroupNodes[ i ];
  380. const colorGroupData = parseColorGroupNode( colorGroupNode );
  381. resourcesData[ 'colorgroup' ][ colorGroupData[ 'id' ] ] = colorGroupData;
  382. } //
  383. resourcesData[ 'pbmetallicdisplayproperties' ] = {};
  384. const pbmetallicdisplaypropertiesNodes = resourcesNode.querySelectorAll( 'pbmetallicdisplayproperties' );
  385. for ( let i = 0; i < pbmetallicdisplaypropertiesNodes.length; i ++ ) {
  386. const pbmetallicdisplaypropertiesNode = pbmetallicdisplaypropertiesNodes[ i ];
  387. const pbmetallicdisplaypropertiesData = parseMetallicDisplaypropertiesNode( pbmetallicdisplaypropertiesNode );
  388. resourcesData[ 'pbmetallicdisplayproperties' ][ pbmetallicdisplaypropertiesData[ 'id' ] ] = pbmetallicdisplaypropertiesData;
  389. } //
  390. resourcesData[ 'texture2dgroup' ] = {};
  391. const textures2DGroupNodes = resourcesNode.querySelectorAll( 'texture2dgroup' );
  392. for ( let i = 0; i < textures2DGroupNodes.length; i ++ ) {
  393. const textures2DGroupNode = textures2DGroupNodes[ i ];
  394. const textures2DGroupData = parseTextures2DGroupNode( textures2DGroupNode );
  395. resourcesData[ 'texture2dgroup' ][ textures2DGroupData[ 'id' ] ] = textures2DGroupData;
  396. } //
  397. resourcesData[ 'object' ] = {};
  398. const objectNodes = resourcesNode.querySelectorAll( 'object' );
  399. for ( let i = 0; i < objectNodes.length; i ++ ) {
  400. const objectNode = objectNodes[ i ];
  401. const objectData = parseObjectNode( objectNode );
  402. resourcesData[ 'object' ][ objectData[ 'id' ] ] = objectData;
  403. }
  404. return resourcesData;
  405. }
  406. function parseBuildNode( buildNode ) {
  407. const buildData = [];
  408. const itemNodes = buildNode.querySelectorAll( 'item' );
  409. for ( let i = 0; i < itemNodes.length; i ++ ) {
  410. const itemNode = itemNodes[ i ];
  411. const buildItem = {
  412. objectId: itemNode.getAttribute( 'objectid' )
  413. };
  414. const transform = itemNode.getAttribute( 'transform' );
  415. if ( transform ) {
  416. buildItem[ 'transform' ] = parseTransform( transform );
  417. }
  418. buildData.push( buildItem );
  419. }
  420. return buildData;
  421. }
  422. function parseModelNode( modelNode ) {
  423. const modelData = {
  424. unit: modelNode.getAttribute( 'unit' ) || 'millimeter'
  425. };
  426. const metadataNodes = modelNode.querySelectorAll( 'metadata' );
  427. if ( metadataNodes ) {
  428. modelData[ 'metadata' ] = parseMetadataNodes( metadataNodes );
  429. }
  430. const resourcesNode = modelNode.querySelector( 'resources' );
  431. if ( resourcesNode ) {
  432. modelData[ 'resources' ] = parseResourcesNode( resourcesNode );
  433. }
  434. const buildNode = modelNode.querySelector( 'build' );
  435. if ( buildNode ) {
  436. modelData[ 'build' ] = parseBuildNode( buildNode );
  437. }
  438. return modelData;
  439. }
  440. function buildTexture( texture2dgroup, objects, modelData, textureData ) {
  441. const texid = texture2dgroup.texid;
  442. const texture2ds = modelData.resources.texture2d;
  443. const texture2d = texture2ds[ texid ];
  444. if ( texture2d ) {
  445. const data = textureData[ texture2d.path ];
  446. const type = texture2d.contenttype;
  447. const blob = new Blob( [ data ], {
  448. type: type
  449. } );
  450. const sourceURI = URL.createObjectURL( blob );
  451. const texture = textureLoader.load( sourceURI, function () {
  452. URL.revokeObjectURL( sourceURI );
  453. } );
  454. texture.encoding = THREE.sRGBEncoding; // texture parameters
  455. switch ( texture2d.tilestyleu ) {
  456. case 'wrap':
  457. texture.wrapS = THREE.RepeatWrapping;
  458. break;
  459. case 'mirror':
  460. texture.wrapS = THREE.MirroredRepeatWrapping;
  461. break;
  462. case 'none':
  463. case 'clamp':
  464. texture.wrapS = THREE.ClampToEdgeWrapping;
  465. break;
  466. default:
  467. texture.wrapS = THREE.RepeatWrapping;
  468. }
  469. switch ( texture2d.tilestylev ) {
  470. case 'wrap':
  471. texture.wrapT = THREE.RepeatWrapping;
  472. break;
  473. case 'mirror':
  474. texture.wrapT = THREE.MirroredRepeatWrapping;
  475. break;
  476. case 'none':
  477. case 'clamp':
  478. texture.wrapT = THREE.ClampToEdgeWrapping;
  479. break;
  480. default:
  481. texture.wrapT = THREE.RepeatWrapping;
  482. }
  483. switch ( texture2d.filter ) {
  484. case 'auto':
  485. texture.magFilter = THREE.LinearFilter;
  486. texture.minFilter = THREE.LinearMipmapLinearFilter;
  487. break;
  488. case 'linear':
  489. texture.magFilter = THREE.LinearFilter;
  490. texture.minFilter = THREE.LinearFilter;
  491. break;
  492. case 'nearest':
  493. texture.magFilter = THREE.NearestFilter;
  494. texture.minFilter = THREE.NearestFilter;
  495. break;
  496. default:
  497. texture.magFilter = THREE.LinearFilter;
  498. texture.minFilter = THREE.LinearMipmapLinearFilter;
  499. }
  500. return texture;
  501. } else {
  502. return null;
  503. }
  504. }
  505. function buildBasematerialsMeshes( basematerials, triangleProperties, meshData, objects, modelData, textureData, objectData ) {
  506. const objectPindex = objectData.pindex;
  507. const materialMap = {};
  508. for ( let i = 0, l = triangleProperties.length; i < l; i ++ ) {
  509. const triangleProperty = triangleProperties[ i ];
  510. const pindex = triangleProperty.p1 !== undefined ? triangleProperty.p1 : objectPindex;
  511. if ( materialMap[ pindex ] === undefined ) materialMap[ pindex ] = [];
  512. materialMap[ pindex ].push( triangleProperty );
  513. } //
  514. const keys = Object.keys( materialMap );
  515. const meshes = [];
  516. for ( let i = 0, l = keys.length; i < l; i ++ ) {
  517. const materialIndex = keys[ i ];
  518. const trianglePropertiesProps = materialMap[ materialIndex ];
  519. const basematerialData = basematerials.basematerials[ materialIndex ];
  520. const material = getBuild( basematerialData, objects, modelData, textureData, objectData, buildBasematerial ); //
  521. const geometry = new THREE.BufferGeometry();
  522. const positionData = [];
  523. const vertices = meshData.vertices;
  524. for ( let j = 0, jl = trianglePropertiesProps.length; j < jl; j ++ ) {
  525. const triangleProperty = trianglePropertiesProps[ j ];
  526. positionData.push( vertices[ triangleProperty.v1 * 3 + 0 ] );
  527. positionData.push( vertices[ triangleProperty.v1 * 3 + 1 ] );
  528. positionData.push( vertices[ triangleProperty.v1 * 3 + 2 ] );
  529. positionData.push( vertices[ triangleProperty.v2 * 3 + 0 ] );
  530. positionData.push( vertices[ triangleProperty.v2 * 3 + 1 ] );
  531. positionData.push( vertices[ triangleProperty.v2 * 3 + 2 ] );
  532. positionData.push( vertices[ triangleProperty.v3 * 3 + 0 ] );
  533. positionData.push( vertices[ triangleProperty.v3 * 3 + 1 ] );
  534. positionData.push( vertices[ triangleProperty.v3 * 3 + 2 ] );
  535. }
  536. geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( positionData, 3 ) ); //
  537. const mesh = new THREE.Mesh( geometry, material );
  538. meshes.push( mesh );
  539. }
  540. return meshes;
  541. }
  542. function buildTexturedMesh( texture2dgroup, triangleProperties, meshData, objects, modelData, textureData, objectData ) {
  543. // geometry
  544. const geometry = new THREE.BufferGeometry();
  545. const positionData = [];
  546. const uvData = [];
  547. const vertices = meshData.vertices;
  548. const uvs = texture2dgroup.uvs;
  549. for ( let i = 0, l = triangleProperties.length; i < l; i ++ ) {
  550. const triangleProperty = triangleProperties[ i ];
  551. positionData.push( vertices[ triangleProperty.v1 * 3 + 0 ] );
  552. positionData.push( vertices[ triangleProperty.v1 * 3 + 1 ] );
  553. positionData.push( vertices[ triangleProperty.v1 * 3 + 2 ] );
  554. positionData.push( vertices[ triangleProperty.v2 * 3 + 0 ] );
  555. positionData.push( vertices[ triangleProperty.v2 * 3 + 1 ] );
  556. positionData.push( vertices[ triangleProperty.v2 * 3 + 2 ] );
  557. positionData.push( vertices[ triangleProperty.v3 * 3 + 0 ] );
  558. positionData.push( vertices[ triangleProperty.v3 * 3 + 1 ] );
  559. positionData.push( vertices[ triangleProperty.v3 * 3 + 2 ] ); //
  560. uvData.push( uvs[ triangleProperty.p1 * 2 + 0 ] );
  561. uvData.push( uvs[ triangleProperty.p1 * 2 + 1 ] );
  562. uvData.push( uvs[ triangleProperty.p2 * 2 + 0 ] );
  563. uvData.push( uvs[ triangleProperty.p2 * 2 + 1 ] );
  564. uvData.push( uvs[ triangleProperty.p3 * 2 + 0 ] );
  565. uvData.push( uvs[ triangleProperty.p3 * 2 + 1 ] );
  566. }
  567. geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( positionData, 3 ) );
  568. geometry.setAttribute( 'uv', new THREE.Float32BufferAttribute( uvData, 2 ) ); // material
  569. const texture = getBuild( texture2dgroup, objects, modelData, textureData, objectData, buildTexture );
  570. const material = new THREE.MeshPhongMaterial( {
  571. map: texture,
  572. flatShading: true
  573. } ); // mesh
  574. const mesh = new THREE.Mesh( geometry, material );
  575. return mesh;
  576. }
  577. function buildVertexColorMesh( colorgroup, triangleProperties, meshData, objects, objectData ) {
  578. // geometry
  579. const geometry = new THREE.BufferGeometry();
  580. const positionData = [];
  581. const colorData = [];
  582. const vertices = meshData.vertices;
  583. const colors = colorgroup.colors;
  584. for ( let i = 0, l = triangleProperties.length; i < l; i ++ ) {
  585. const triangleProperty = triangleProperties[ i ];
  586. const v1 = triangleProperty.v1;
  587. const v2 = triangleProperty.v2;
  588. const v3 = triangleProperty.v3;
  589. positionData.push( vertices[ v1 * 3 + 0 ] );
  590. positionData.push( vertices[ v1 * 3 + 1 ] );
  591. positionData.push( vertices[ v1 * 3 + 2 ] );
  592. positionData.push( vertices[ v2 * 3 + 0 ] );
  593. positionData.push( vertices[ v2 * 3 + 1 ] );
  594. positionData.push( vertices[ v2 * 3 + 2 ] );
  595. positionData.push( vertices[ v3 * 3 + 0 ] );
  596. positionData.push( vertices[ v3 * 3 + 1 ] );
  597. positionData.push( vertices[ v3 * 3 + 2 ] ); //
  598. const p1 = triangleProperty.p1 !== undefined ? triangleProperty.p1 : objectData.pindex;
  599. const p2 = triangleProperty.p2 !== undefined ? triangleProperty.p2 : p1;
  600. const p3 = triangleProperty.p3 !== undefined ? triangleProperty.p3 : p1;
  601. colorData.push( colors[ p1 * 3 + 0 ] );
  602. colorData.push( colors[ p1 * 3 + 1 ] );
  603. colorData.push( colors[ p1 * 3 + 2 ] );
  604. colorData.push( colors[ p2 * 3 + 0 ] );
  605. colorData.push( colors[ p2 * 3 + 1 ] );
  606. colorData.push( colors[ p2 * 3 + 2 ] );
  607. colorData.push( colors[ p3 * 3 + 0 ] );
  608. colorData.push( colors[ p3 * 3 + 1 ] );
  609. colorData.push( colors[ p3 * 3 + 2 ] );
  610. }
  611. geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( positionData, 3 ) );
  612. geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colorData, 3 ) ); // material
  613. const material = new THREE.MeshPhongMaterial( {
  614. vertexColors: true,
  615. flatShading: true
  616. } ); // mesh
  617. const mesh = new THREE.Mesh( geometry, material );
  618. return mesh;
  619. }
  620. function buildDefaultMesh( meshData ) {
  621. const geometry = new THREE.BufferGeometry();
  622. geometry.setIndex( new THREE.BufferAttribute( meshData[ 'triangles' ], 1 ) );
  623. geometry.setAttribute( 'position', new THREE.BufferAttribute( meshData[ 'vertices' ], 3 ) );
  624. const material = new THREE.MeshPhongMaterial( {
  625. color: 0xffffff,
  626. flatShading: true
  627. } );
  628. const mesh = new THREE.Mesh( geometry, material );
  629. return mesh;
  630. }
  631. function buildMeshes( resourceMap, meshData, objects, modelData, textureData, objectData ) {
  632. const keys = Object.keys( resourceMap );
  633. const meshes = [];
  634. for ( let i = 0, il = keys.length; i < il; i ++ ) {
  635. const resourceId = keys[ i ];
  636. const triangleProperties = resourceMap[ resourceId ];
  637. const resourceType = getResourceType( resourceId, modelData );
  638. switch ( resourceType ) {
  639. case 'material':
  640. const basematerials = modelData.resources.basematerials[ resourceId ];
  641. const newMeshes = buildBasematerialsMeshes( basematerials, triangleProperties, meshData, objects, modelData, textureData, objectData );
  642. for ( let j = 0, jl = newMeshes.length; j < jl; j ++ ) {
  643. meshes.push( newMeshes[ j ] );
  644. }
  645. break;
  646. case 'texture':
  647. const texture2dgroup = modelData.resources.texture2dgroup[ resourceId ];
  648. meshes.push( buildTexturedMesh( texture2dgroup, triangleProperties, meshData, objects, modelData, textureData, objectData ) );
  649. break;
  650. case 'vertexColors':
  651. const colorgroup = modelData.resources.colorgroup[ resourceId ];
  652. meshes.push( buildVertexColorMesh( colorgroup, triangleProperties, meshData, objects, objectData ) );
  653. break;
  654. case 'default':
  655. meshes.push( buildDefaultMesh( meshData ) );
  656. break;
  657. default:
  658. console.error( 'THREE.3MFLoader: Unsupported resource type.' );
  659. }
  660. }
  661. return meshes;
  662. }
  663. function getResourceType( pid, modelData ) {
  664. if ( modelData.resources.texture2dgroup[ pid ] !== undefined ) {
  665. return 'texture';
  666. } else if ( modelData.resources.basematerials[ pid ] !== undefined ) {
  667. return 'material';
  668. } else if ( modelData.resources.colorgroup[ pid ] !== undefined ) {
  669. return 'vertexColors';
  670. } else if ( pid === 'default' ) {
  671. return 'default';
  672. } else {
  673. return undefined;
  674. }
  675. }
  676. function analyzeObject( modelData, meshData, objectData ) {
  677. const resourceMap = {};
  678. const triangleProperties = meshData[ 'triangleProperties' ];
  679. const objectPid = objectData.pid;
  680. for ( let i = 0, l = triangleProperties.length; i < l; i ++ ) {
  681. const triangleProperty = triangleProperties[ i ];
  682. let pid = triangleProperty.pid !== undefined ? triangleProperty.pid : objectPid;
  683. if ( pid === undefined ) pid = 'default';
  684. if ( resourceMap[ pid ] === undefined ) resourceMap[ pid ] = [];
  685. resourceMap[ pid ].push( triangleProperty );
  686. }
  687. return resourceMap;
  688. }
  689. function buildGroup( meshData, objects, modelData, textureData, objectData ) {
  690. const group = new THREE.Group();
  691. const resourceMap = analyzeObject( modelData, meshData, objectData );
  692. const meshes = buildMeshes( resourceMap, meshData, objects, modelData, textureData, objectData );
  693. for ( let i = 0, l = meshes.length; i < l; i ++ ) {
  694. group.add( meshes[ i ] );
  695. }
  696. return group;
  697. }
  698. function applyExtensions( extensions, meshData, modelXml ) {
  699. if ( ! extensions ) {
  700. return;
  701. }
  702. const availableExtensions = [];
  703. const keys = Object.keys( extensions );
  704. for ( let i = 0; i < keys.length; i ++ ) {
  705. const ns = keys[ i ];
  706. for ( let j = 0; j < scope.availableExtensions.length; j ++ ) {
  707. const extension = scope.availableExtensions[ j ];
  708. if ( extension.ns === ns ) {
  709. availableExtensions.push( extension );
  710. }
  711. }
  712. }
  713. for ( let i = 0; i < availableExtensions.length; i ++ ) {
  714. const extension = availableExtensions[ i ];
  715. extension.apply( modelXml, extensions[ extension[ 'ns' ] ], meshData );
  716. }
  717. }
  718. function getBuild( data, objects, modelData, textureData, objectData, builder ) {
  719. if ( data.build !== undefined ) return data.build;
  720. data.build = builder( data, objects, modelData, textureData, objectData );
  721. return data.build;
  722. }
  723. function buildBasematerial( materialData, objects, modelData ) {
  724. let material;
  725. const displaypropertiesid = materialData.displaypropertiesid;
  726. const pbmetallicdisplayproperties = modelData.resources.pbmetallicdisplayproperties;
  727. if ( displaypropertiesid !== null && pbmetallicdisplayproperties[ displaypropertiesid ] !== undefined ) {
  728. // metallic display property, use StandardMaterial
  729. const pbmetallicdisplayproperty = pbmetallicdisplayproperties[ displaypropertiesid ];
  730. const metallicData = pbmetallicdisplayproperty.data[ materialData.index ];
  731. material = new THREE.MeshStandardMaterial( {
  732. flatShading: true,
  733. roughness: metallicData.roughness,
  734. metalness: metallicData.metallicness
  735. } );
  736. } else {
  737. // otherwise use PhongMaterial
  738. material = new THREE.MeshPhongMaterial( {
  739. flatShading: true
  740. } );
  741. }
  742. material.name = materialData.name; // displaycolor MUST be specified with a value of a 6 or 8 digit hexadecimal number, e.g. "#RRGGBB" or "#RRGGBBAA"
  743. const displaycolor = materialData.displaycolor;
  744. const color = displaycolor.substring( 0, 7 );
  745. material.color.setStyle( color );
  746. material.color.convertSRGBToLinear(); // displaycolor is in sRGB
  747. // process alpha if set
  748. if ( displaycolor.length === 9 ) {
  749. material.opacity = parseInt( displaycolor.charAt( 7 ) + displaycolor.charAt( 8 ), 16 ) / 255;
  750. }
  751. return material;
  752. }
  753. function buildComposite( compositeData, objects, modelData, textureData ) {
  754. const composite = new THREE.Group();
  755. for ( let j = 0; j < compositeData.length; j ++ ) {
  756. const component = compositeData[ j ];
  757. let build = objects[ component.objectId ];
  758. if ( build === undefined ) {
  759. buildObject( component.objectId, objects, modelData, textureData );
  760. build = objects[ component.objectId ];
  761. }
  762. const object3D = build.clone(); // apply component transform
  763. const transform = component.transform;
  764. if ( transform ) {
  765. object3D.applyMatrix4( transform );
  766. }
  767. composite.add( object3D );
  768. }
  769. return composite;
  770. }
  771. function buildObject( objectId, objects, modelData, textureData ) {
  772. const objectData = modelData[ 'resources' ][ 'object' ][ objectId ];
  773. if ( objectData[ 'mesh' ] ) {
  774. const meshData = objectData[ 'mesh' ];
  775. const extensions = modelData[ 'extensions' ];
  776. const modelXml = modelData[ 'xml' ];
  777. applyExtensions( extensions, meshData, modelXml );
  778. objects[ objectData.id ] = getBuild( meshData, objects, modelData, textureData, objectData, buildGroup );
  779. } else {
  780. const compositeData = objectData[ 'components' ];
  781. objects[ objectData.id ] = getBuild( compositeData, objects, modelData, textureData, objectData, buildComposite );
  782. }
  783. }
  784. function buildObjects( data3mf ) {
  785. const modelsData = data3mf.model;
  786. const modelRels = data3mf.modelRels;
  787. const objects = {};
  788. const modelsKeys = Object.keys( modelsData );
  789. const textureData = {}; // evaluate model relationships to textures
  790. if ( modelRels ) {
  791. for ( let i = 0, l = modelRels.length; i < l; i ++ ) {
  792. const modelRel = modelRels[ i ];
  793. const textureKey = modelRel.target.substring( 1 );
  794. if ( data3mf.texture[ textureKey ] ) {
  795. textureData[ modelRel.target ] = data3mf.texture[ textureKey ];
  796. }
  797. }
  798. } // start build
  799. for ( let i = 0; i < modelsKeys.length; i ++ ) {
  800. const modelsKey = modelsKeys[ i ];
  801. const modelData = modelsData[ modelsKey ];
  802. const objectIds = Object.keys( modelData[ 'resources' ][ 'object' ] );
  803. for ( let j = 0; j < objectIds.length; j ++ ) {
  804. const objectId = objectIds[ j ];
  805. buildObject( objectId, objects, modelData, textureData );
  806. }
  807. }
  808. return objects;
  809. }
  810. function fetch3DModelPart( rels ) {
  811. for ( let i = 0; i < rels.length; i ++ ) {
  812. const rel = rels[ i ];
  813. const extension = rel.target.split( '.' ).pop();
  814. if ( extension.toLowerCase() === 'model' ) return rel;
  815. }
  816. }
  817. function build( objects, data3mf ) {
  818. const group = new THREE.Group();
  819. const relationship = fetch3DModelPart( data3mf[ 'rels' ] );
  820. const buildData = data3mf.model[ relationship[ 'target' ].substring( 1 ) ][ 'build' ];
  821. for ( let i = 0; i < buildData.length; i ++ ) {
  822. const buildItem = buildData[ i ];
  823. const object3D = objects[ buildItem[ 'objectId' ] ].clone(); // apply transform
  824. const transform = buildItem[ 'transform' ];
  825. if ( transform ) {
  826. object3D.applyMatrix4( transform );
  827. }
  828. group.add( object3D );
  829. }
  830. return group;
  831. }
  832. const data3mf = loadDocument( data );
  833. const objects = buildObjects( data3mf );
  834. return build( objects, data3mf );
  835. }
  836. addExtension( extension ) {
  837. this.availableExtensions.push( extension );
  838. }
  839. }
  840. THREE.ThreeMFLoader = ThreeMFLoader;
  841. } )();