ColladaLoader2.js 17 KB

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