CODEWITHSUNDEEP
javascriptthree.jswebgl
Oleg Kikin
Oleg Kikin

Reputation: 411

Three.js triangles not drawn

Here's the full code:

http://jsfiddle.net/YzR33/

Basically, I'm trying to draw triangles (and set colors for each vertex), and when I set certain coordinates, they suddenly don't get drawn.

// Draw 20 triangles, only 5 show up
for (var i=0; i<20; i++) {
    drawTriangle(
        [[4, 10], [1, 5 + i], [10, 10]], // coords
        [0x00ff00, 0xaa0000 + i*256*100, 0x555555 + i*256*100] // colors
    );
}

var triangles = new THREE.Mesh( geometry, material );
scene.add(triangles);    
renderer.render(scene, camera);

...

function drawTriangle(coords, colors) {
    // Triangle counter
    if (typeof this.cnt == 'undefined')
        this.cnt = 0;

    var p1  = new THREE.Vector3(coords[0][0], coords[0][1], 1);
    var p2  = new THREE.Vector3(coords[1][0], coords[1][1], 1);
    var p3  = new THREE.Vector3(coords[2][0], coords[2][1], 1);
    geometry.vertices.push( p1 );
    geometry.vertices.push( p2 );       
    geometry.vertices.push( p3 );

    geometry.faces.push( new THREE.Face3( this.cnt*3, this.cnt*3+1, this.cnt*3+2 ) );

    geometry.faces[this.cnt++].vertexColors = [
        new THREE.Color(colors[0]),
        new THREE.Color(colors[1]),
        new THREE.Color(colors[2])
    ];
}

Upvotes: 0

Views: 531

Answers (1)

gaitat
gaitat

Reputation: 12632

Some of the triangles you are drawing are backfacing which is determined by the triangle normal. Add side: THREE.DoubleSide to your material and you will see all the triangles.

Upvotes: 3

Related Questions