Applying CanvasTexture to a Cylinder Side Surface

To apply a CanvasTexture to just the side surface of a cylinder (excluding top and bottom) while dynamically determining the correct aspect ratio, you have a few approaches available in Three.js.

Solution Using Three.js CylinderGeometry

The most straightforward approach is to use Three.js's built-in CylinderGeometry and apply materials selectively:

JAVASCRIPTCopied
// Create a cylinder geometry
const radius = 1;
const height = 2;
const radialSegments = 32;
const geometry = new THREE.CylinderGeometry(
  radius,           // top radius
  radius,           // bottom radius
  height,           // height
  radialSegments,   // radial segments
  1,                // height segments
  false             // open-ended
);

// Create canvas for the texture
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');

// Calculate aspect ratio for the side of the cylinder
// For a cylinder, the unwrapped side is a rectangle with:
// width = 2π × radius (circumference)
// height = height of cylinder
const circumference = 2 * Math.PI * radius;
const aspectRatio = circumference / height;

// Set canvas dimensions with the correct aspect ratio
canvas.width = 1024;  // Choose a base resolution
canvas.height = Math.round(canvas.width / aspectRatio);

// Draw on the canvas
context.fillStyle = 'white';
context.fillRect(0, 0, canvas.width, canvas.height);
// Add your drawing code here...

// Create the texture
const canvasTexture = new THREE.CanvasTexture(canvas);

// Create materials - one for the sides, separate ones for top and bottom
const sideMaterial = new THREE.MeshStandardMaterial({ map: canvasTexture });
const topBottomMaterial = new THREE.MeshStandardMaterial({ color: 0x888888 });

// Apply materials to specific faces
// [top, bottom, side]
const materials = [topBottomMaterial, topBottomMaterial, sideMaterial];
const mesh = new THREE.Mesh(geometry, materials);
scene.add(mesh);

Alternative Approach with UV Mapping

If you're working with a model from Blender and want to adjust the texture mapping:

JAVASCRIPTCopied
// Load your model
const loader = new THREE.GLTFLoader();
loader.load('your_cylinder.glb', (gltf) => {
  const cylinder = gltf.scene.getObjectByName('YourCylinderName');
  
  // Create canvas texture
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  
  // Set dimensions based on your needs
  canvas.width = 1024;
  canvas.height = 512;
  
  // Draw on canvas
  // ...your drawing code...
  
  // Create texture
  const canvasTexture = new THREE.CanvasTexture(canvas);
  
  // Apply texture to the cylinder material
  cylinder.material.map = canvasTexture;
  cylinder.material.needsUpdate = true;
});

Handling UV Coordinates

If the UV coordinates from Blender aren't mapping correctly, you can:

1. Adjust the UV mapping in Blender before exporting
2. Modify the UV coordinates in Three.js:

JAVASCRIPTCopied
// Access the geometry's UV coordinates
const uvs = geometry.attributes.uv;

// Modify UV coordinates to match your desired mapping
for (let i = 0; i < uvs.count; i++) {
  // Identify vertices on the side surface and adjust their UVs
  // This requires understanding the vertex order in your geometry
  // ...
}

// Update the UV attribute
uvs.needsUpdate = true;

The key insight is that for a cylinder's side, the correct aspect ratio is the circumference (2πr) divided by the height. This gives you the proper dimensions for your canvas to avoid stretching.