script.js

// Set up the scene, camera, and renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({
    canvas: document.querySelector('.webgl'),
    alpha: true
});

renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

camera.position.z = 5;

// Create a torus
const torusGeometry = new THREE.TorusGeometry(1.5, 0.5, 16, 100);
const torusMaterial = new THREE.MeshBasicMaterial({ color: 0x0071e3 });
const torus = new THREE.Mesh(torusGeometry, torusMaterial);
scene.add(torus);

// Animate the torus to create a floating, dynamic motion
const clock = new THREE.Clock();

const animate = () => {
    const elapsedTime = clock.getElapsedTime();

    // Rotate the torus
    torus.rotation.x = elapsedTime * 0.2;
    torus.rotation.y = elapsedTime * 0.15;
    torus.rotation.z = elapsedTime * 0.3;

    // Use GSAP to add a smoother, liquid-like oscillation
    gsap.to(torus.position, {
        y: Math.sin(elapsedTime * 0.5) * 0.2,
        x: Math.cos(elapsedTime * 0.5) * 0.2,
        duration: 1,
        ease: "sine.inOut"
    });

    renderer.render(scene, camera);
    window.requestAnimationFrame(animate);
};

animate();

// Handle window resizing
window.addEventListener('resize', () => {
    // Update camera
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    // Update renderer
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
});