Texture Tiling and Rotation in Three.js

Based on your questions about applying tiled textures to meshes in Three.js, I'll address both of your main concerns.

1. Repeating Textures While Maintaining Original Size

To repeat textures while maintaining their original size, you need to:

1. Set the texture's wrapS and wrapT properties to THREE.RepeatWrapping
2. Calculate the appropriate repeat values based on the mesh size and desired texture size

Here's how you can implement this:

JAVASCRIPTCopied
// Load your texture
const texture = new THREE.TextureLoader().load('path/to/texture.jpg');

// Enable texture repeating
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;

// Get the dimensions of your mesh
const meshWidth = yourMesh.geometry.parameters.width;
const meshHeight = yourMesh.geometry.parameters.height;

// Set the desired size for a single tile (in world units)
const tileSize = 1; // Adjust this to your needs

// Calculate repeat values
texture.repeat.set(meshWidth / tileSize, meshHeight / tileSize);

// Apply to material
const material = new THREE.MeshBasicMaterial({ map: texture });

2. Rotating the Entire Texture Repetition

To rotate the entire texture pattern (not just individual tiles), you need to:

1. Set the texture's center property to (0.5, 0.5) to rotate around the center
2. Set the rotation property to your desired angle in radians

Here's how to implement this:

JAVASCRIPTCopied
// Set the center of rotation to the middle of the texture
texture.center.set(0.5, 0.5);

// Set rotation in radians (e.g., 45 degrees = PI/4)
texture.rotation = Math.PI / 4; // 45 degrees

Complete Example

Here's a more complete example that addresses both issues:

JAVASCRIPTCopied
function applyTiledTexture(mesh, texturePath, tileSize, rotationDegrees) {
  const texture = new THREE.TextureLoader().load(texturePath);
  
  // Enable repeating
  texture.wrapS = THREE.RepeatWrapping;
  texture.wrapT = THREE.RepeatWrapping;
  
  // Get mesh dimensions (assuming it's a PlaneGeometry or BoxGeometry)
  let width, height;
  if (mesh.geometry.parameters) {
    width = mesh.geometry.parameters.width;
    height = mesh.geometry.parameters.height || mesh.geometry.parameters.depth;
  } else {
    // For other geometries, you might need to calculate bounding box
    mesh.geometry.computeBoundingBox();
    const box = mesh.geometry.boundingBox;
    width = box.max.x - box.min.x;
    height = box.max.y - box.min.y;
  }
  
  // Set repeat based on desired tile size
  texture.repeat.set(width / tileSize, height / tileSize);
  
  // Set rotation
  texture.center.set(0.5, 0.5);
  texture.rotation = rotationDegrees * Math.PI / 180;
  
  // Apply to material
  mesh.material.map = texture;
  mesh.material.needsUpdate = true;
}

// Usage
applyTiledTexture(yourWallMesh, 'wall-texture.jpg', 1.0, 45); // 45 degree rotation

For Random Material Selection

To randomly apply different textures to your surfaces, you can create an array of textures and select one randomly:

JAVASCRIPTCopied
// Create an array of texture paths
const texturePaths = [
  'texture1.jpg',
  'texture2.jpg',
  'texture3.jpg'
];

// Function to apply a random texture
function applyRandomTexture(mesh, tileSize) {
  // Select a random texture
  const randomIndex = Math.floor(Math.random() * texturePaths.length);
  const randomTexturePath = texturePaths[randomIndex];
  
  // Apply it with a random rotation (0, 45, 90, or 135 degrees)
  const rotations = [0, 45, 90, 135];
  const randomRotation = rotations[Math.floor(Math.random() * rotations.length)];
  
  applyTiledTexture(mesh, randomTexturePath, tileSize, randomRotation);
}

// Apply to all your meshes
wallMeshes.forEach(mesh => applyRandomTexture(mesh, 1.0));

These techniques should help you achieve the tiling and rotation effects you're looking for with your textures in Three.js.