Trying to implement WebGL viewer using Three.js + ColladaLoader.js

Question

I am trying to implement a WebGl viewer using three.js + colladaloader.js but i am having some problems when trying to import and view my own collada object. I can load the example correctly, but when adding my own model to it (without changing the code) i get a

Can not convert Transform of type lookat WebGLRenderingContext: GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 0

Any ideas how to get my own model working

I should add that my ColladaLoader.js is a patched version hosted here https://raw.github.com/jihoonl/three.js/6e5a02427f2b9626a3fccc9c09d8654cc02d2109/examples/js/loaders/ColladaLoader.js

Here is the model i am trying to load: http://sketchup.google.com/3dwarehouse/details?mid=bad38a0b2a3d753c8857d6b1c783b210&ct=mdsa&prevstart=0

Here is my code:

<script>

    if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

    var container, stats;

    var camera, scene, renderer, objects;
    var particleLight, pointLight;
    var dae, skin;

    var loader = new THREE.ColladaLoader();
    loader.options.convertUpAxis = true;
    loader.load( '/site_media/models/model.dae', function ( collada ) {

        dae = collada.scene;
        skin = collada.skins[ 0 ];

        dae.scale.x = dae.scale.y = dae.scale.z = 0.002;
        dae.updateMatrix();

        init();
        animate();

    } );

    function init() {

        container = document.createElement( 'div' );
        document.body.appendChild( container );

        camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
        camera.position.set( 2, 2, 3 );

        scene = new THREE.Scene();

        // Grid

        var size = 14, step = 1;

        var geometry = new THREE.Geometry();
        var material = new THREE.LineBasicMaterial( { color: 0x303030 } );

        for ( var i = - size; i <= size; i += step ) {

            geometry.vertices.push( new THREE.Vector3( - size, - 0.04, i ) );
            geometry.vertices.push( new THREE.Vector3(   size, - 0.04, i ) );

            geometry.vertices.push( new THREE.Vector3( i, - 0.04, - size ) );
            geometry.vertices.push( new THREE.Vector3( i, - 0.04,   size ) );

        }

        var line = new THREE.Line( geometry, material, THREE.LinePieces );
        scene.add( line );

        // Add the COLLADA

        scene.add( dae );

        particleLight = new THREE.Mesh( new THREE.SphereGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );
        scene.add( particleLight );

        // Lights

        scene.add( new THREE.AmbientLight( 0xcccccc ) );

        var directionalLight = new THREE.DirectionalLight(/*Math.random() * 0xffffff*/0xeeeeee );
        directionalLight.position.x = Math.random() - 0.5;
        directionalLight.position.y = Math.random() - 0.5;
        directionalLight.position.z = Math.random() - 0.5;
        directionalLight.position.normalize();
        scene.add( directionalLight );

        pointLight = new THREE.PointLight( 0xffffff, 4 );
        pointLight.position = particleLight.position;
        scene.add( pointLight );

        renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );

        container.appendChild( renderer.domElement );

        stats = new Stats();
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.top = '0px';
        container.appendChild( stats.domElement );

        //

        window.addEventListener( 'resize', onWindowResize, false );

    }

    function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize( window.innerWidth, window.innerHeight );

    }

    //

    var t = 0;
    var clock = new THREE.Clock();

    function animate() {

        var delta = clock.getDelta();

        requestAnimationFrame( animate );

        if ( t > 1 ) t = 0;

        if ( skin ) {

            // guess this can be done smarter...

            // (Indeed, there are way more frames than needed and interpolation is not used at all
            //  could be something like - one morph per each skinning pose keyframe, or even less,
            //  animation could be resampled, morphing interpolation handles sparse keyframes quite well.
            //  Simple animation cycles like this look ok with 10-15 frames instead of 100 ;)

            for ( var i = 0; i < skin.morphTargetInfluences.length; i++ ) {

                skin.morphTargetInfluences[ i ] = 0;

            }

            skin.morphTargetInfluences[ Math.floor( t * 30 ) ] = 1;

            t += delta;

        }

        render();
        stats.update();

    }

    function render() {

        var timer = Date.now() * 0.0005;

        camera.position.x = Math.cos( timer ) * 10;
        camera.position.y = 2;
        camera.position.z = Math.sin( timer ) * 10;

        camera.lookAt( scene.position );

        particleLight.position.x = Math.sin( timer * 4 ) * 3009;
        particleLight.position.y = Math.cos( timer * 5 ) * 4000;
        particleLight.position.z = Math.cos( timer * 4 ) * 3009;

        renderer.render( scene, camera );

    }

</script>

Answer 1

fixed it by making my texture BIGGER (and placing it on the same folder as my model and renaming to the same name as my model) It seems like ColladaLoader.js does not load small textures for some reason

Another thing there is a bug https://github.com/mrdoob/three.js/issues/3106 but this is the fix https://raw.github.com/jihoonl/three.js/6e5a02427f2b9626a3fccc9c09d8654cc02d2109/examples/js/loaders/ColladaLoader.js , and it seems that it doesnt work without this fix