Spaces:

ParulPandey
/

3DHeart

Running

File size: 31,667 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive 3D Heart with Hand Gestures</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            font-family: Arial, sans-serif;
            background-color: #000020;
        }
        #info {
            position: absolute;
            top: 10px;
            width: 100%;
            text-align: center;
            color: white;
            z-index: 100;
            font-size: 16px;
            text-shadow: 1px 1px 2px black;
        }
        #scene-container {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        #video {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -1;
            transform: scaleX(-1); /* Mirror the video */
            opacity: 0.8; /* Make video slightly transparent */
        }
        .loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #00ffff;
            font-size: 24px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
            z-index: 100; /* Ensure it's visible */
            transition: opacity 1s ease;
            background-color: rgba(0, 0, 32, 0.7);
            padding: 20px;
            border-radius: 10px;
            border: 1px solid #00ffff;
            box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
        }
        .sci-fi-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(ellipse at center, rgba(0,20,80,0.2) 0%, rgba(0,10,40,0.6) 100%);
            pointer-events: none;
            z-index: 1;
        }
        .grid {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                linear-gradient(rgba(0, 100, 255, 0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 100, 255, 0.1) 1px, transparent 1px);
            background-size: 40px 40px;
            pointer-events: none;
            z-index: 2;
            opacity: 0.5;
        }
        #webcamButton {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #ff4757;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 50px;
            font-weight: bold;
            cursor: pointer;
            z-index: 100;
            transition: all 0.3s ease;
        }
        #webcamButton:hover {
            background-color: #ff6b81;
            transform: translateX(-50%) scale(1.05);
        }
        #webcamButton:disabled {
            background-color: #555;
            cursor: not-allowed;
        }
        .output_canvas {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            z-index: 20;
            pointer-events: none;
        }
        
        .gesture-indicator {
            position: absolute;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: #00ffff;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 16px;
            z-index: 100;
            transition: opacity 0.3s ease;
            border: 1px solid #00ffff;
            box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
            opacity: 0;
        }
        
        .controls-guide {
            position: absolute;
            bottom: 20px;
            right: 20px;
            z-index: 100;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .guide-item {
            display: flex;
            align-items: center;
            background-color: rgba(0, 0, 0, 0.7);
            padding: 8px;
            border-radius: 10px;
            border: 1px solid #00ffff;
        }
        
        .guide-icon {
            font-size: 24px;
            margin-right: 10px;
        }
        
        .guide-text {
            color: white;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div id="info">Interactive 3D Heart</div>
    <div class="sci-fi-overlay"></div>
    <div class="grid"></div>
    <video id="video" playsinline></video>
    <div id="scene-container"></div>
    <div class="loading" id="loading-text">Loading...</div>
    <button id="webcamButton">Enable Webcam</button>
    <canvas class="output_canvas"></canvas>
    <div style="position:fixed;top:10px;right:10px;z-index:200;">
      <label style="color:#00ffff;font-weight:bold;background:rgba(0,0,32,0.7);padding:6px 12px;border-radius:8px;">
        <input type="checkbox" id="pulseToggle" style="vertical-align:middle;margin-right:6px;"> Heart Pulsing
      </label>
    </div>
    <!-- Legend for gestures -->
    <div id="gesture-legend" style="position:fixed;top:80px;right:10px;z-index:201;background:rgba(0,0,32,0.85);border-radius:12px;padding:18px 22px 18px 18px;box-shadow:0 0 16px #00ffff44;border:1.5px solid #00ffff;max-width:270px;min-width:200px;">
      <div style="color:#00ffff;font-size:18px;font-weight:bold;margin-bottom:10px;text-align:left;">How to Control the Heart</div>
      <div style="display:flex;align-items:flex-start;margin-bottom:12px;">
        <span style="font-size:2em;margin-right:12px;">☝️</span>
        <div>
          <span style="color:#fff;font-weight:bold;">Point One Index Finger</span><br>
          <span style="color:#aaa;font-size:14px;">Rotate &amp; Tilt<br><span style="font-size:12px;">(Like dragging with a mouse, use either hand)</span></span>
        </div>
      </div>
      <div style="display:flex;align-items:flex-start;margin-bottom:12px;">
        <span style="font-size:2em;margin-right:12px;">🖐️</span>
        <div>
          <span style="color:#fff;font-weight:bold;">Spread Hand</span><br>
          <span style="color:#aaa;font-size:14px;">Zoom in/out<br><span style="font-size:12px;">(Like mouse wheel, use either hand)</span></span>
        </div>
      </div>
      <div style="display:flex;align-items:flex-start;margin-bottom:12px;">
        <span style="font-size:2em;margin-right:12px;">✊</span>
        <div>
          <span style="color:#fff;font-weight:bold;">Make a Fist</span><br>
          <span style="color:#aaa;font-size:14px;">Reset Heart<br><span style="font-size:12px;">(Return to starting view)</span></span>
        </div>
      </div>
      <div style="display:flex;align-items:flex-start;margin-bottom:12px;">
        <span style="font-size:2em;margin-right:12px;">✌️</span>
        <div>
          <span style="color:#fff;font-weight:bold;">Peace Sign</span><br>
          <span style="color:#aaa;font-size:14px;">Toggle Pulsing<br><span style="font-size:12px;">(Turn heart pulsing on/off)</span></span>
        </div>
      </div>
      <div style="margin-top:16px;color:#00ffff;font-size:13px;">Tip: Point one finger to rotate/tilt, spread your hand to zoom, make a fist to reset, peace sign to pulse!</div>
    </div>
    <!-- Import Map for ES Modules -->
    <script type="importmap">
        {
            "imports": {
                "three": "https://unpkg.com/[email protected]/build/three.module.js",
                "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
            }
        }
    </script>
    <!-- MediaPipe -->
    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/drawing_utils.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/hands.js"></script>
    <!-- Main Script (using ES modules) -->
    <script type="module">
    import * as THREE from 'three';
    import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
    
    // Scene setup
    let scene, camera, renderer, heart;
    let video, hands;
    let rotationSpeed = 0.01;
    let canvasElement, canvasCtx;
    
    // Hand tracking variables
    let leftHand = null;
    let rightHand = null;
    let isPinching = false;
    let startPinchRotation = 0;
    let currentRotation = 0;
    
    // UI elements
    let loadingText;
    
    // Option to enable/disable pulsing
    let pulsingEnabled = false;
    
    // Wait for DOM content to load before accessing elements
    document.addEventListener('DOMContentLoaded', () => {
        const webcamButton = document.getElementById('webcamButton');
        webcamButton.addEventListener('click', initApp);
    });
    
    // Initialize the app when the button is clicked
    async function initApp() {
        console.log("Initializing application");
        
        // Initialize DOM elements
        loadingText = document.getElementById('loading-text');
        
        const webcamButton = document.getElementById('webcamButton');
        webcamButton.disabled = true;
        
        // Setup canvas for hand tracking visualization
        canvasElement = document.querySelector('.output_canvas');
        canvasCtx = canvasElement.getContext('2d');
        
        // Initialize Three.js scene
        setupScene();
        
        // Add a debug object to ensure rendering works
        addDebugCube();
        
        // Load the heart model
        loadHeartModel();
        
        // Setup video and MediaPipe
        await setupMediaPipe();
        
        // Start animation loop
        animate();
        
        console.log("Initialization complete");
        webcamButton.textContent = 'Webcam Enabled';
        webcamButton.style.backgroundColor = '#4CAF50';
    }
    
    function addDebugCube() {
        // Add a simple cube to verify rendering pipeline
        const geometry = new THREE.BoxGeometry(1, 1, 1);
        const material = new THREE.MeshPhongMaterial({ color: 0x00ffff });
        const cube = new THREE.Mesh(geometry, material);
        cube.position.set(0, 0, 0);
        scene.add(cube);
        
        // Auto-remove after 5 seconds
        setTimeout(() => {
            scene.remove(cube);
            console.log("Debug cube removed");
        }, 5000);
    }

    function setupScene() {
        // Create scene
        scene = new THREE.Scene();
        scene.background = null; // Transparent background
        
        // Create camera
        const aspect = window.innerWidth / window.innerHeight;
        camera = new THREE.PerspectiveCamera(75, aspect, 0.1, 1000);
        camera.position.z = 5;
        
        // Create renderer with alpha: true for transparency
        renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor(0x000000, 0); // Fully transparent
        document.getElementById('scene-container').appendChild(renderer.domElement);
        
        // Add lights
        const ambientLight = new THREE.AmbientLight(0x404040, 2);
        scene.add(ambientLight);
        
        const directionalLight = new THREE.DirectionalLight(0xffffff, 2);
        directionalLight.position.set(1, 1, 1);
        scene.add(directionalLight);

        const bluePointLight = new THREE.PointLight(0x0044ff, 1.5, 20);
        bluePointLight.position.set(-3, 2, 3);
        scene.add(bluePointLight);

        const redPointLight = new THREE.PointLight(0xff4400, 1.5, 20);
        redPointLight.position.set(3, -2, 3);
        scene.add(redPointLight);
        
        // Setup window resize handler
        window.addEventListener('resize', onWindowResize);
    }

    function createHeartPlaceholder() {
        console.log("Creating heart placeholder");
        
        // Set your desired base scale here for the placeholder
        const baseScale = 3;
        // Create a simple heart-like shape using a sphere
        const geometry = new THREE.SphereGeometry(1.5, 32, 32);
        const material = new THREE.MeshPhongMaterial({ 
            color: 0xff0066,
            shininess: 100,
            emissive: 0x330000
        });
        heart = new THREE.Mesh(geometry, material);
        heart.scale.set(baseScale, baseScale, baseScale);
        scene.add(heart);
    // Sync pulsingEnabled with checkbox state
    const pulseToggle = document.getElementById('pulseToggle');
    if (pulseToggle) pulsingEnabled = pulseToggle.checked;
    if (pulsingEnabled) addPulsingEffect(heart, baseScale);
        loadingText.textContent = 'Using placeholder heart (models failed to load)';
        setTimeout(() => {
            loadingText.style.display = 'none';
        }, 3000);
    }

    function loadHeartModel() {
        console.log("Loading heart model...");
        const loader = new GLTFLoader();
        
        // Show that we're loading
        loadingText.textContent = 'Loading heart model...';
        
        // Set your desired base scale here
        const baseScale = 50; // Try 2, 5, 10, etc. for different sizes
        // Load directly with the available model
        loader.load(
            'stylizedhumanheart.glb',
            // Success callback
            function(gltf) {
                console.log("Model loaded successfully:", gltf);
                heart = gltf.scene;
                heart.scale.set(baseScale, baseScale, baseScale);
                scene.add(heart);
                // Center the model precisely in the scene
                const box = new THREE.Box3().setFromObject(heart);
                const center = box.getCenter(new THREE.Vector3());
                const size = box.getSize(new THREE.Vector3());
                // Center at (0,0,0) and adjust for any vertical offset
                heart.position.x = -center.x;
                heart.position.y = -center.y + (size.y / 2 - center.y); // shift so geometric center is at 0
                heart.position.z = -center.z;
                // Make sure model is visible
                heart.traverse((node) => {
                    if (node.isMesh) {
                        node.material.transparent = false;
                        node.material.opacity = 1.0;
                        node.material.needsUpdate = true;
                    }
                });
                // Sync pulsingEnabled with checkbox state
                const pulseToggle = document.getElementById('pulseToggle');
                if (pulseToggle) pulsingEnabled = pulseToggle.checked;
                if (pulsingEnabled) addPulsingEffect(heart, baseScale);
                loadingText.style.display = 'none';
            },
            // Progress callback
            function(xhr) {
                const percent = xhr.loaded / xhr.total * 100;
                loadingText.textContent = `Loading: ${Math.round(percent)}%`;
            },
            // Error callback
            function(error) {
                console.error('Error loading heart model:', error);
                loadingText.textContent = 'Error loading model. Creating placeholder...';
                createHeartPlaceholder();
            }
        );
    }

    // Use a callback-based loop for MediaPipe Hands
let mediapipeActive = false;

async function mediapipeFrameLoop() {
    if (!mediapipeActive) return;
    if (video && video.readyState === 4 && hands) {
        await hands.send({ image: video });
    }
    // Only request the next frame after the previous one is processed
    if (mediapipeActive) requestAnimationFrame(mediapipeFrameLoop);
}

    async function setupMediaPipe() {
        video = document.getElementById('video');
        
        try {
            console.log("Requesting camera permission...");
            loadingText.textContent = 'Requesting camera permission...';
            
            // Access the webcam with explicit permissions
            const stream = await navigator.mediaDevices.getUserMedia({
                video: { facingMode: 'user' },
                audio: false
            });
            console.log("Camera permission granted:", stream);
            video.srcObject = stream;
            
            // Set canvas dimensions to match video
            video.onloadedmetadata = () => {
                console.log("Video metadata loaded");
                video.play();
                canvasElement.width = video.videoWidth;
                canvasElement.height = video.videoHeight;
                loadingText.textContent = 'Camera enabled. Hand tracking active.';
                setTimeout(() => {
                    loadingText.style.opacity = '0';
                    setTimeout(() => loadingText.style.display = 'none', 1000);
                }, 3000);
                // Start MediaPipe hand tracking loop
                mediapipeActive = true;
                mediapipeFrameLoop();
            };
        } catch (error) {
            console.error("Camera permission denied or error:", error);
            loadingText.textContent = "Please allow camera access for hand tracking to work!";
            webcamButton.disabled = false;
        }
        
        // Initialize MediaPipe Hands
        hands = new Hands({
            locateFile: (file) => {
                return `https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/${file}`;
            }
        });
        
        hands.setOptions({
            maxNumHands: 2,
            modelComplexity: 1,
            minDetectionConfidence: 0.6,  // Increased for more reliable detection
            minTrackingConfidence: 0.5,
            selfieMode: true  // Correctly handle mirrored camera feed
        });
        
        hands.onResults(onHandResults);
        
        // Remove the old event listener for loadeddata
        // video.addEventListener('loadeddata', async () => {
        //     await hands.send({ image: video });
        // });
    }

    function onHandResults(results) {
        leftHand = null;
        rightHand = null;
        
        // Clear canvas
        canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
        
        if (results.multiHandLandmarks && results.multiHandLandmarks.length > 0) {
            for (let i = 0; i < results.multiHandLandmarks.length; i++) {
                const handLandmarks = results.multiHandLandmarks[i];
                const handedness = results.multiHandedness[i].label;

                // Note: MediaPipe hand detection is mirrored, so "Left" hand is actually right hand in the video
                if (handedness === 'Left') {
                    rightHand = handLandmarks; // Mapping correctly to user's perspective
                } else if (handedness === 'Right') {
                    leftHand = handLandmarks; // Mapping correctly to user's perspective
                }

                // Draw only index fingertip as a small dot for clarity
                const indexTip = handLandmarks[8];
                canvasCtx.beginPath();
                canvasCtx.arc(
                    indexTip.x * canvasElement.width,
                    indexTip.y * canvasElement.height,
                    5,
                    0,
                    2 * Math.PI
                );
                canvasCtx.fillStyle = '#00ffff';
                canvasCtx.fill();
            }
        }
        
        // Process hand gestures and get activity status (no on-screen gesture indicator)
        processHandGestures();
    }

    // Track current gesture for UI updates
    let currentGesture = null;
    
    // Remove gesture indicator text and hide the indicator (no-op)
    function updateGestureIndicator(gesture) {
        // No operation: all gesture indicator UI is removed
    }

    function processHandGestures() {
        // Peace sign (index and middle fingers extended, others folded) toggles pulsing (debounced)
        function isPeaceSign(hand) {
            if (!hand) return false;
            const palm = hand[0];
            // Index and middle tips far, others close
            const indexTip = hand[8];
            const middleTip = hand[12];
            if (!indexTip || !middleTip) return false;
            const indexDist = calculateDistance(palm, indexTip);
            const middleDist = calculateDistance(palm, middleTip);
            let folded = 0;
            [4,16,20].forEach(i => {
                const tip = hand[i];
                if (!tip) return;
                const d = calculateDistance(palm, tip);
                if (d < 0.08) folded++;
            });
            // Both index and middle extended, at least 2 others folded
            return (indexDist > 0.16 && middleDist > 0.16 && folded >= 2);
        }

        if (!processHandGestures.lastPeace) processHandGestures.lastPeace = false;
        const peaceNow = (leftHand && isPeaceSign(leftHand)) || (rightHand && isPeaceSign(rightHand));
        if (peaceNow && !processHandGestures.lastPeace) {
            pulsingEnabled = !pulsingEnabled;
            if (heart) {
                let scale = heart.scale.x;
                if (pulsingEnabled) {
                    addPulsingEffect(heart, scale);
                } else {
                    delete heart.userData.update;
                    heart.scale.set(scale, scale, scale);
                }
            }
        }
        processHandGestures.lastPeace = peaceNow;
        if (!heart) return;
        
        // Keep track of whether any gesture is active
        let gestureActive = false;
        
        // Minimal gestures: left index finger = rotate/tilt, left hand spread = zoom, fist = reset
        let leftIndex = leftHand ? leftHand[8] : null;

        // Helper: detect fist (all tips close to palm)
        function isFist(hand) {
            if (!hand) return false;
            const palm = hand[0];
            let closed = 0;
            [4,8,12,16,20].forEach(i => {
                const tip = hand[i];
                if (!tip) return;
                const d = calculateDistance(palm, tip);
                if (d < 0.08) closed++;
            });
            return closed >= 4;
        }

        // If either hand makes a fist, reset heart position (rotation, tilt, zoom, and pulsing off)
        if ((leftHand && isFist(leftHand)) || (rightHand && isFist(rightHand))) {
            // Reset to starting position: facing forward, upright, default zoom
            heart.rotation.set(0, 0, 0);
            heart.position.set(0, 0, 0);
            camera.position.set(0, 0, 5);
            // Turn off pulsing
            pulsingEnabled = false;
            if (heart) {
                delete heart.userData.update;
                let scale = heart.scale.x;
                heart.scale.set(scale, scale, scale);
            }
            processHandGestures.lastLeftIndex = null;
            processHandGestures.pinchSmoothing = null;
            processHandGestures.xSmoothing = null;
            return true;
        }

        // If left index finger is visible, allow rotation/tilt (like mouse drag)
        if (leftIndex) {
            gestureActive = true;

            // Smoothing variables (static across calls)
            if (!processHandGestures.lastLeftIndex) {
                processHandGestures.lastLeftIndex = { x: leftIndex.x, y: leftIndex.y };
            }
            if (!processHandGestures.pinchSmoothing) {
                processHandGestures.pinchSmoothing = { lastRotation: heart ? heart.rotation.y : 0, velocity: 0 };
            }
            if (!processHandGestures.xSmoothing) {
                processHandGestures.xSmoothing = { lastX: heart ? heart.rotation.x : 0, velocity: 0 };
            }
            const smoothing = processHandGestures.pinchSmoothing;
            const xSmooth = processHandGestures.xSmoothing;

            // Calculate movement deltas (in screen space)
            const deltaX = leftIndex.x - processHandGestures.lastLeftIndex.x;
            const deltaY = leftIndex.y - processHandGestures.lastLeftIndex.y;

            // Sensitivity (tweak as needed)
            const ROTATE_SENS = 7.5; // More sensitive for easier rotation
            const TILT_SENS = 7.5;

            // Horizontal rotation (Y axis): move left = rotate right, move right = rotate left (mirrored webcam)
            let targetY = heart.rotation.y + deltaX * ROTATE_SENS;
            // Remove clamping for full 360 rotation
            smoothing.velocity = (targetY - smoothing.lastRotation) * 0.4;
            smoothing.lastRotation += smoothing.velocity;
            heart.rotation.y = smoothing.lastRotation;

            // Vertical tilt (X axis): move up = tilt up, move down = tilt down (natural)
            let targetX = heart.rotation.x + deltaY * TILT_SENS;
            // Clamp only X axis (tilt), not Y (rotation)
            targetX = THREE.MathUtils.clamp(targetX, -Math.PI/2, Math.PI/2);
            xSmooth.velocity = (targetX - xSmooth.lastX) * 0.4;
            xSmooth.lastX += xSmooth.velocity;
            heart.rotation.x = xSmooth.lastX;

            // Update last position
            processHandGestures.lastLeftIndex.x = leftIndex.x;
            processHandGestures.lastLeftIndex.y = leftIndex.y;
        } else {
            // Not rotating, keep last rotation (locked), but allow zoom
            if (processHandGestures.pinchSmoothing && heart) processHandGestures.pinchSmoothing.lastRotation = heart.rotation.y;
            if (processHandGestures.xSmoothing && heart) processHandGestures.xSmoothing.lastX = heart.rotation.x;
            // Reset lastLeftIndex so next time we don't get a big jump
            processHandGestures.lastLeftIndex = null;
        }

        // Helper: detect fist (all tips close to palm)
        function isFist(hand) {
            // Compare tip (4,8,12,16,20) to palm (0)
            const palm = hand[0];
            let closed = 0;
            [4,8,12,16,20].forEach(i => {
                const tip = hand[i];
                const d = calculateDistance(palm, tip);
                if (d < 0.08) closed++;
            });
            return closed >= 4;
        }
        
        // Process open hand gesture (for zoom)
        if (leftHand) {
            gestureActive = true;
            
            // Improved method: use distance between thumb and pinky
            const thumb = leftHand[4];
            const pinky = leftHand[20];
            
            if (thumb && pinky) {
                const handSpread = calculateDistance(thumb, pinky);
                
                // Map the hand spread to camera zoom with better sensitivity
                const zoomFactor = THREE.MathUtils.lerp(10, 3, handSpread * 2);
                
                // Smooth camera movement
                camera.position.z = THREE.MathUtils.lerp(
                    camera.position.z,
                    zoomFactor,
                    0.1 // Smoothing factor
                );
            }
        }
        
        // Return whether any gesture is active to control auto-rotation
        return gestureActive;
    }

    function calculateDistance(point1, point2) {
        return Math.sqrt(
            Math.pow(point1.x - point2.x, 2) +
            Math.pow(point1.y - point2.y, 2)
        );
    }

function addPulsingEffect(model, baseScale = 1.0) {
    let time = 0;
    // Heartbeat: very sharp up, very quick drop, more visible
    model.userData.update = function(delta) {
        time += delta;
        // 1.4 Hz = ~84 bpm (children's heart rate, slightly faster)
        const freq = 1.4;
        const t = (time * freq) % 1.0;
        // Sharper, more prominent heartbeat: very sharp peak, quick drop
        let beat = Math.exp(-60 * (t - 0.12) * (t - 0.12)) * 2.2; // much sharper, higher
        beat += 0.22 * Math.max(0, Math.sin(Math.PI * t)); // more visible base pulse
        const pulseFactor = 1.0 + 0.13 * beat;
        model.scale.set(
            baseScale * pulseFactor,
            baseScale * pulseFactor,
            baseScale * pulseFactor
        );
    };
}

    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
        
        // Update canvas size if needed
        if (canvasElement && video) {
            canvasElement.width = video.videoWidth;
            canvasElement.height = video.videoHeight;
        }
    }

    // Track hand presence for auto-rotation
    let handsDetectedTime = 0;
    let lastHandsDetectedState = false;
    
    function animate() {
        requestAnimationFrame(animate);
        
        // Apply heart pulsing effect only if enabled
        if (pulsingEnabled && heart && heart.userData.update) {
            heart.userData.update(0.01);
        }
        
        // Check if hands are detected
        const handsDetected = leftHand || rightHand;
        
        // Track when hands state changes for smoother transitions
        if (handsDetected !== lastHandsDetectedState) {
            lastHandsDetectedState = handsDetected;
            handsDetectedTime = Date.now();
            
            // Update gesture indicator when hands disappear
            if (!handsDetected) {
                updateGestureIndicator("No Hands Detected");
            }
        }
        
        // Remove automatic rotation and wobble
        // if (heart) {
        //     if (!handsDetected) {
        //         // Auto rotation only when no hands detected
        //         const timeSinceHandsGone = Date.now() - handsDetectedTime;
        //         // Start auto-rotation only after hands have been absent for 1.5 seconds
        //         if (timeSinceHandsGone > 1500) {
        //             // Gradually increase rotation speed
        //             const speedFactor = Math.min(1.0, (timeSinceHandsGone - 1500) / 2000);
        //             heart.rotation.y += rotationSpeed * speedFactor;
        //         }
        //     }
        //     // Add slight wobble for more dynamic presentation when no specific interaction
        //     if (!isPinching && !handsDetected) {
        //         const wobble = Math.sin(Date.now() * 0.001) * 0.005;
        //         heart.rotation.x = wobble;
        //     }
        // }
        
        renderer.render(scene, camera);
    }
    </script>
    
    <script>
    // UI for toggling pulsing
    // This script must run after the main script so pulsingEnabled and heart are available
    // If you want the heart to pulse by default, set pulsingEnabled = true above

    document.addEventListener('DOMContentLoaded', () => {
      const pulseToggle = document.getElementById('pulseToggle');
      if (pulseToggle) {
        pulseToggle.checked = false;
        pulseToggle.addEventListener('change', (e) => {
          pulsingEnabled = e.target.checked;
          // Remove/update pulsing effect on the fly
          if (heart) {
            if (pulsingEnabled) {
              // Re-add pulsing effect with current scale
              let scale = heart.scale.x;
              addPulsingEffect(heart, scale);
            } else {
              // Remove pulsing effect
              delete heart.userData.update;
              // Reset to current scale
              let scale = heart.scale.x;
              heart.scale.set(scale, scale, scale);
            }
          }
        });
      }
    });
    </script>
</body>
</html>