Skip to content

Collada model does not load #1731

arcanis opened this Issue Apr 15, 2012 · 12 comments

4 participants

arcanis commented Apr 15, 2012


I'm trying to display a collada model, but I can't load it with Three.js.

I succeed to load the same file in blender, and I'm able to load monster.dae.
I'm also able to load the file using the obj2js script, but I lose all of the animation data.

Test repository (with failing collada file):

Am I missing something ?


mrdoob commented Apr 15, 2012

Uhm... It doesn't show up here either. Tried scaling it up and down to make sure it wasn't just out of view but no luck.
@AddictArts any ideas?


So, I took a look and it makes it harder when there are no errors :( It appears not to be a mesh geometry issue. I added a light and changed where the camera was looking. The model is z-up and Three.js is y-up so you wanted to put yourself out on the negative y axis not z. So, after the light and camera position change I was still not seeing anything. So, I changed the materials out. I also noticed Blender was not rendering any textures either. With the code below you can now see it. I am inclined to think there is a texture issue in the dae file or the ColladaLoader.

(function (Three) {

    var renderer = new Three.WebGLRenderer();
        // ...

    var scene = new Three.Scene();
    scene.add(new Three.AxisHelper());

    var camera = new Three.PerspectiveCamera(60, 1, .1, 10000);
    camera.position.set( 0, -1290, 0 );

    camera.lookAt(new Three.Vector3(0, 0, 0));

    pointLight = new Three.PointLight( 0xffffff, 1.75 );
    pointLight.position = camera.position;

    scene.add( pointLight );

        var loader = new Three.ColladaLoader();
        loader.convertUpAxis = true;
        loader.load('export.dae', function (collada) {

            var hlMaterial = new THREE.MeshPhongMaterial( { color: 0x750004 } );

            function hl (o3d) {

                var children = o3d.children,
                    geometry = o3d.geometry;

                for ( var i = 0, il = children.length; i < il; i++ ) {
                    hl( children[ i ] );

                if ( geometry ) o3d.material = hlMaterial;


            hl( collada.scene );


    (function animate() {
        renderer.render(scene, camera);

    // ...


I see it now or am fairly sure what the issue is. The ColladaLoader does not handle texture coordinates (uv map), input semantic "TEXCOORD", in the vertices element. I think this is a per vertex map vs an indexed map. The normals are also per vertex and not indexed. The only thing indexed is the vertices with the primitives being triangles.

This should not be too hard to fix somewhere in the mesh handlePrimitive function. Unfortunately you cannot manually fix the dae file easily. Probably easier to patch the ColladaLoader. If I can make a shameless plug, using the Kuda projects's, runs on Three.js, World Editor is a great way to troubleshoot these issues. I dropped the COLLADA file into place and loaded it making it easy to figure camera and light positions. Selecting "shapes" helped me see it.

mrdoob commented Apr 17, 2012

You mean you dragn'dropped the .dae file here?

mrdoob commented Apr 17, 2012

By the way, you can also use this code:

THREE.SceneUtils.traverseHierarchy( collada.scene, function ( object ) { 

    if ( object.material ) {

        object.material = new THREE.MeshBasicMaterial( { wireframe: true } );


} );

This shows that the model is there, but something is wrong with the material indeed.

arcanis commented Apr 17, 2012

I see it too using a wireframe material.

But does it means that blender collada support is partial ?
(edit) sounds like


@mrdoob It is not a drag and drop operation. Should add support for that, but it would need to handle a zip file. There is an import function that is not working right in the latest version. I run the project from a clone using nodejs. Drop the COLLADA and the textures into the public/assets directory.

Thanks for pointing out the SceneUtils function, did not know about that :-)

@arcanis It could mean blender as well does not support from a COLLADA import per vertex texture coordinates. Maybe I should note that as non-indexed texture coordinates. The spec allows for it. It is nice to have an example file that uses it.

I did a quick test and that appears to be the issue, looking at what a fix will take, might not be much.


Thanks @mrdoob for pointing out that my issue (#1638) appears to be the same thing as this one. And thank you to everyone for looking into this.

Interestingly, if I take my COLLADA model and export it as Three.js JSON format, I still get the same error with the JSONLoader:

"GL_INVALID_OPERATION: glDrawXXX: attempt to access out of range vertices"

So, could this be a wider issue than just the COLLADA loader?

I was also able to replicate it with the monster model from the Three.js example. I imported it into Blender, decimated it to reduce poly count and re-exported it in JSON format. Here are the files, if it's useful to take a look:

Doesn't work:


I believe I have this fixed in this branch if you want to check it out. My testing has it working,

I added support for mesh vertices input source (non indexed in geometric primitive) texture coordinates,TEXCOORD, and color. Threw in COLOR just in case that every comes up. I don't have an example, but it is an allowed input semantic in vertices.


The specular is full on in export.dae, I dialed it back to 0.2.


When I mentioned above per vertex texture coordinates, sounds wrong, what I meant is non indexed texture coordinates. COLLADA lets you do either. What I have seen the most of is indexes for position, normal, texture coordinates, color, tangents in the primitive element, triangles, polylist, polygons, etc. Of course the texture coordinates are per vertex the difference in export.dae is that they don't have indexes, they just match up with their vertex.

mrdoob commented Apr 19, 2012

#1767 fixes this.

@mrdoob mrdoob closed this Apr 19, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.