Question

问题：

好的我尝试使用three.js绘制几个平面，其中一个有纹理，但是当我使用WebGLRenderer（）时没有绘制，如果我用CanvasRenderer（）更改渲染器，绘制纹理，问题出在WebGL / Three.js上。

错误：

Firefox控制台错误：＆＃34; WebGL：drawElements：绑定的顶点属性缓冲区没有足够的大小用于绑定元素数组的给定索引＆＃34;

更新

Google Chrome错误：＆＃34; [.WebGLRenderingContext] GL错误：GL_INVALID_OPERATION：glDrawElements：尝试访问属性1＆＃34;
中超出范围的顶点

守则：

    //scene-camera
    var scene = new THREE.Scene ();
    var camera =  new THREE.PerspectiveCamera (90, window.innerWidth/window.innerHeight, 1, 1000);
    camera.position.z = 600;
    camera.updateMatrixWorld (true);
    scene.add (camera);

    //renderer
    var renderer = new THREE.WebGLRenderer ();
    renderer.setSize (window.innerWidth, window.innerHeight);
    document.body.appendChild (renderer.domElement);

    //geometry  
    var geometryPlane = new THREE.PlaneGeometry (600, 400);

    //textures
    var textureWall1 = THREE.ImageUtils.loadTexture ('textures/wall1.jpg');
    textureWall1.anisotropy = renderer.getMaxAnisotropy();

    //materials 
    var materialWall1 = new THREE.MeshBasicMaterial ({map: textureWall1});

    //objets-plane      
    var plane = new THREE.Mesh (geometryPlane, materialWall1);

    //vectors 
    var vecX = new THREE.Vector3(1, 0, 0);
    var vecY = new THREE.Vector3(0, 1, 0);
    var vecZ = new THREE.Vector3(0, 0, 1);
    var vec0 = new THREE.Vector3(0, 0, 0);

    //add scene-camera position of the objects 
    scene.add (plane);

    var render = function (){
        //translate 
        plane.translateOnAxis (vecZ, 300);

        renderer.render (scene, camera);
    }
    render ();

我认为图片和平面的分辨率是一个问题...但我已经尝试改变它，但它仍然有相同的结果，如果你需要，分辨率是：

Wall1.jpg（598,398）px ...

感谢您的帮助！

PD：这不是所有代码，其余是其他飞机和材料（颜色）

Three.js：在平面上绘制纹理的WebGL（错误）

0 个答案: