0

我正在尝试使用three.js + colladaloader.js 实现WebGl 查看器，但是在尝试导入和查看我自己的collada 对象时遇到了一些问题。我可以正确加载示例，但是在向其中添加我自己的模型时（不更改代码）我得到一个

无法转换外观类型的变换 WebGLRenderingContext：GL 错误：GL_INVALID_OPERATION：glDrawElements：尝试访问属性 0 中超出范围的顶点

任何想法如何让我自己的模型工作

我应该补充一点，我的 ColladaLoader.js 是此处托管的修补版本https://raw.github.com/jihoonl/three.js/6e5a02427f2b9626a3fccc9c09d8654cc02d2109/examples/js/loaders/ColladaLoader.js

这是我要加载的模型：http: //sketchup.google.com/3dwarehouse/details ?mid=bad38a0b2a3d753c8857d6b1c783b210&ct=mdsa&prevstart=0

这是我的代码：

<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>
4

1 回答 1

1

通过使我的纹理更大来修复它（并将其放在与我的模型相同的文件夹中并重命名为与我的模型相同的名称）看起来 ColladaLoader.js 出于某种原因不加载小纹理

另一件事有一个错误https://github.com/mrdoob/three.js/issues/3106但这是修复https://raw.github.com/jihoonl/three.js/6e5a02427f2b9626a3fccc9c09d8654cc02d2109/examples/js/ loaders/ColladaLoader.js，如果没有这个修复它似乎不起作用

于 2013-02-21T19:58:26.370 回答