CODEWITHSUNDEEP
three.js
user3253067
user3253067

Reputation: 111

ThreeJS geometry not rendering causes drawElements: no ELEMENT_ARRAY_BUFFER bound

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?

Upvotes: 0

Views: 425

Answers (1)

Winchestro
Winchestro

Reputation: 2188

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

Upvotes: 2

Related Questions