1 thought on “Texturing cylinder with CanvasRenderer

  1. Although this is a very old discussion, it came up as I was searching how to do this exact thing. The API has changed a bit, so if someone else stumbles upon this thread, here is an updated version:

    var geometry = new THREE.CylinderGeometry(radius, radius, height, 50);
    
    var radius_half = radius / 2;
    for (var z = 0; z < geometry.faces.length; z++) {
        var face = geometry.faces[z];
        if (face.normal.y !== 0) {
            geometry.faceVertexUvs[0][z][0].u = (geometry.vertices[face.a].x + radius_half) / radius;
            geometry.faceVertexUvs[0][z][0].v = (geometry.vertices[face.a].z + radius_half) / radius;
            geometry.faceVertexUvs[0][z][1].u = (geometry.vertices[face.b].x + radius_half) / radius;
            geometry.faceVertexUvs[0][z][1].v = (geometry.vertices[face.b].z + radius_half) / radius;
            geometry.faceVertexUvs[0][z][2].u = (geometry.vertices[face.c].x + radius_half) / radius;
            geometry.faceVertexUvs[0][z][2].v = (geometry.vertices[face.c].z + radius_half) / radius;
            face.materialIndex = 0;
        } else {
            face.materialIndex = 1;
        }
    }
    
    var obj = new THREE.Mesh(geometry, [faceMaterial, sideMaterial]);

Comments are closed.