Threejs custom 3d geometry using vertices

Question

I'm trying to make a quarter , only the long surface area not the sides, of a cylinder surface using vertices to make the custom geometry. I tried making a list of quads, but this code does not work. http://jsfiddle.net/R7pQB/32/

for(i = 90; i > 0; i -= 2 ){
    geometry.vertices.push( new THREE.Vector3( 0, quad1_y[i], quad1_z[i]) );
    geometry.vertices.push( new THREE.Vector3( L, quad1_y[i], quad1_z[i]) );
    geometry.vertices.push( new THREE.Vector3( L, quad1_y[i - 1], quad1_z[i - 1]) );
    geometry.vertices.push( new THREE.Vector3( 0, quad1_y[i - 1],quad1_z[i - 1]) );
    geometry.faces.push( new THREE.Face4(0,1,2,3) );
}

Answer 1

As @newvalue points out, you are not incrementing the face indices. You are pushing vertices to the mesh. next you need to connect them to a face. I find it a lot easier to use a second counter which gets incremented by 4 for a Face4 instance. Also, instead of two loops, you could computer and add the vertices/faces in the same loop:

function initGeometry( R , L) {
    var geometry = new THREE.Geometry();

    var deg;
    var f = 0;  
    for( deg = 0; deg < 90; deg++,f += 4 ){
        var ca = deg * 0.01745329252;//cache current angle
        var na = (deg+1) * 0.01745329252;//cache next angle (could do with a conditional and storing previous angle)
        var ccos = Math.cos(ca);//current cos
        var csin = Math.sin(ca);//current sin
        var ncos = Math.cos(na);//next cos
        var nsin = Math.sin(na);//next sin

        var tl = new THREE.Vector3( R * ccos, L * .5, R * csin);//top left = current angle, positive y
        var bl = new THREE.Vector3( R * ccos,-L * .5, R * csin);//bottom left = current angle, negative y
        var tr = new THREE.Vector3( R * ncos, L * .5, R * nsin);//top right = next angle, positive y
        var br = new THREE.Vector3( R * ncos,-L * .5, R * nsin);//bottom right = next angle, negative y

        /*
        tl--tr
        |  /|
        | / |
        |/  |
        bl--br
        */
        geometry.vertices.push(tl,tr,br,bl);//notice vertices are added in (cw) order
        geometry.faces.push(new THREE.Face4(f,f+1,f+2,f+3));//add the correct face indices, easy with a second counter

    }

some of the code is expanded so it's easier to understand the connection between vertices, their position in 3D space, as well as their position in the vertices array from where they are referenced when adding faces.

Based on your fiddle, here's the full listing:

var renderer;
var camera;
var scene;
var object;

initConfig();
initGeometry( 50, 300 );
startRender();

function initConfig() {
    renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(0x000000, 1);
    renderer.setSize(window.innerWidth,window.innerHeight);
    document.body.appendChild( renderer.domElement );
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 100);
    camera.position.set(0, 0, 100);
    camera.lookAt(scene.position);
    scene.add(camera);
}

function initGeometry( R , L) {
    var geometry = new THREE.Geometry();

    var deg;
    var f = 0;  
    for( deg = 0; deg < 90; deg++,f += 4 ){
        var ca = deg * 0.01745329252;//cache current angle
        var na = (deg+1) * 0.01745329252;//cache next angle (could do with a conditional and storing previous angle)
        var ccos = Math.cos(ca);//current cos
        var csin = Math.sin(ca);//current sin
        var ncos = Math.cos(na);//next cos
        var nsin = Math.sin(na);//next sin

        var tl = new THREE.Vector3( R * ccos, L * .5, R * csin);//top left = current angle, positive y
        var bl = new THREE.Vector3( R * ccos,-L * .5, R * csin);//bottom left = current angle, negative y
        var tr = new THREE.Vector3( R * ncos, L * .5, R * nsin);//top right = next angle, positive y
        var br = new THREE.Vector3( R * ncos,-L * .5, R * nsin);//bottom right = next angle, negative y

        /*
        tl--tr
        |  /|
        | / |
        |/  |
        bl--br
        */
        geometry.vertices.push(tl,tr,br,bl);//notice vertices are added in (cw) order
        geometry.faces.push(new THREE.Face4(f,f+1,f+2,f+3));//add the correct face indices, easy with a second counter

    }

    object = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial({color:0x660033,         side:THREE.DoubleSide}));
    object.position.set(0,0,0);
    object.rotation.x = Math.PI * .35;//a bit of rotation to make the structure visible
    object.scale.set(.35,.35,.35);//again, to make things easier to see
    scene.add(object);
}

function startRender(){
    renderer.render(scene, camera);
}

Also your mesh is pretty dense (90 faces for half a cylinder). You might want to try drawing your mesh using less segments, which will give you a chance to practice with vertices/faces indices.

Answer 2

All the faces of your geometry have same vertex indices ?

 geometry.faces.push( new THREE.Face4(0,1,2,3) );