Javascript 尝试使用Three.js+；ColladaLoader.js

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

无法转换lookat类型的转换 WebGLRenderingContext:GL错误：GL\u无效\u操作： GLDraweElements:尝试访问属性0中超出范围的顶点

有什么办法让我自己的模型工作吗

我应该补充一点，我的ColladaLoader.js是一个在这里托管的补丁版本

以下是我尝试加载的模型：

这是我的密码：

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

如果（！Detector.webgl）Detector.addGetWebGLMessage（）；
var容器，stats；
摄像机、场景、渲染器、对象；
var粒子灯、点光源；
变种，皮肤；
var loader=new THREE.ColladaLoader（）；
loader.options.convertUpAxis=true；
loader.load（'/site_media/models/model.dae'，函数（collada）{
dae=collada.scene；
皮肤=collada.皮肤[0]；
dae.scale.x=dae.scale.y=dae.scale.z=0.002；
dae.updateMatrix（）；
init（）；
制作动画（）；
} );
函数init（）{
container=document.createElement（'div'）；
文件.正文.附件（容器）；
摄像头=新的三个透视摄像头（45，window.innerWidth/window.innerHeight，12000）；
摄像机。位置。设置（2，2，3）；
场景=新的三个。场景（）；
//网格
变量大小=14，步长=1；
var geometry=new THREE.geometry（）；
var material=新的三线基本材质（{color:0x303030}）；
对于（var i=-size；i1）t=0；
如果（皮肤）{
//我想这可以做得更聪明些。。。
//（事实上，帧的数量远远超过了需要的数量，并且根本不使用插值。）
//可能类似于-每个蒙皮姿势关键帧一个变形，甚至更少，
//动画可以重采样，变形插值可以很好地处理稀疏关键帧。
//像这样的简单动画循环看起来可以使用10-15帧，而不是100；）
对于（var i=0；i

通过将我的纹理变大（并将其放置在与我的模型相同的文件夹中，并重命名为与我的模型相同的名称）修复了该问题 由于某种原因，ColladaLoader.js似乎不加载小纹理

---

还有一件事是有一个bug，但这是修复程序，如果没有这个修复程序，它似乎无法工作

您有什么样的错误或问题？你需要更具体一些。我看不出代码中有任何明显的错误，它看起来有些正确。您可能会检查模型比例或相机位置是否严重偏离，如果不进行缩放，可能是对象太大或太小而不可见，这取决于衣领的创建方式。它不显示任何错误，只是不显示任何改变的内容。编辑我的帖子示例webgl_loader_collada.html（位于示例文件夹的主分支之外）应该会提供一些帮助。这并不难理解。尝试renderer=new THREE.WebGLRenderer（）。这就是我正在使用的示例。上面的代码是该示例的复制粘贴（我使用自己的模型除外）