ThreeJS geometry not rendering causes drawElements: no ELEMENT_ARRAY_BUFFER bound

Question

I am trying to render using Three.js an indexed face set. As an input data i have arrays containing indexes for coordinates, normals, texture and then the payload arrays with coordinates, normals and texture coordinates.

After setting up everything the object does not get rendered and there are two errors that pop-up: WebGL: INVALID_OPERATION: vertexAttribPointer: no bound ARRAY_BUFFER and WebGL: INVALID_OPERATION: drawElements: no ELEMENT_ARRAY_BUFFER bound . Do you happen to have a suggestion or do you see an error with the code?

Here is the code:

    var container = document.getElementById("webgl-canvas");
    var renderer = new THREE.WebGLRenderer({canvas:container, alpha:true,  antialias: false}); 
    renderer.setClearColor(0x000000,1);
    renderer.setSize(container.width, container.height) ;
    var scene = new THREE.Scene(); 
    var light = new THREE.DirectionalLight( 0xffffff );
    light.position.set( 0, 1, 1 ).normalize();
    scene.add(light);

    scene.add(new THREE.AmbientLight(0x444444));
    var light1 = new THREE.DirectionalLight(0xffffff, 0.5);
    light1.position.set(1, 1, 1);
    scene.add(light1);
    var camera = new THREE.PerspectiveCamera(45, container.width / container.height, 1, 10000);
    camera.position.set(60,20,20);

        geometry = new THREE.BufferGeometry();
        geometry.attributes = [];

        var n = 3*ifs.nCoordIndex_;

        if (ifs.nCoordIndex_ > 0) {
                console.log(ifs.nCoordIndex_);
                geometry.attributes.index = { itemSize: 1, array: ifs.coordIndex_, numItems: ifs.nCoordIndex_ * 3 };
                geometry.offsets = [{ start: 0, index: 0, count: ifs.nCoordIndex_ * 3}];
        }

        if (ifs.nCoord_ > 0) {
                console.log(ifs.nCoord_);
                geometry.attributes.position = { itemSize: 3, array: ifs.coord_, numItems: ifs.nCoord_ * 3 };
        }

        if (ifs.nNormal_ > 0) {
                console.log(ifs.nNormal_);
                geometry.attributes.normal = { itemSize: 3, array: ifs.normal_, numItems: ifs.nNormal_ * 3 };
        }

        var colors = new Float32Array(n);
            for(var i = 0; i < n; i+=3){
                colors[i] = 1.0;
                colors[i+1] = 1.0;
                colors[i+2] = 0.0;
            }
        geometry.attributes.color = { itemSize: 3, array: colors, numItems: n };


        var material = new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture('cottage_0_0.jpg') } );
        var mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);
        camera.lookAt(scene.position);
        renderer.render(scene,camera);

Is there something that i am missing?

Winchestro · Accepted Answer · 2015-02-03 23:38:53Z

2

Rather than accessing this property directly, use addAttribute and getAttribute to access attributes of this geometry

(from the three.js docs)

Use the recommended way to add all your attributes to the BufferGeometry or expect unexpected behavior :)

geometry = new THREE.BufferGeometry();
geometry.addAttribute( 
    "color", 
     new THREE.BufferAttribute( colors, 3 ) 
);

answered Feb 3, 2015 at 23:38

Winchestro

2,18815 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ThreeJS geometry not rendering causes drawElements: no ELEMENT_ARRAY_BUFFER bound

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related