collada - Three.js CanvasRenderer Artifacts -

i trying load collada file using threejs. works well, if make object spin can see rendering not right. check image:

here code (which partially stolen example):

function init() {     container = document.createelement( 'div' );     document.body.appendchild( container );      var info = document.createelement( 'div' );     info.style.position = 'absolute';     info.style.top = '10px';     info.style.width = '100%';     info.style.textalign = 'center';     info.innerhtml = 'drag spin cube';     container.appendchild( info );      camera = new three.perspectivecamera( 20, window.innerwidth / window.innerheight, .1, 10000 );     camera.position.x=50;     camera.position.y=50;     camera.position.z=50;     camera.lookat(new three.vector3(0,0,0));     scene = new three.scene();      renderer = new three.canvasrenderer();     renderer.setsize( window.innerwidth, window.innerheight );     container.appendchild( renderer.domelement );      var ambientlight = new three.ambientlight(0x000000);     scene.add(ambientlight);      var directionallight = new three.directionallight(0xffffff);     directionallight.position.set(100,50,80).normalize();     scene.add(directionallight);      var loader = new three.colladaloader();     loader.options.convertupaxis = true; // rotates looks right     loader.load('models/vm.dae', function (result) {         cube = result.scene;         // cube.doublesided = true;         // cube.flipsided = true;         console.log(cube);         cube.updatematrix();         scene.add(result.scene);         animate();     }); }  function animate() {     requestanimationframe( animate );     render(); }  function render() {     cube.rotation.y += 0.01;     // plane.rotation.y = cube.rotation.y += ( targetrotation - cube.rotation.y ) * 0.05;     renderer.render( scene, camera ); } 

new update:

i changed loader mtl+obj one. result same:

var loader = new three.objmtlloader();     loader.addeventlistener("load", function (event) {         cube = event.content;         cube.doublesided = true;         console.log(event);         scene.add(cube);         animate();     });      loader.load ("models/vm.obj", "models/vm.mtl"); 

fiddle: http://jsfiddle.net/qmqh7/

your model throwing errors in console, suggest track them down.

what seeing known limitation of canvasrenderer related depth-sorting. made worse geometry has several elongated faces. model renders correctly webglrenderer.

also, object.doublesided has been deprecated. has been replaced material.side = three.doubleside. not appear flag required in case.

three.js r.58