3MFLoader.js 34 KB

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