3MFLoader.js 34 KB

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