Recently, I decided to experiment with three.js and wanted to load a .dae file called Raptor.dae that I obtained from Ark Survival Evolved. Despite having some web development knowledge, I encountered an issue when trying to display this particular file in a WebGL scene on my HTML page.
To remedy the cross-origin error preventing me from directly opening the HTML file, I set up a flask server to serve the assets. Everything seemed to be working fine until I attempted to load the Raptor.dae file, unlike the demo elf file which loaded successfully.
The problematic section of code where the Raptor file is supposed to be loaded is as follows:
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( '' );
This led to the following error message:
Navigated to http://127.0.0.1:5000/raptor
THREE.WebGLRenderer 89
THREE.ColladaLoader: DOMParser: 4.136962890625ms
...
Uncaught TypeError: Cannot read property 'childNodes' of undefined
...
If you want to take a closer look at these files mentioned in the error, here are the links:
elf.dae in three.js repository
Raptor.dae on Google Drive
I've compared the Raptor.dae and elf.dae files, but couldn't pinpoint what's causing the issue. Any assistance would be highly appreciated.