Three.js CanvasRenderer Artifacts

Question

I am trying to load a collada file using Threejs. All works well, but if I make the object spin I can see that the rendering is not right. Check the image:

Here is the code (which was partially stolen from another 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 to spin the 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; // this rotates so it 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 the loader to a MTL+OBJ one. The result is exactly the 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/

Answer 1

Your model is throwing errors in the Console, I would suggest you track them down.

What you are seeing is a known limitation of CanvasRenderer related to depth-sorting. It is made worse by your geometry which has several elongated faces. The model renders correctly with WebGLRenderer.

Also, object.doubleSided has been deprecated. It has been replaced by material.side = THREE.DoubleSide. It does not appear that flag is required in this case.

three.js r.58