2
0

AMFLoader.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521
  1. import {
  2. BufferGeometry,
  3. Color,
  4. FileLoader,
  5. Float32BufferAttribute,
  6. Group,
  7. Loader,
  8. Mesh,
  9. MeshPhongMaterial
  10. } from 'three';
  11. import * as fflate from '../libs/fflate.module.js';
  12. /**
  13. * Description: Early release of an AMF Loader following the pattern of the
  14. * example loaders in the three.js project.
  15. *
  16. * Usage:
  17. * const loader = new AMFLoader();
  18. * loader.load('/path/to/project.amf', function(objecttree) {
  19. * scene.add(objecttree);
  20. * });
  21. *
  22. * Materials now supported, material colors supported
  23. * Zip support, requires fflate
  24. * No constellation support (yet)!
  25. *
  26. */
  27. class AMFLoader extends Loader {
  28. constructor( manager ) {
  29. super( manager );
  30. }
  31. load( url, onLoad, onProgress, onError ) {
  32. const scope = this;
  33. const loader = new FileLoader( scope.manager );
  34. loader.setPath( scope.path );
  35. loader.setResponseType( 'arraybuffer' );
  36. loader.setRequestHeader( scope.requestHeader );
  37. loader.setWithCredentials( scope.withCredentials );
  38. loader.load( url, function ( text ) {
  39. try {
  40. onLoad( scope.parse( text ) );
  41. } catch ( e ) {
  42. if ( onError ) {
  43. onError( e );
  44. } else {
  45. console.error( e );
  46. }
  47. scope.manager.itemError( url );
  48. }
  49. }, onProgress, onError );
  50. }
  51. parse( data ) {
  52. function loadDocument( data ) {
  53. let view = new DataView( data );
  54. const magic = String.fromCharCode( view.getUint8( 0 ), view.getUint8( 1 ) );
  55. if ( magic === 'PK' ) {
  56. let zip = null;
  57. let file = null;
  58. console.log( 'THREE.AMFLoader: Loading Zip' );
  59. try {
  60. zip = fflate.unzipSync( new Uint8Array( data ) );
  61. } catch ( e ) {
  62. if ( e instanceof ReferenceError ) {
  63. console.log( 'THREE.AMFLoader: fflate missing and file is compressed.' );
  64. return null;
  65. }
  66. }
  67. for ( file in zip ) {
  68. if ( file.toLowerCase().slice( - 4 ) === '.amf' ) {
  69. break;
  70. }
  71. }
  72. console.log( 'THREE.AMFLoader: Trying to load file asset: ' + file );
  73. view = new DataView( zip[ file ].buffer );
  74. }
  75. const fileText = new TextDecoder().decode( view );
  76. const xmlData = new DOMParser().parseFromString( fileText, 'application/xml' );
  77. if ( xmlData.documentElement.nodeName.toLowerCase() !== 'amf' ) {
  78. console.log( 'THREE.AMFLoader: Error loading AMF - no AMF document found.' );
  79. return null;
  80. }
  81. return xmlData;
  82. }
  83. function loadDocumentScale( node ) {
  84. let scale = 1.0;
  85. let unit = 'millimeter';
  86. if ( node.documentElement.attributes.unit !== undefined ) {
  87. unit = node.documentElement.attributes.unit.value.toLowerCase();
  88. }
  89. const scaleUnits = {
  90. millimeter: 1.0,
  91. inch: 25.4,
  92. feet: 304.8,
  93. meter: 1000.0,
  94. micron: 0.001
  95. };
  96. if ( scaleUnits[ unit ] !== undefined ) {
  97. scale = scaleUnits[ unit ];
  98. }
  99. console.log( 'THREE.AMFLoader: Unit scale: ' + scale );
  100. return scale;
  101. }
  102. function loadMaterials( node ) {
  103. let matName = 'AMF Material';
  104. const matId = node.attributes.id.textContent;
  105. let color = { r: 1.0, g: 1.0, b: 1.0, a: 1.0 };
  106. let loadedMaterial = null;
  107. for ( let i = 0; i < node.childNodes.length; i ++ ) {
  108. const matChildEl = node.childNodes[ i ];
  109. if ( matChildEl.nodeName === 'metadata' && matChildEl.attributes.type !== undefined ) {
  110. if ( matChildEl.attributes.type.value === 'name' ) {
  111. matName = matChildEl.textContent;
  112. }
  113. } else if ( matChildEl.nodeName === 'color' ) {
  114. color = loadColor( matChildEl );
  115. }
  116. }
  117. loadedMaterial = new MeshPhongMaterial( {
  118. flatShading: true,
  119. color: new Color( color.r, color.g, color.b ),
  120. name: matName
  121. } );
  122. if ( color.a !== 1.0 ) {
  123. loadedMaterial.transparent = true;
  124. loadedMaterial.opacity = color.a;
  125. }
  126. return { id: matId, material: loadedMaterial };
  127. }
  128. function loadColor( node ) {
  129. const color = { r: 1.0, g: 1.0, b: 1.0, a: 1.0 };
  130. for ( let i = 0; i < node.childNodes.length; i ++ ) {
  131. const matColor = node.childNodes[ i ];
  132. if ( matColor.nodeName === 'r' ) {
  133. color.r = matColor.textContent;
  134. } else if ( matColor.nodeName === 'g' ) {
  135. color.g = matColor.textContent;
  136. } else if ( matColor.nodeName === 'b' ) {
  137. color.b = matColor.textContent;
  138. } else if ( matColor.nodeName === 'a' ) {
  139. color.a = matColor.textContent;
  140. }
  141. }
  142. return color;
  143. }
  144. function loadMeshVolume( node ) {
  145. const volume = { name: '', triangles: [], materialid: null };
  146. let currVolumeNode = node.firstElementChild;
  147. if ( node.attributes.materialid !== undefined ) {
  148. volume.materialId = node.attributes.materialid.nodeValue;
  149. }
  150. while ( currVolumeNode ) {
  151. if ( currVolumeNode.nodeName === 'metadata' ) {
  152. if ( currVolumeNode.attributes.type !== undefined ) {
  153. if ( currVolumeNode.attributes.type.value === 'name' ) {
  154. volume.name = currVolumeNode.textContent;
  155. }
  156. }
  157. } else if ( currVolumeNode.nodeName === 'triangle' ) {
  158. const v1 = currVolumeNode.getElementsByTagName( 'v1' )[ 0 ].textContent;
  159. const v2 = currVolumeNode.getElementsByTagName( 'v2' )[ 0 ].textContent;
  160. const v3 = currVolumeNode.getElementsByTagName( 'v3' )[ 0 ].textContent;
  161. volume.triangles.push( v1, v2, v3 );
  162. }
  163. currVolumeNode = currVolumeNode.nextElementSibling;
  164. }
  165. return volume;
  166. }
  167. function loadMeshVertices( node ) {
  168. const vertArray = [];
  169. const normalArray = [];
  170. let currVerticesNode = node.firstElementChild;
  171. while ( currVerticesNode ) {
  172. if ( currVerticesNode.nodeName === 'vertex' ) {
  173. let vNode = currVerticesNode.firstElementChild;
  174. while ( vNode ) {
  175. if ( vNode.nodeName === 'coordinates' ) {
  176. const x = vNode.getElementsByTagName( 'x' )[ 0 ].textContent;
  177. const y = vNode.getElementsByTagName( 'y' )[ 0 ].textContent;
  178. const z = vNode.getElementsByTagName( 'z' )[ 0 ].textContent;
  179. vertArray.push( x, y, z );
  180. } else if ( vNode.nodeName === 'normal' ) {
  181. const nx = vNode.getElementsByTagName( 'nx' )[ 0 ].textContent;
  182. const ny = vNode.getElementsByTagName( 'ny' )[ 0 ].textContent;
  183. const nz = vNode.getElementsByTagName( 'nz' )[ 0 ].textContent;
  184. normalArray.push( nx, ny, nz );
  185. }
  186. vNode = vNode.nextElementSibling;
  187. }
  188. }
  189. currVerticesNode = currVerticesNode.nextElementSibling;
  190. }
  191. return { 'vertices': vertArray, 'normals': normalArray };
  192. }
  193. function loadObject( node ) {
  194. const objId = node.attributes.id.textContent;
  195. const loadedObject = { name: 'amfobject', meshes: [] };
  196. let currColor = null;
  197. let currObjNode = node.firstElementChild;
  198. while ( currObjNode ) {
  199. if ( currObjNode.nodeName === 'metadata' ) {
  200. if ( currObjNode.attributes.type !== undefined ) {
  201. if ( currObjNode.attributes.type.value === 'name' ) {
  202. loadedObject.name = currObjNode.textContent;
  203. }
  204. }
  205. } else if ( currObjNode.nodeName === 'color' ) {
  206. currColor = loadColor( currObjNode );
  207. } else if ( currObjNode.nodeName === 'mesh' ) {
  208. let currMeshNode = currObjNode.firstElementChild;
  209. const mesh = { vertices: [], normals: [], volumes: [], color: currColor };
  210. while ( currMeshNode ) {
  211. if ( currMeshNode.nodeName === 'vertices' ) {
  212. const loadedVertices = loadMeshVertices( currMeshNode );
  213. mesh.normals = mesh.normals.concat( loadedVertices.normals );
  214. mesh.vertices = mesh.vertices.concat( loadedVertices.vertices );
  215. } else if ( currMeshNode.nodeName === 'volume' ) {
  216. mesh.volumes.push( loadMeshVolume( currMeshNode ) );
  217. }
  218. currMeshNode = currMeshNode.nextElementSibling;
  219. }
  220. loadedObject.meshes.push( mesh );
  221. }
  222. currObjNode = currObjNode.nextElementSibling;
  223. }
  224. return { 'id': objId, 'obj': loadedObject };
  225. }
  226. const xmlData = loadDocument( data );
  227. let amfName = '';
  228. let amfAuthor = '';
  229. const amfScale = loadDocumentScale( xmlData );
  230. const amfMaterials = {};
  231. const amfObjects = {};
  232. const childNodes = xmlData.documentElement.childNodes;
  233. let i, j;
  234. for ( i = 0; i < childNodes.length; i ++ ) {
  235. const child = childNodes[ i ];
  236. if ( child.nodeName === 'metadata' ) {
  237. if ( child.attributes.type !== undefined ) {
  238. if ( child.attributes.type.value === 'name' ) {
  239. amfName = child.textContent;
  240. } else if ( child.attributes.type.value === 'author' ) {
  241. amfAuthor = child.textContent;
  242. }
  243. }
  244. } else if ( child.nodeName === 'material' ) {
  245. const loadedMaterial = loadMaterials( child );
  246. amfMaterials[ loadedMaterial.id ] = loadedMaterial.material;
  247. } else if ( child.nodeName === 'object' ) {
  248. const loadedObject = loadObject( child );
  249. amfObjects[ loadedObject.id ] = loadedObject.obj;
  250. }
  251. }
  252. const sceneObject = new Group();
  253. const defaultMaterial = new MeshPhongMaterial( {
  254. name: Loader.DEFAULT_MATERIAL_NAME,
  255. color: 0xaaaaff,
  256. flatShading: true
  257. } );
  258. sceneObject.name = amfName;
  259. sceneObject.userData.author = amfAuthor;
  260. sceneObject.userData.loader = 'AMF';
  261. for ( const id in amfObjects ) {
  262. const part = amfObjects[ id ];
  263. const meshes = part.meshes;
  264. const newObject = new Group();
  265. newObject.name = part.name || '';
  266. for ( i = 0; i < meshes.length; i ++ ) {
  267. let objDefaultMaterial = defaultMaterial;
  268. const mesh = meshes[ i ];
  269. const vertices = new Float32BufferAttribute( mesh.vertices, 3 );
  270. let normals = null;
  271. if ( mesh.normals.length ) {
  272. normals = new Float32BufferAttribute( mesh.normals, 3 );
  273. }
  274. if ( mesh.color ) {
  275. const color = mesh.color;
  276. objDefaultMaterial = defaultMaterial.clone();
  277. objDefaultMaterial.color = new Color( color.r, color.g, color.b );
  278. if ( color.a !== 1.0 ) {
  279. objDefaultMaterial.transparent = true;
  280. objDefaultMaterial.opacity = color.a;
  281. }
  282. }
  283. const volumes = mesh.volumes;
  284. for ( j = 0; j < volumes.length; j ++ ) {
  285. const volume = volumes[ j ];
  286. const newGeometry = new BufferGeometry();
  287. let material = objDefaultMaterial;
  288. newGeometry.setIndex( volume.triangles );
  289. newGeometry.setAttribute( 'position', vertices.clone() );
  290. if ( normals ) {
  291. newGeometry.setAttribute( 'normal', normals.clone() );
  292. }
  293. if ( amfMaterials[ volume.materialId ] !== undefined ) {
  294. material = amfMaterials[ volume.materialId ];
  295. }
  296. newGeometry.scale( amfScale, amfScale, amfScale );
  297. newObject.add( new Mesh( newGeometry, material.clone() ) );
  298. }
  299. }
  300. sceneObject.add( newObject );
  301. }
  302. return sceneObject;
  303. }
  304. }
  305. export { AMFLoader };