let scene, camera, renderer, particles;
let mouseX = 0, mouseY = 0;
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('particleCanvas'), alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
// Load the texture
const loader = new THREE.TextureLoader();
const texture = loader.load('https://itsmyshowproductions.com/wp-content/uploads/2024/08/IMSlogoShadow.png');
particles = new THREE.Group();
const colors = [
new THREE.Color(0x0000FF), // Blue
new THREE.Color(0xFFA500), // Orange
new THREE.Color(0xFFFF00), // Yellow
new THREE.Color(0xFF0000), // Red
new THREE.Color(0x00FF00), // Green
new THREE.Color(0x800080) // Purple
];
const particleCount = isMobile() ? 100 : 500;
const particleSize = isMobile() ? 10 : 20;
for (let i = 0; i < particleCount; i++) {
const material = new THREE.SpriteMaterial({
map: texture,
color: colors[Math.floor(Math.random() * colors.length)],
transparent: true,
opacity: 0.8
});
const particle = new THREE.Sprite(material);
particle.position.set(
Math.random() * 1000 - 500,
Math.random() * 1000 - 500,
Math.random() * 500 - 250
);
particle.scale.set(particleSize, particleSize, 1);
particles.add(particle);
}
scene.add(particles);
camera.position.z = 500;
document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener('touchmove', onDocumentTouchMove, false);
animate();
}
function isMobile() {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}
function onDocumentMouseMove(event) {
mouseX = (event.clientX - window.innerWidth / 2) / 100;
mouseY = (event.clientY - window.innerHeight / 2) / 100;
}
function onDocumentTouchMove(event) {
if (event.touches.length === 1) {
event.preventDefault();
mouseX = (event.touches[0].pageX - window.innerWidth / 2) / 100;
mouseY = (event.touches[0].pageY - window.innerHeight / 2) / 100;
}
}
function animate() {
requestAnimationFrame(animate);
particles.rotation.x += 0.0002;
particles.rotation.y += 0.0005;
// Move particles based on mouse/touch position
particles.position.x += (mouseX - particles.position.x) * 0.02;
particles.position.y += (-mouseY - particles.position.y) * 0.02;
renderer.render(scene, camera);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', onWindowResize, false);
init();
#particleCanvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
touch-action: none;
}
