ColladaLoader2.js 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958
  1. /**
  2. * @author mrdoob / http://mrdoob.com/
  3. */
  4. THREE.ColladaLoader = function ( manager ) {
  5. this.manager = ( manager !== undefined ) ? manager : THREE.DefaultLoadingManager;
  6. };
  7. THREE.ColladaLoader.prototype = {
  8. constructor: THREE.ColladaLoader,
  9. load: function ( url, onLoad, onProgress, onError ) {
  10. function getBaseUrl( url ) {
  11. var parts = url.split( '/' );
  12. parts.pop();
  13. return ( parts.length < 1 ? '.' : parts.join( '/' ) ) + '/';
  14. }
  15. var scope = this;
  16. var loader = new THREE.XHRLoader( scope.manager );
  17. loader.load( url, function ( text ) {
  18. onLoad( scope.parse( text, getBaseUrl( url ) ) );
  19. }, onProgress, onError );
  20. },
  21. options: {
  22. set convertUpAxis ( value ) {
  23. console.log( 'ColladaLoder.options.convertUpAxis: TODO' );
  24. }
  25. },
  26. setCrossOrigin: function ( value ) {
  27. this.crossOrigin = value;
  28. },
  29. parse: function ( text, baseUrl ) {
  30. function getElementsByTagName( xml, name ) {
  31. // Non recursive xml.getElementsByTagName() ...
  32. var array = [];
  33. var childNodes = xml.childNodes;
  34. for ( var i = 0, l = childNodes.length; i < l; i ++ ) {
  35. var child = childNodes[ i ];
  36. if ( child.nodeName === name ) {
  37. array.push( child );
  38. }
  39. }
  40. return array;
  41. }
  42. function parseFloats( text ) {
  43. var parts = text.trim().split( /\s+/ );
  44. var array = new Array( parts.length );
  45. for ( var i = 0, l = parts.length; i < l; i ++ ) {
  46. array[ i ] = parseFloat( parts[ i ] );
  47. }
  48. return array;
  49. }
  50. function parseInts( text ) {
  51. var parts = text.trim().split( /\s+/ );
  52. var array = new Array( parts.length );
  53. for ( var i = 0, l = parts.length; i < l; i ++ ) {
  54. array[ i ] = parseInt( parts[ i ] );
  55. }
  56. return array;
  57. }
  58. function parseId( text ) {
  59. return text.substring( 1 );
  60. }
  61. // asset
  62. function parseAsset( xml ) {
  63. return {
  64. upAxis: parseAssetUpAxis( getElementsByTagName( xml, 'up_axis' )[ 0 ] )
  65. };
  66. }
  67. function parseAssetUpAxis( xml ) {
  68. return xml !== undefined ? xml.textContent : 'Y_UP';
  69. }
  70. // library
  71. function parseLibrary( xml, data, libraryName, nodeName, parser ) {
  72. var library = getElementsByTagName( xml, libraryName )[ 0 ];
  73. if ( library !== undefined ) {
  74. var elements = getElementsByTagName( library, nodeName );
  75. for ( var i = 0; i < elements.length; i ++ ) {
  76. parser( elements[ i ] );
  77. }
  78. }
  79. }
  80. function buildLibrary( data, builder ) {
  81. for ( var name in data ) {
  82. var object = data[ name ];
  83. object.build = builder( data[ name ] );
  84. }
  85. }
  86. // get
  87. function getBuild( data, builder ) {
  88. if ( data.build !== undefined ) return data.build;
  89. data.build = builder( data );
  90. return data.build;
  91. }
  92. // image
  93. var imageLoader = new THREE.ImageLoader();
  94. function parseImage( xml ) {
  95. var data = {
  96. url: getElementsByTagName( xml, 'init_from' )[ 0 ].textContent
  97. };
  98. library.images[ xml.getAttribute( 'id' ) ] = data;
  99. }
  100. function buildImage( data ) {
  101. if ( data.build !== undefined ) return data.build;
  102. var url = data.url;
  103. if ( baseUrl !== undefined ) url = baseUrl + url;
  104. return imageLoader.load( url );
  105. }
  106. function getImage( id ) {
  107. return getBuild( library.images[ id ], buildImage );
  108. }
  109. // effect
  110. function parseEffect( xml ) {
  111. }
  112. function buildEffect( data ) {
  113. }
  114. function getEffect( id ) {
  115. return getBuild( library.effects[ id ], buildEffect );
  116. }
  117. // camera
  118. function parseCamera( xml ) {
  119. var data = {
  120. name: xml.getAttribute( 'name' )
  121. };
  122. library.cameras[ xml.getAttribute( 'id' ) ] = {};
  123. }
  124. function buildCamera( data ) {
  125. var camera = new THREE.PerspectiveCamera();
  126. camera.name = data.name;
  127. return camera;
  128. }
  129. function getCamera( id ) {
  130. return getBuild( library.cameras[ id ], buildCamera );
  131. }
  132. // light
  133. function parseLight( xml ) {
  134. var data = {};
  135. for ( var i = 0, l = xml.childNodes.length; i < l; i ++ ) {
  136. var child = xml.childNodes[ i ];
  137. if ( child.nodeType !== 1 ) continue;
  138. switch ( child.nodeName ) {
  139. case 'technique_common':
  140. data = parseLightTechnique( child );
  141. break;
  142. }
  143. }
  144. library.lights[ xml.getAttribute( 'id' ) ] = data;
  145. }
  146. function parseLightTechnique( xml ) {
  147. var data = {};
  148. for ( var i = 0, l = xml.childNodes.length; i < l; i ++ ) {
  149. var child = xml.childNodes[ i ];
  150. if ( child.nodeType !== 1 ) continue;
  151. switch ( child.nodeName ) {
  152. case 'directional':
  153. case 'point':
  154. case 'spot':
  155. case 'ambient':
  156. data.technique = child.nodeName;
  157. data.parameters = parseLightParameters( child );
  158. }
  159. }
  160. return data;
  161. }
  162. function parseLightParameters( xml ) {
  163. var data = {};
  164. for ( var i = 0, l = xml.childNodes.length; i < l; i ++ ) {
  165. var child = xml.childNodes[ i ];
  166. if ( child.nodeType !== 1 ) continue;
  167. switch ( child.nodeName ) {
  168. case 'color':
  169. var array = parseFloats( child.textContent );
  170. data.color = new THREE.Color().fromArray( array );
  171. break;
  172. case 'falloff_angle':
  173. data.falloffAngle = parseFloat( child.textContent );
  174. break;
  175. case 'quadratic_attenuation':
  176. var f = parseFloat( child.textContent );
  177. data.distance = f ? Math.sqrt( 1 / f ) : 0;
  178. break;
  179. }
  180. }
  181. return data;
  182. }
  183. function buildLight( data ) {
  184. var light;
  185. switch ( data.technique ) {
  186. case 'directional':
  187. light = new THREE.DirectionalLight();
  188. break;
  189. case 'point':
  190. light = new THREE.PointLight();
  191. break;
  192. case 'spot':
  193. light = new THREE.SpotLight();
  194. break;
  195. case 'ambient':
  196. light = new THREE.AmbientLight();
  197. break;
  198. }
  199. if ( data.parameters.color ) light.color.copy( data.parameters.color );
  200. if ( data.parameters.distance ) light.distance = data.parameters.distance;
  201. return light;
  202. }
  203. function getLight( id ) {
  204. return getBuild( library.lights[ id ], buildLight );
  205. }
  206. // geometry
  207. function parseSource( xml ) {
  208. var data = {
  209. array: [],
  210. stride: 3
  211. };
  212. for ( var i = 0; i < xml.childNodes.length; i ++ ) {
  213. var child = xml.childNodes[ i ];
  214. if ( child.nodeType !== 1 ) continue;
  215. switch ( child.nodeName ) {
  216. case 'float_array':
  217. data.array = parseFloats( child.textContent );
  218. break;
  219. case 'technique_common':
  220. var accessor = getElementsByTagName( child, 'accessor' )[ 0 ];
  221. if ( accessor !== undefined ) {
  222. data.stride = parseInt( accessor.getAttribute( 'stride' ) );
  223. }
  224. break;
  225. default:
  226. console.log( child );
  227. }
  228. }
  229. return data;
  230. }
  231. function parseGeometry( xml ) {
  232. var data = {
  233. name: xml.getAttribute( 'name' ),
  234. sources: {},
  235. primitives: []
  236. };
  237. var mesh = getElementsByTagName( xml, 'mesh' )[ 0 ];
  238. for ( var i = 0; i < mesh.childNodes.length; i ++ ) {
  239. var child = mesh.childNodes[ i ];
  240. if ( child.nodeType !== 1 ) continue;
  241. var id = child.getAttribute( 'id' );
  242. switch ( child.nodeName ) {
  243. case 'source':
  244. data.sources[ id ] = parseSource( child );
  245. break;
  246. case 'vertices':
  247. data.sources[ id ] = data.sources[ parseId( getElementsByTagName( child, 'input' )[ 0 ].getAttribute( 'source' ) ) ];
  248. break;
  249. case 'polygons':
  250. console.log( 'ColladaLoader: Unsupported primitive type: ', child.nodeName );
  251. break;
  252. case 'lines':
  253. case 'linestrips':
  254. case 'polylist':
  255. case 'triangles':
  256. data.primitives.push( parseGeometryPrimitive( child ) );
  257. break;
  258. default:
  259. console.log( child );
  260. }
  261. }
  262. library.geometries[ xml.getAttribute( 'id' ) ] = data;
  263. }
  264. function parseGeometryPrimitive( xml ) {
  265. var primitive = {
  266. type: xml.nodeName,
  267. inputs: {},
  268. stride: 0
  269. };
  270. for ( var i = 0, l = xml.childNodes.length; i < l; i ++ ) {
  271. var child = xml.childNodes[ i ];
  272. if ( child.nodeType !== 1 ) continue;
  273. switch ( child.nodeName ) {
  274. case 'input':
  275. var id = parseId( child.getAttribute( 'source' ) );
  276. var semantic = child.getAttribute( 'semantic' );
  277. var offset = parseInt( child.getAttribute( 'offset' ) );
  278. primitive.inputs[ semantic ] = { id: id, offset: offset };
  279. primitive.stride = Math.max( primitive.stride, offset + 1 );
  280. break;
  281. case 'vcount':
  282. primitive.vcount = parseInts( child.textContent );
  283. break;
  284. case 'p':
  285. primitive.p = parseInts( child.textContent );
  286. break;
  287. }
  288. }
  289. return primitive;
  290. }
  291. var DEFAULT_MATERIAL = new THREE.MeshPhongMaterial();
  292. function buildGeometry( data ) {
  293. var group = new THREE.Group();
  294. var sources = data.sources;
  295. var primitives = data.primitives;
  296. if ( primitives.length === 0 ) return group;
  297. for ( var p = 0; p < primitives.length; p ++ ) {
  298. var primitive = primitives[ p ];
  299. var inputs = primitive.inputs;
  300. var stride = primitive.stride;
  301. var vcount = primitive.vcount;
  302. var indices = primitive.p;
  303. var vcount = primitive.vcount;
  304. var maxcount = 0;
  305. var geometry = new THREE.BufferGeometry();
  306. if ( data.name ) geometry.name = data.name;
  307. for ( var name in inputs ) {
  308. var input = inputs[ name ];
  309. var source = sources[ input.id ];
  310. var sourceArray = source.array;
  311. var sourceStride = source.stride;
  312. var offset = input.offset;
  313. var array = [];
  314. function pushVector( i ) {
  315. var index = indices[ i + offset ] * sourceStride;
  316. if ( asset.upAxis === 'Z_UP' ) {
  317. array.push( sourceArray[ index + 0 ], sourceArray[ index + 2 ], - sourceArray[ index + 1 ] );
  318. } else {
  319. array.push( sourceArray[ index + 0 ], sourceArray[ index + 1 ], sourceArray[ index + 2 ] );
  320. }
  321. }
  322. if ( primitive.vcount !== undefined ) {
  323. var index = 0;
  324. for ( var i = 0, l = vcount.length; i < l; i ++ ) {
  325. var count = vcount[ i ];
  326. if ( count === 4 ) {
  327. var a = index + stride * 0;
  328. var b = index + stride * 1;
  329. var c = index + stride * 2;
  330. var d = index + stride * 3;
  331. pushVector( a ); pushVector( b ); pushVector( d );
  332. pushVector( b ); pushVector( c ); pushVector( d );
  333. } else if ( count === 3 ) {
  334. var a = index + stride * 0;
  335. var b = index + stride * 1;
  336. var c = index + stride * 2;
  337. pushVector( a ); pushVector( b ); pushVector( c );
  338. } else {
  339. maxcount = Math.max( maxcount, count );
  340. }
  341. index += stride * count;
  342. }
  343. } else {
  344. for ( var i = 0, l = indices.length; i < l; i += stride ) {
  345. pushVector( i );
  346. }
  347. }
  348. switch ( name ) {
  349. case 'VERTEX':
  350. geometry.addAttribute( 'position', new THREE.Float32Attribute( array, 3 ) );
  351. break;
  352. case 'COLOR':
  353. geometry.addAttribute( 'color', new THREE.Float32Attribute( array, 3 ) );
  354. break;
  355. case 'NORMAL':
  356. geometry.addAttribute( 'normal', new THREE.Float32Attribute( array, 3 ) );
  357. break;
  358. }
  359. }
  360. if ( maxcount > 0 ) {
  361. console.log( 'ColladaLoader: Geometry', data.id, 'has faces with more than 4 vertices.' );
  362. }
  363. switch ( primitive.type ) {
  364. case 'lines':
  365. group.add( new THREE.LineSegments( geometry ) );
  366. break;
  367. case 'linestrips':
  368. group.add( new THREE.Line( geometry ) );
  369. break;
  370. case 'triangles':
  371. case 'polylist':
  372. var material = DEFAULT_MATERIAL;
  373. if ( geometry.attributes.color !== undefined ) {
  374. // Temporal Workaround for EXTW models
  375. material = new THREE.MeshBasicMaterial( {
  376. vertexColors: THREE.VertexColors
  377. } );
  378. }
  379. group.add( new THREE.Mesh( geometry, material ) );
  380. break;
  381. }
  382. }
  383. // flatten
  384. if ( group.children.length === 1 ) {
  385. return group.children[ 0 ];
  386. }
  387. return group;
  388. }
  389. function getGeometry( id ) {
  390. return getBuild( library.geometries[ id ], buildGeometry );
  391. }
  392. // nodes
  393. var matrix = new THREE.Matrix4();
  394. var vector = new THREE.Vector3();
  395. function parseNode( xml ) {
  396. var data = {
  397. name: xml.getAttribute( 'name' ),
  398. matrix: new THREE.Matrix4(),
  399. nodes: [],
  400. instanceCameras: [],
  401. instanceLights: [],
  402. instanceGeometries: [],
  403. instanceNodes: []
  404. };
  405. for ( var i = 0; i < xml.childNodes.length; i ++ ) {
  406. var child = xml.childNodes[ i ];
  407. if ( child.nodeType !== 1 ) continue;
  408. switch ( child.nodeName ) {
  409. case 'node':
  410. parseNode( child );
  411. data.nodes.push( child.getAttribute( 'id' ) );
  412. break;
  413. case 'instance_camera':
  414. data.instanceCameras.push( parseId( child.getAttribute( 'url' ) ) );
  415. break;
  416. case 'instance_light':
  417. data.instanceLights.push( parseId( child.getAttribute( 'url' ) ) );
  418. break;
  419. case 'instance_geometry':
  420. data.instanceGeometries.push( parseId( child.getAttribute( 'url' ) ) );
  421. break;
  422. case 'instance_node':
  423. data.instanceNodes.push( parseId( child.getAttribute( 'url' ) ) );
  424. break;
  425. case 'matrix':
  426. var array = parseFloats( child.textContent );
  427. data.matrix.multiply( matrix.fromArray( array ).transpose() ); // .transpose() when Z_UP?
  428. break;
  429. case 'translate':
  430. var array = parseFloats( child.textContent );
  431. vector.fromArray( array );
  432. data.matrix.multiply( matrix.makeTranslation( vector.x, vector.y, vector.z ) );
  433. break;
  434. case 'rotate':
  435. var array = parseFloats( child.textContent );
  436. var angle = THREE.Math.degToRad( array[ 3 ] );
  437. data.matrix.multiply( matrix.makeRotationAxis( vector.fromArray( array ), angle ) );
  438. break;
  439. case 'scale':
  440. var array = parseFloats( child.textContent );
  441. data.matrix.scale( vector.fromArray( array ) );
  442. break;
  443. case 'extra':
  444. break;
  445. default:
  446. console.log( child );
  447. }
  448. }
  449. if ( xml.getAttribute( 'id' ) !== null ) {
  450. library.nodes[ xml.getAttribute( 'id' ) ] = data;
  451. }
  452. return data;
  453. }
  454. function buildNode( data ) {
  455. var objects = [];
  456. var matrix = data.matrix;
  457. var nodes = data.nodes;
  458. var instanceCameras = data.instanceCameras;
  459. var instanceLights = data.instanceLights;
  460. var instanceGeometries = data.instanceGeometries;
  461. var instanceNodes = data.instanceNodes;
  462. for ( var i = 0, l = nodes.length; i < l; i ++ ) {
  463. objects.push( getNode( nodes[ i ] ).clone() );
  464. }
  465. for ( var i = 0, l = instanceCameras.length; i < l; i ++ ) {
  466. objects.push( getCamera( instanceCameras[ i ] ).clone() );
  467. }
  468. for ( var i = 0, l = instanceLights.length; i < l; i ++ ) {
  469. objects.push( getLight( instanceLights[ i ] ).clone() );
  470. }
  471. for ( var i = 0, l = instanceGeometries.length; i < l; i ++ ) {
  472. objects.push( getGeometry( instanceGeometries[ i ] ).clone() );
  473. }
  474. for ( var i = 0, l = instanceNodes.length; i < l; i ++ ) {
  475. objects.push( getNode( instanceNodes[ i ] ).clone() );
  476. }
  477. var object;
  478. if ( objects.length === 1 ) {
  479. object = objects[ 0 ];
  480. } else {
  481. object = new THREE.Group();
  482. for ( var i = 0; i < objects.length; i ++ ) {
  483. object.add( objects[ i ] );
  484. }
  485. }
  486. object.name = data.name;
  487. matrix.decompose( object.position, object.quaternion, object.scale );
  488. return object;
  489. }
  490. function getNode( id ) {
  491. return getBuild( library.nodes[ id ], buildNode );
  492. }
  493. // visual scenes
  494. function parseVisualScene( xml ) {
  495. var data = {
  496. name: xml.getAttribute( 'name' ),
  497. children: []
  498. };
  499. var elements = getElementsByTagName( xml, 'node' );
  500. for ( var i = 0; i < elements.length; i ++ ) {
  501. data.children.push( parseNode( elements[ i ] ) );
  502. }
  503. library.visualScenes[ xml.getAttribute( 'id' ) ] = data;
  504. }
  505. function buildVisualScene( data ) {
  506. var group = new THREE.Group();
  507. group.name = data.name;
  508. var children = data.children;
  509. for ( var i = 0; i < children.length; i ++ ) {
  510. group.add( buildNode( children[ i ] ) );
  511. }
  512. return group;
  513. }
  514. function getVisualScene( id ) {
  515. return getBuild( library.visualScenes[ id ], buildVisualScene );
  516. }
  517. // scenes
  518. function parseScene( xml ) {
  519. var instance = getElementsByTagName( xml, 'instance_visual_scene' )[ 0 ];
  520. return getVisualScene( parseId( instance.getAttribute( 'url' ) ) );
  521. }
  522. console.time( 'ColladaLoader' );
  523. console.time( 'ColladaLoader: DOMParser' );
  524. var xml = new DOMParser().parseFromString( text, 'application/xml' );
  525. console.timeEnd( 'ColladaLoader: DOMParser' );
  526. var collada = getElementsByTagName( xml, 'COLLADA' )[ 0 ];
  527. // metadata
  528. var version = collada.getAttribute( 'version' );
  529. console.log( 'ColladaLoader: File version', version );
  530. var asset = parseAsset( getElementsByTagName( collada, 'asset' )[ 0 ] );
  531. //
  532. var library = {
  533. images: {},
  534. // effects: {},
  535. cameras: {},
  536. lights: {},
  537. geometries: {},
  538. nodes: {},
  539. visualScenes: {}
  540. };
  541. console.time( 'ColladaLoader: Parse' );
  542. parseLibrary( collada, library.images, 'library_images', 'image', parseImage );
  543. // parseLibrary( collada, library.effects, 'library_effects', 'effect', parseEffect );
  544. parseLibrary( collada, library.cameras, 'library_cameras', 'camera', parseCamera );
  545. parseLibrary( collada, library.lights, 'library_lights', 'light', parseLight );
  546. parseLibrary( collada, library.geometries, 'library_geometries', 'geometry', parseGeometry );
  547. parseLibrary( collada, library.nodes, 'library_nodes', 'node', parseNode );
  548. parseLibrary( collada, library.visualScenes, 'library_visual_scenes', 'visual_scene', parseVisualScene );
  549. console.timeEnd( 'ColladaLoader: Parse' );
  550. console.time( 'ColladaLoader: Build' );
  551. // buildLibrary( library.images, buildImage );
  552. // buildLibrary( library.effects, buildEffect );
  553. buildLibrary( library.cameras, buildCamera );
  554. buildLibrary( library.lights, buildLight );
  555. buildLibrary( library.geometries, buildGeometry );
  556. buildLibrary( library.nodes, buildNode );
  557. buildLibrary( library.visualScenes, buildVisualScene );
  558. console.timeEnd( 'ColladaLoader: Build' );
  559. // console.log( library );
  560. var scene = parseScene( getElementsByTagName( collada, 'scene' )[ 0 ] );
  561. console.timeEnd( 'ColladaLoader' );
  562. // console.log( scene );
  563. return {
  564. animations: [],
  565. kinematics: { joints: [] },
  566. scene: scene
  567. };
  568. }
  569. };