I understood one thing that the tile images which I was using were not properly scaled. I have updated them.
also figured out to calculate the number of repetition.
now the issue is currently creating the new combinedCanvas and appling on it. instead of that I want to update the intersected object’s material and also want to do repetition on it.
Edit : canvas is being generated as per the intersected wall / floor. just looping of repetition not working correctly
can someone guide ? thanks.
function loadTextureAndSetRepeat({ element, rotateAngle = 0 }) {
let surfaceData = element.userData;
let randomIndex = Math.floor(Math.random() * tilesData.length);
let currentTexture = tilesData[randomIndex];
const imageUrls = currentTexture.imgUrl;
const firstImageUrl = imageUrls[0];
loadImage(firstImageUrl)
.then((firstImage) => {
const tiWidth = firstImage.width;
const tiHeight = firstImage.height;
var gtw = (informazione.wall_tile_w * tiWidth) / 500;
var gth = (informazione.wall_tile_h * tiHeight) / 500;
const plane_height = surfaceData.height;
const plane_width = surfaceData.width;
const textures = [];
Promise.all(imageUrls.map(loadImage))
.then((images) => {
images.forEach((image) => {
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
canvas.width = nextPowerOf2(image.width);
canvas.height = nextPowerOf2(image.height);
context.drawImage(image, 0, 0, canvas.width, canvas.height);
const texture = new THREE.Texture(canvas);
texture.premultiplyAlpha = false;
texture.needsUpdate = true;
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
texture.repeat.set(5, 5);
textures.push(texture);
});
// Create a combined canvas
const combinedCanvas = document.createElement("canvas");
combinedCanvas.width = plane_width;
combinedCanvas.height = plane_height;
const combinedContext = combinedCanvas.getContext("2d");
for (let indexQx = 0; indexQx * gtw <= combinedCanvas.width; indexQx++) {
for (let indexQy = 0; indexQy * gth <= combinedCanvas.height; indexQy++) {
const randomTexture = textures[Math.floor(Math.random() * textures.length)].image;
combinedContext.drawImage(randomTexture, indexQx * gtw, indexQy * gth, gtw, gth);
// Draw grout lines
if (grout_v_width > 0) {
combinedContext.strokeStyle = grout_color;
combinedContext.globalAlpha = grout_alpha;
combinedContext.lineWidth = grout_v_width;
combinedContext.beginPath();
combinedContext.moveTo(indexQx * gtw, indexQy * gth);
combinedContext.lineTo((indexQx + 1) * gtw, indexQy * gth);
combinedContext.lineTo((indexQx + 1) * gtw, (indexQy + 1) * gth);
combinedContext.lineTo(indexQx * gtw, (indexQy + 1) * gth);
combinedContext.closePath();
combinedContext.stroke();
}
if (grout_h_width > 0) {
combinedContext.strokeStyle = grout_color;
combinedContext.globalAlpha = grout_alpha;
combinedContext.lineWidth = grout_h_width;
combinedContext.beginPath();
combinedContext.moveTo(indexQx * gtw, indexQy * gth);
combinedContext.lineTo(indexQx * gtw, (indexQy + 1) * gth);
combinedContext.lineTo((indexQx + 1) * gtw, (indexQy + 1) * gth);
combinedContext.lineTo((indexQx + 1) * gtw, indexQy * gth);
combinedContext.closePath();
combinedContext.stroke();
}
}
}
const combinedTexture = new THREE.Texture(combinedCanvas);
combinedTexture.needsUpdate = true;
combinedTexture.wrapS = THREE.RepeatWrapping;
combinedTexture.wrapT = THREE.RepeatWrapping;
combinedTexture.anisotropy = renderer.capabilities.getMaxAnisotropy();
combinedTexture.repeat.set(1, 1);
// Map the combined texture to the element
element.material.map = textures[0];
element.material.needsUpdate = true;
renderer.render(scene, camera);
})
.catch((error) => {
console.error("Error loading images:", error);
});
})
.catch((error) => {
console.error("Error loading first image:", error);
});
}
tilesData
var tilesData = [
{
index: 1,
imgUrl: [
"images/1/1.jpg",
"images/1/2.jpg",
"images/1/3.jpg",
"images/1/4.jpg",
"images/1/5.jpg",
"images/1/6.jpg",
"images/1/7.jpg",
"images/1/8.jpg",
],
width: 600,
height: 600,
},
];
var informazione = {
floor_tile_w: 6,
floor_tile_h: 12,
wall_tile_w: 12,
wall_tile_h: 6,
camera_fov: 75,
camera_position_x: 0,
camera_position_y: 0,
camera_position_z: 3,
intensity: 0.98,
R_intensity: 0.01,
wall_tile_width: 2400,
wall_tile_height: 1200,
floor_tile_width: 2400,
floor_tile_height: 1200,
};
output with combinedTexture
element.material.map = combinedTexture;
output when we just map image texture
element.material.map = textures[0];
as image scale is small and repeated in 1,1 set so it became blurry. trying to manage it with repetition loop
