How to load referenced COLLADA files in ThreeJs

Question

I want to load collada files from an export. The files are exported in such a way, that the "base" file references another collada file with the actual geometry.

The base file looks like that:

<?xml version="1.0" encoding="utf-8"?>
<COLLADA version="1.5.0" xmlns="http://www.collada.org/2008/03/COLLADASchema">
  <asset>
    <contributor>
      <author>ACME</author>
    </contributor>
    <created>2016-04-27T14:53:24</created>
    <modified>2016-04-27T14:53:24</modified>
    <unit meter="0.001" name="mm" />
    <up_axis>Z_UP</up_axis>
  </asset>
  <library_visual_scenes id="libvisualscenes">
    <visual_scene id="libvisualscenes.scene">
      <node id="38760" name="Part1_CATPart">
        <matrix>-1.000000 0.000000 0.000000 -399.679153 0.000000 0.000000 -1.000000 671.000000 0.000000 -1.000000 0.000000 0.000000 0.000000 0.000000 0.000000 1.000000</matrix>
        <instance_node url="Part1_CATPart_799.dae#acme_frame_self_origin" />
      </node>
    </visual_scene>
  </library_visual_scenes>
  <scene>
    <instance_visual_scene url="#libvisualscenes.scene" />
  </scene>
</COLLADA>

Part1_CATPart is referenced in the collada above. I tried the naive approach and loaded this collada using the ColladaLoader2.js, but this led to the error ColladaLoader2.js:175 Uncaught TypeError: Cannot read property 'build' of undefined. Loading Part1_CATPart directly works. However, this way does not take the matrix of the base file into account.

Is there a method to make threejs` colladaLoader2 fetch the referenced files?

Wilt Wilt · Accepted Answer · 2016-05-18T08:44:12

I believe the url is parsed here on line 2326 in the parse method. Normally the url points to another node intenally. You can get the url in the if clause like this:

if ( iNode ) 
    this.nodes.push( ( new Node() ).parse( iNode )) ;
}else{
    url = url.split("#")[0]
    console.log(url);
}

Then you could use the url to load the child model and to add it to the scene in an onload callback:

var loader = new THREE.ColladaLoader();
var result = loader.load(url);
var scene = result.scene;

var name, model, children = scene.children;
var onLoad = function( result ){
    // process the result of each child model and add to parent scene
};
var onProgress = function(){};
loader.load( url, onLoad, onProgress );

Here is a fiddle with a demo

The fiddle only outputs the url. Loading it correctly I leave up to you.

How to load referenced COLLADA files in ThreeJs

1 Answers