Dron
function handleImageUpload(event) {
const files = Array.from(event.target.files);
const maxImages = 6;
// Clear previous images if uploading new ones
userImages = [];
document.getElementById('imageList').innerHTML = '';
files.slice(0, maxImages).forEach((file, index) => {
const reader = new FileReader();
reader.onload = function(e) {
const img = new Image();
img.onload = function() {
// Create texture from image without any color manipulation
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// Use original image dimensions or scale proportionally
const maxSize = 1024;
let canvasWidth, canvasHeight;
if (img.width > img.height) {
canvasWidth = Math.min(maxSize, img.width);
canvasHeight = (img.height / img.width) * canvasWidth;
} else {
canvasHeight = Math.min(maxSize, img.height);
canvasWidth = (img.width / img.height) * canvasHeight;
}
canvas.width = canvasWidth;
canvas.height = canvasHeight;
// Draw image without any transformations - preserve original colors and orientation
ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight);
const texture = new THREE.CanvasTexture(canvas);
texture.flipY = true; // Correct orientation for Three.js
texture.wrapS = THREE.ClampToEdgeWrapping;
texture.wrapT = THREE.ClampToEdgeWrapping;
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
texture.encoding = THREE.sRGBEncoding; // Preserve original colors
// Generate random color for each image
const colors = [0x00ffff, 0xff00ff, 0xffff00, 0xff6600, 0x00ff88, 0x8800ff];
const color = colors[index % colors.length];
const imageData = {
title: `Twoje Zdjęcie ${index + 1}`,
description: `Osobiste wspomnienie uchwycone w czasie, teraz unoszące się w cyfrowej przestrzeni.`,
color: color,
position: galleryData[index] ? galleryData[index].position : {
x: (index - 2.5) * 120,
y: Math.sin(index) * 50,
z: -index * 150
},
texture: texture,
filename: file.name
};
userImages.push(imageData);
// Add to UI list
const listItem = document.createElement('div');
listItem.className = 'image-item';
listItem.innerHTML = `
${file.name.length > 20 ? file.name.substring(0, 20) + '...' : file.name}
`;
document.getElementById('imageList').appendChild(listItem);
// Recreate gallery when all images are loaded
if (userImages.length === files.slice(0, maxImages).length) {
// Clear existing particles
particles.forEach(particle => scene.remove(particle));
particles = [];
createGallery();
// Update UI
document.querySelector('.gallery-info h3').textContent = 'Twoja Galeria';
document.querySelector('.gallery-info p').textContent = 'Doświadcz swoich wspomnień w trójwymiarowej przestrzeni, gdzie każde zdjęcie staje się bramą do przeszłości.';
}
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
});
}
Infinity Gallery - Depth of Dreams
ŁADOWANIE FOTOGRAFII DRONOWEJ...
