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>

What kind of errors or troubles do you have? You need to be more specific. I can't spot any obvious errors in the code, it looks somewhat correct. You might check if the model scale or camera positioning is hugely off, it can be that without scaling the object is just way too big or way too small to be visible - depending on how the Collada is created. — yaku, Feb 21 '13 at 16:18
The example webgl_loader_collada.html (off the main branch in examples folder) should provide some help. It is not hard to follow. Try renderer = new THREE.WebGLRenderer (). — gaitat, Feb 21 '13 at 17:24
thats the example i am using. the code above is copy paste of that example (with the exception that i am using my own model) — psychok7, Feb 21 '13 at 17:26
OK. If in your code you use the original example models, can you view them? — gaitat, Feb 21 '13 at 17:29
yes, with the original example models everything works properly — psychok7, Feb 21 '13 at 17:31
i added a link to my model above. it seems ok. do you see it? — psychok7, Feb 21 '13 at 17:34

psychok7 · Accepted Answer · 2013-02-21T20:18:36.527

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

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

1 Answers1