javascript - Unable to load textured Collada exported from blender using Three.js -

i using three.js, version 71. i'm using blender, version 2.73.

i created textured collada object (.dae file) using blender, , want load three.js scene. far, can load models exported blender have no textures on them.

here how create textured collada object:
in blender, use default cube. using settings on right, add texture cube. here texture putting onto cube (note: 2048 x 2048, it's power of 2):

here image of cube in render mode prove texture on it:

here export settings used when exported cube collada blender:

here code used try load textured collada:

var loader = new three.colladaloader(); var localobject; loader.options.convertupaxis = true; loader.load( './models/test_texture.dae', function ( collada ) {   localobject = collada.scene;   localobject.scale.x = localobject.scale.y = localobject.scale.z = 32;   localobject.updatematrix();   game.scene.add(localobject); } ); 

here error got:

[.webglrenderingcontext]gl error :gl_invalid_operation : gldrawelements: attempt access out of range vertices in attribute 2 

i googled error message , said need compute tangents. here attempts @ , errors got:

var loader = new three.colladaloader(); var localobject; loader.options.convertupaxis = true; loader.load( './models/test_texture.dae', function ( collada ) {   localobject = collada.scene;   localobject.scale.x = localobject.scale.y = localobject.scale.z = 32;   localobject.updatematrix();    (var = collada.scene.children.length - 1; >= 0; i--) {     var child = collada.scene.children[i];      // child.children[0] give three.mesh of collada     if ( child.colladaid == "cube" ) {        // attempt 1: tried computing tangets based on answer neoriley here: http://stackoverflow.com/questions/21200386/webgl-gl-error-gl-invalid-operation-gldrawelements-attempt-to-access-out-of       // child.children[0].geometry.computetangents();        // attempt 2: got suggestion popov here: http://stackoverflow.com/questions/15717468/three-lod-and-normalmap-shader-fail       // child.children[0].geometry[ 0 ][ 0 ].computetangents();       // child.children[0].geometry[ 1 ][ 0 ].computetangents();        // attempt 3: tried setting update flags based on answer sayris here: http://stackoverflow.com/questions/13988615/webglrenderingcontext-error-loading-texture-maps       // child.children[0].geometry.buffersneedupdate = true;       // child.children[0].geometry.uvsneedupdate = true;       // child.children[0].material.needsupdate = true;       // child.children[0].geometry.computetangents();     }   };   game.scene.add(localobject); } ); 

attempt 1 error:

uncaught typeerror: cannot read property '0' of undefined // stack trace three.js:9935 handletriangle three.js:9974 three.geometry.computetangents mycode.js:116 (anonymous function) colladaloader.js:204 parse colladaloader.js:84 request.onreadystatechange 

attempt 2 error:

uncaught typeerror: cannot read property '0' of undefined 

this came own code. didn't think geometry of three.mesh 2 dimensional, tried anyway.

attempt 3 error: (same attempt 1 error)

uncaught typeerror: cannot read property '0' of undefined // stack trace three.js:9935 handletriangle three.js:9974 three.geometry.computetangents mycode.js:116 (anonymous function) colladaloader.js:204 parse colladaloader.js:84 request.onreadystatechange 

i decided use json loader instead because couldn't collada 1 work. first thing did install json exporter addon blender. got addon .zip file three.js download. it's in three.js-r71/utils/exporters/blender/addons , it's called io_three. need copy folder , paste in blender installation directory in blender foundation/blender/2.73/scripts/addons.

you have enable in blender. that:

1. click file->user preferences...
2. click add-ons
3. type three in search field
4. all way right, click check box enable it
5. at bottom left, click save user settings don't need again. you'll know it's working if see three.js (.json) when click file->export.

i followed of instructions site me create , export model: http://graphic-sim.com/b_basic_export.html

here steps used create , export model (i tweaked them little bit site)

1. start blender.
2. look @ properties editor (on right).
3. press world context button. in world panel click ambient color , change black middle gray.
4. press material context button. on diffuse panel change intensity 1.0. same on specular panel. in shading panel put check in shadeless box.
5. press textures context button. near top in type drop down box, select image or movie. in image panel, browse image (make sure image's dimensions in power of 2).
6. choose uv editing screen layout (drop-down box right of menu @ top).
7. with mouse cursor in 3d editor, go edit mode (tab key).
8. unwrap (press u key). choose smart uv project. click ok accept defaults.
9. in uv editing screen, select image using menu @ bottom left (see screenshot)
10. select image->save image. image need next json file export.
11. click file->export->three.js (.json).
12. to left, select few more export options (see screenshot ones used, found trial , error). think added face materials, materials, , textures. can click save settings save these settings.
13. put json file , image file saved earlier in project folder.

14. use following code load it:

    var object; var loader = new three.jsonloader();           loader.load( "./models/test_texture.json", function(geometry, materials) {   object = new three.mesh(geometry, materials[0]);   object.scale.set(32, 32, 32);   game.scene.add(object); });