CODEWITHSUNDEEP
javascriptthree.jsxmlhttprequestcollada
jadraptor
jadraptor

Reputation: 55

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

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.

Upvotes: 1

Views: 1432

Answers (2)

jadraptor
jadraptor

Reputation: 55

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.

Upvotes: 0

Don McCurdy
Don McCurdy

Reputation: 11960

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:

screenshot of raptor model

Upvotes: 1

Related Questions