Why can't ColladaLoader.js from Three.js load my file?

Question

So, I'm trying out three.js and I'm trying to load a .dae file that I found and downloaded from Ark Survival Evolved (Raptor.dae).

I cobbled together an html page to create a webgl scene with the raptor file, two lights, and a floor; and I cobbled together a flask server to serve the html and assets (Opening the html directly from windows explorer would cause a cross origin error that I couldn't figure out how to fix, so I made the web server).

I know that everything works, right up until it tries to load this specific file because I can get the demo elf that three.js comes with to be served correctly.

Here's the section of code where the raptor file is loaded.

var raptor
// loading manager
var loadingManager = new THREE.LoadingManager( function() {
    scene.add( raptor );
} );
// collada
var loader = new THREE.ColladaLoader( loadingManager );
loader.load( './static/models/Raptor/Raptor.dae', function ( collada ) {
    raptor = collada.scene;
    raptor.scale.set(0.1,0.1,0.1);
} );
loader.setCrossOrigin( '' );

Here's the error I get.

Navigated to http://127.0.0.1:5000/raptor
THREE.WebGLRenderer 89
THREE.ColladaLoader: DOMParser: 4.136962890625ms
XHR finished loading: GET "http://127.0.0.1:5000/static/models/Raptor/Raptor.dae".
    load @ three.js:30874
    load @ ColladaLoader.js:25
    (anonymous) @ raptor:47
THREE.ColladaLoader: File version 1.4.1
THREE.ColladaLoader: Parse: 0.06298828125ms
THREE.ColladaLoader: Build: 0.06689453125ms
Uncaught TypeError: Cannot read property 'childNodes' of undefined
    at getElementsByTagName (ColladaLoader.js:62)
    at parseScene (ColladaLoader.js:3333)
    at THREE.ColladaLoader.parse (ColladaLoader.js:3463)
    at Object.onLoad (ColladaLoader.js:27)
    at XMLHttpRequest.<anonymous> (three.js:30794)
getElementsByTagName @ ColladaLoader.js:62
parseScene @ ColladaLoader.js:3333
parse @ ColladaLoader.js:3463
(anonymous) @ ColladaLoader.js:27
(anonymous) @ three.js:30794
XMLHttpRequest.send (async)
    load @ three.js:30874
    load @ ColladaLoader.js:25
    (anonymous) @ raptor:47

Here's links to the two files mentioned in the error.

three.js

ColladaLoader.js

elf.dae in three.js repository

Raptor.dae on Google Drive

I'm at a loss for what the difference between this file and the elf file is. I've opened both in Notepad++ and read through them, but I haven't figured out what exactly is causing the hang up.

Any help or guidance would be greatly appreciated.

Answer 1

Your COLLADA model loads correctly in Blender, so I would assume this is a bug in THREE.ColladaLoader. You may want to file an issue on the three.js repository including this information.

In the meantime, converting to glTF using a blender exporter gives a result that does work in three.js, using THREE.GLTFLoader.

glTF file in Google Drive

Preview here: https://gltf-viewer.donmccurdy.com/

Result:

Answer 2

It turned out to be a bug in the script. It wasn't parsing the xml data quite right. It would set the top most bone to "ID8" instead of "ID9". "ID8" pointed to the visual scene.