Texturing cylinder with CanvasRenderer

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.