import * as THREE from 'three'; import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; // Will be replaced or augmented by FBXLoader import { FBXLoader } from 'three/addons/loaders/FBXLoader.js'; // Import FBXLoader import { HandLandmarker, FilesetResolver } from 'https://esm.sh/@mediapipe/tasks-vision@0.10.14'; import { AudioManager } from 'audioManager'; // Import the AudioManager import { SpeechManager } from 'SpeechManager'; // Import SpeechManager export class Game { // Added export here constructor(renderDiv) { this.renderDiv = renderDiv; this.scene = null; this.camera = null; this.renderer = null; this.videoElement = null; this.handLandmarker = null; this.lastVideoTime = -1; this.hands = []; // Stores data about detected hands (landmarks, anchor position, line group) this.handLineMaterial = null; // Material for hand lines this.fingertipMaterialHand1 = null; // Material for first hand's fingertip circles (blue) this.fingertipMaterialHand2 = null; // Material for second hand's fingertip circles (green) this.fingertipLandmarkIndices = [0, 4, 8, 12, 16, 20]; // WRIST + TIP landmarks this.handConnections = null; // Landmark connection definitions // this.handCollisionRadius = 30; // Conceptual radius for hand collision, was 25 (sphere radius) - Not needed for template this.gameState = 'loading'; // loading, ready, tracking, error this.gameOverText = null; // Will be repurposed or simplified this.clock = new THREE.Clock(); this.audioManager = new AudioManager(); // Create an instance of AudioManager this.lastLandmarkPositions = [[], []]; // Store last known smoothed positions for each hand's landmarks this.smoothingFactor = 0.4; // Alpha for exponential smoothing (0 < alpha <= 1). Smaller = more smoothing. this.loadedModels = {}; this.pandaModel = null; // Add reference for the Panda model this.animationMixer = null; // For Stan model animations this.animationClips = []; // To store all animation clips from the model this.animationActions = {}; // To store animation actions by name or index this.currentAction = null; // To keep track of the currently playing animation action this.speechManager = null; this.speechBubble = null; this.speechBubbleTimeout = null; this.isSpeechActive = false; // Track if speech recognition is active for styling this.grabbingHandIndex = -1; // -1: no hand, 0: first hand, 1: second hand grabbing this.pickedUpModel = null; // Reference to the model being dragged this.modelDragOffset = new THREE.Vector3(); // Offset between model and pinch point in 3D this.modelGrabStartDepth = 0; // To store the model's Z depth when grabbed this.interactionMode = 'drag'; // 'drag', 'rotate', 'scale', 'animate' - Default to drag this.interactionModeButtons = {}; // To store references to mode buttons this.loadedDroppedModelData = null; // To temporarily store parsed GLTF data this.interactionModeColors = { drag: { base: '#00FFFF', text: '#000000', hand: new THREE.Color('#00FFFF') }, // Cyan rotate: { base: '#FF00FF', text: '#FFFFFF', hand: new THREE.Color('#FF00FF') }, // Magenta scale: { base: '#FFFF00', text: '#000000', hand: new THREE.Color('#FFFF00') }, // Yellow animate: { base: '#FFA500', text: '#000000', hand: new THREE.Color('#FFA500') } // Orange }; this.rotateLastHandX = null; // Stores the last hand X position for rotation calculation this.rotateSensitivity = 0.02; // Adjust for faster/slower rotation this.scaleInitialPinchDistance = null; // Stores the initial distance between two pinching hands this.scaleInitialModelScale = null; // Stores the model's scale when scaling starts this.scaleSensitivity = 0.05; // Adjust for faster/slower scaling - Increased from 0.02 to 0.05 this.grabbingPulseSpeed = 8; // Speed of the grab pulse animation this.grabbingPulseAmplitude = 0.5; // How much the scale increases (e.g., 0.5 means 50% bigger at peak) this.pulseBaseScale = 1.0; // Base scale for non-pulsing and start of pulse this.fingertipDefaultOpacity = 0.3; // Default opacity for hand landmarks (Reduced from 0.6) this.fingertipGrabOpacity = 1.0; // Opacity when hand is actively grabbing/interacting this.instructionTextElement = null; // DOM element for instruction text this.interactionModeInstructions = { drag: "Pinch to grab and move the model", rotate: "Pinch and move hand left/right to rotate", scale: "Use two hands. Pinch with both and move hands closer/farther", animate: "Pinch and move hand up/down to cycle animations" // Updated instruction }; this.animationControlHandIndex = -1; // Index of the hand controlling animation scrolling this.animationControlInitialPinchY = null; // Initial Y position of the pinch for animation scrolling this.animationScrollThreshold = 40; // Pixels of vertical movement to trigger an animation change (Reduced from 50) // Initialize asynchronously this._init().catch(error => { console.error("Initialization failed:", error); this._showError("Initialization failed. Check console."); }); } async _init() { this._setupDOM(); // Sets up basic DOM, including speech bubble container this._setupThree(); this._setupSpeechRecognition(); // Initialize SpeechManager await this._loadAssets(); // Add asset loading step await this._setupHandTracking(); // This needs to complete before we can proceed // Ensure webcam is playing before starting game logic dependent on it await this.videoElement.play(); this.audioManager.resumeContext(); // Resume audio context as game starts automatically this.speechManager.requestPermissionAndStart(); // Start speech recognition this.clock.start(); // Start the main clock as game starts automatically window.addEventListener('resize', this._onResize.bind(this)); this.gameState = 'tracking'; // Change state to tracking to start immediately this._animate(); // Start the animation loop (it will check state) } _setupDOM() { this.renderDiv.style.position = 'relative'; this.renderDiv.style.width = '100vw'; // Use viewport units for fullscreen this.renderDiv.style.height = '100vh'; this.renderDiv.style.overflow = 'hidden'; this.renderDiv.style.background = '#111'; // Fallback background // Start Screen Overlay and related DOM elements (title, instructions, loading text) removed. // --- End Start Screen Overlay --- this.videoElement = document.createElement('video'); this.videoElement.style.position = 'absolute'; this.videoElement.style.top = '0'; this.videoElement.style.left = '0'; this.videoElement.style.width = '100%'; this.videoElement.style.height = '100%'; this.videoElement.style.objectFit = 'cover'; this.videoElement.style.transform = 'scaleX(-1)'; // Mirror view for intuitive control this.videoElement.autoplay = true; this.videoElement.muted = true; // Mute video to avoid feedback loops if audio was captured this.videoElement.playsInline = true; this.videoElement.style.zIndex = '0'; // Ensure video is behind THREE canvas this.renderDiv.appendChild(this.videoElement); // Container for Status text (formerly Game Over) and restart hint this.gameOverContainer = document.createElement('div'); this.gameOverContainer.style.position = 'absolute'; this.gameOverContainer.style.top = '50%'; this.gameOverContainer.style.left = '50%'; this.gameOverContainer.style.transform = 'translate(-50%, -50%)'; this.gameOverContainer.style.zIndex = '10'; this.gameOverContainer.style.display = 'none'; // Hidden initially this.gameOverContainer.style.pointerEvents = 'none'; // Don't block clicks this.gameOverContainer.style.textAlign = 'center'; // Center text elements within this.gameOverContainer.style.color = 'white'; // Default color, can be changed by _showError // this.gameOverContainer.style.textShadow = '2px 2px 4px black'; // Removed for flatter look this.gameOverContainer.style.fontFamily = '"Arial", "Helvetica Neue", Helvetica, sans-serif'; // Cleaner, modern sans-serif // Main Status Text (formerly Game Over Text) this.gameOverText = document.createElement('div'); // Will be 'gameOverText' internally this.gameOverText.innerText = 'STATUS'; // Generic placeholder this.gameOverText.style.fontSize = 'clamp(36px, 10vw, 72px)'; // Responsive font size this.gameOverText.style.fontWeight = 'bold'; this.gameOverText.style.marginBottom = '10px'; // Space below main text this.gameOverContainer.appendChild(this.gameOverText); // Restart Hint Text (may or may not be shown depending on context) this.restartHintText = document.createElement('div'); this.restartHintText.innerText = '(click to restart tracking)'; this.restartHintText.style.fontSize = 'clamp(16px, 3vw, 24px)'; this.restartHintText.style.fontWeight = 'normal'; this.restartHintText.style.opacity = '0.8'; // Slightly faded this.gameOverContainer.appendChild(this.restartHintText); this.renderDiv.appendChild(this.gameOverContainer); // --- Speech Bubble --- this.speechBubble = document.createElement('div'); this.speechBubble.id = 'speech-bubble'; this.speechBubble.style.position = 'absolute'; this.speechBubble.style.top = '10px'; // Changed from 20px to 10px this.speechBubble.style.left = '50%'; this.speechBubble.style.transform = 'translateX(-50%)'; this.speechBubble.style.padding = '15px 25px'; this.speechBubble.style.backgroundColor = 'rgba(255, 255, 255, 0.9)'; this.speechBubble.style.border = '2px solid black'; // Solid black border this.speechBubble.style.borderRadius = '4px'; // Sharper corners this.speechBubble.style.boxShadow = '4px 4px 0px rgba(0,0,0,1)'; // Hard shadow this.speechBubble.style.color = '#333'; this.speechBubble.style.fontFamily = '"Arial", "Helvetica Neue", Helvetica, sans-serif'; // Consistent modern sans-serif this.speechBubble.style.fontSize = 'clamp(16px, 3vw, 22px)'; this.speechBubble.style.maxWidth = '80%'; this.speechBubble.style.textAlign = 'center'; this.speechBubble.style.zIndex = '25'; // Above most things but below modal popups if any this.speechBubble.style.opacity = '0'; // Hidden initially, fade in // Added boxShadow, border, padding, fontSize, top to transition for smooth active state changes this.speechBubble.style.transition = 'opacity 0.5s ease-in-out, transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, border 0.3s ease-in-out, padding 0.3s ease-in-out, font-size 0.3s ease-in-out, top 0.3s ease-in-out'; this.speechBubble.style.pointerEvents = 'none'; // Not interactive this.speechBubble.innerHTML = "..."; // Default text this.renderDiv.appendChild(this.speechBubble); // Animation buttons container this.animationButtonsContainer = document.createElement('div'); this.animationButtonsContainer.id = 'animation-buttons-container'; this.animationButtonsContainer.style.position = 'absolute'; this.animationButtonsContainer.style.bottom = 'auto'; // Remove bottom positioning this.animationButtonsContainer.style.top = '10px'; // Position from the top, changed from 20px this.animationButtonsContainer.style.left = '10px'; // Position from the left, changed from 20px this.animationButtonsContainer.style.transform = 'none'; // Remove centering transform this.animationButtonsContainer.style.zIndex = '30'; // Above speech bubble this.animationButtonsContainer.style.display = 'flex'; this.animationButtonsContainer.style.flexDirection = 'column'; // Arrange buttons in a column this.animationButtonsContainer.style.gap = '4px'; // Reduced gap for tighter vertical layout this.animationButtonsContainer.style.opacity = '0'; // Start fully transparent for fade-in this.animationButtonsContainer.style.transition = 'opacity 0.3s ease-in-out'; // Smooth fade transition this.animationButtonsContainer.style.display = 'none'; // Initially hidden (will be set to flex by logic) this.renderDiv.appendChild(this.animationButtonsContainer); // Interaction Mode UI Container this.interactionModeContainer = document.createElement('div'); this.interactionModeContainer.id = 'interaction-mode-container'; this.interactionModeContainer.style.position = 'absolute'; this.interactionModeContainer.style.top = '10px'; // Changed from 20px this.interactionModeContainer.style.right = '10px'; // Changed from 20px this.interactionModeContainer.style.zIndex = '30'; this.interactionModeContainer.style.display = 'flex'; this.interactionModeContainer.style.flexDirection = 'column'; this.interactionModeContainer.style.gap = '4px'; this.renderDiv.appendChild(this.interactionModeContainer); // Create interaction mode buttons ['Drag', 'Rotate', 'Scale', 'Animate'].forEach(mode => { const button = document.createElement('button'); button.innerText = mode; button.id = `interaction-mode-${mode.toLowerCase()}`; button.style.padding = '10px 22px'; // Increased padding button.style.fontSize = '18px'; // Increased font size further button.style.border = '2px solid black'; // Consistent black border button.style.borderRadius = '4px'; // Sharper corners button.style.cursor = 'pointer'; button.style.fontWeight = 'bold'; // Always bold button.style.transition = 'background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease'; // Faster transition, added shadow button.style.boxShadow = '2px 2px 0px black'; // Default shadow for inactive button.addEventListener('click', () => this._setInteractionMode(mode.toLowerCase())); this.interactionModeContainer.appendChild(button); this.interactionModeButtons[mode.toLowerCase()] = button; // Store button reference }); this._updateInteractionModeButtonStyles(); // Apply initial styles // Instruction Text Element this.instructionTextElement = document.createElement('div'); this.instructionTextElement.id = 'instruction-text'; this.instructionTextElement.style.position = 'absolute'; this.instructionTextElement.style.bottom = '10px'; // Decreased bottom margin this.instructionTextElement.style.left = '50%'; this.instructionTextElement.style.transform = 'translateX(-50%)'; this.instructionTextElement.style.padding = '8px 15px'; this.instructionTextElement.style.backgroundColor = 'rgba(255, 255, 255, 0.9)'; // Light background this.instructionTextElement.style.color = 'black'; // Black text this.instructionTextElement.style.borderRadius = '4px'; // Sharper corners this.instructionTextElement.style.fontFamily = '"Arial", "Helvetica Neue", Helvetica, sans-serif'; this.instructionTextElement.style.border = '2px solid black'; // Solid black border this.instructionTextElement.style.boxShadow = '3px 3px 0px black'; // Hard shadow this.instructionTextElement.style.fontSize = 'clamp(13px, 2vw, 15px)'; // Adjusted size this.instructionTextElement.style.textAlign = 'center'; this.instructionTextElement.style.zIndex = '20'; this.instructionTextElement.style.pointerEvents = 'none'; this.instructionTextElement.style.opacity = '1'; // Fully opaque this.instructionTextElement.style.transition = 'opacity 0.3s ease-in-out, bottom 0.3s ease-in-out, box-shadow 0.2s ease'; this.renderDiv.appendChild(this.instructionTextElement); this._updateInstructionText(); // Set initial instruction text this._setupDragAndDrop(); // Add drag and drop listeners } _setupThree() { const width = this.renderDiv.clientWidth; const height = this.renderDiv.clientHeight; this.scene = new THREE.Scene(); // Using OrthographicCamera for a 2D-like overlay effect this.camera = new THREE.OrthographicCamera(width / -2, width / 2, height / 2, height / -2, 1, 2000); // Increased far plane this.camera.position.z = 100; // Position along Z doesn't change scale in Ortho this.renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); this.renderer.setSize(width, height); this.renderer.setPixelRatio(window.devicePixelRatio); this.renderer.domElement.style.position = 'absolute'; this.renderer.domElement.style.top = '0'; this.renderer.domElement.style.left = '0'; this.renderer.domElement.style.zIndex = '1'; // Canvas on top of video this.renderDiv.appendChild(this.renderer.domElement); const ambientLight = new THREE.AmbientLight(0xffffff, 1.5); // Increased intensity this.scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 1.8); // Increased intensity directionalLight.position.set(0, 0, 100); // Pointing from behind camera this.scene.add(directionalLight); // Setup hand visualization (palm circles removed, lines will be added later) for (let i = 0; i < 2; i++) { // Support up to 2 hands const lineGroup = new THREE.Group(); lineGroup.visible = false; this.scene.add(lineGroup); this.hands.push({ landmarks: null, anchorPos: new THREE.Vector3(), lineGroup: lineGroup, isPinching: false, // True if thumb and index finger are close pinchPointScreen: new THREE.Vector2(), // Screen coordinates of the pinch isFist: false // True if hand is detected as a fist }); } this.handLineMaterial = new THREE.LineBasicMaterial({ color: 0x00ccff, linewidth: 8 }); // Kept line material default for now const initialModeHandColor = this.interactionModeColors[this.interactionMode]?.hand || new THREE.Color(0x00ccff); this.fingertipMaterialHand1 = new THREE.MeshBasicMaterial({ color: initialModeHandColor.clone(), side: THREE.DoubleSide, transparent: true, opacity: this.fingertipDefaultOpacity }); this.fingertipMaterialHand2 = new THREE.MeshBasicMaterial({ color: initialModeHandColor.clone(), side: THREE.DoubleSide, transparent: true, opacity: this.fingertipDefaultOpacity }); // Define connections for MediaPipe hand landmarks // See: https://developers.google.com/mediapipe/solutions/vision/hand_landmarker#hand_landmarks this.handConnections = [ // Thumb [0, 1], [1, 2], [2, 3], [3, 4], // Index finger [0, 5], [5, 6], [6, 7], [7, 8], // Middle finger [0, 9], [9, 10], [10, 11], [11, 12], // Ring finger [0, 13], [13, 14], [14, 15], [15, 16], // Pinky [0, 17], [17, 18], [18, 19], [19, 20], // Palm [5, 9], [9, 13], [13, 17] // Connect base of fingers ]; } async _loadAssets() { console.log("Loading assets..."); const gltfLoader = new GLTFLoader(); // Changed from FBXLoader try { await new Promise((resolve, reject) => { gltfLoader.load( // Changed from fbxLoader.load 'https://play.rosebud.ai/assets/Stan.gltf?xWWX', // URL of the Stan model (gltf) => { // Changed from fbx to gltf this.pandaModel = gltf.scene; // GLTFLoader returns an object with a 'scene' property this.animationMixer = new THREE.AnimationMixer(this.pandaModel); this.animationClips = gltf.animations; if (this.animationClips && this.animationClips.length) { this.animationClips.forEach((clip, index) => { const action = this.animationMixer.clipAction(clip); const actionName = clip.name || `Animation ${index + 1}`; this.animationActions[actionName] = action; // Create a button for this animation const button = document.createElement('button'); button.innerText = actionName; button.style.padding = '5px 10px'; // Adjusted padding button.style.fontSize = '13px'; // Consistent font size button.style.backgroundColor = '#f0f0f0'; // Light grey default button.style.color = 'black'; button.style.border = '2px solid black'; // Black border button.style.borderRadius = '4px'; // Sharper corners button.style.cursor = 'pointer'; button.style.transition = 'background-color 0.2s ease, box-shadow 0.2s ease'; button.style.boxShadow = '2px 2px 0px black'; // Default shadow button.addEventListener('click', () => this._playAnimation(actionName)); this.animationButtonsContainer.appendChild(button); console.log(`Loaded animation and created button for: ${actionName}`); }); // Play the first animation by default // Try to find and play an "idle" animation by default let defaultActionName = Object.keys(this.animationActions)[0]; // Fallback to the first animation const idleActionKey = Object.keys(this.animationActions).find(name => name.toLowerCase().includes('idle')); if (idleActionKey) { defaultActionName = idleActionKey; console.log(`Found idle animation: ${defaultActionName}`); } else if (defaultActionName) { console.log(`No specific idle animation found, defaulting to first animation: ${defaultActionName}`); } if (defaultActionName && this.animationActions[defaultActionName]) { this.currentAction = this.animationActions[defaultActionName]; this.currentAction.play(); console.log(`Playing default animation: ${defaultActionName}`); this._updateButtonStyles(defaultActionName); } else { console.log("No animations found or default animation could not be played."); } } else { console.log("Stan model has no embedded animations."); } // Scale and position the model // These values might need adjustment based on the model's original size and pivot const scale = 80; // This scale might need adjustment for Stan model this.pandaModel.scale.set(scale, scale, scale); // Position the model: X=center, Y=roughly bottom, Z=in front of hands const sceneHeight = this.renderDiv.clientHeight; this.pandaModel.position.set(0, sceneHeight * -0.45, -1000); // Updated Z to -1000 this.scene.add(this.pandaModel); console.log("Stan GLTF model loaded and added to scene."); resolve(); }, undefined, // onProgress callback (error) => { console.error('An error occurred while loading the Stan GLTF model:', error); // Updated log reject(error); } ); }); console.log("All specified assets loaded."); } catch (error) { console.error("Error loading assets:", error); this._showError("Failed to load 3D model."); throw error; // Stop initialization } } async _setupHandTracking() { try { console.log("Setting up Hand Tracking..."); const vision = await FilesetResolver.forVisionTasks( 'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.14/wasm' ); this.handLandmarker = await HandLandmarker.createFromOptions(vision, { baseOptions: { modelAssetPath: `https://storage.googleapis.com/mediapipe-models/hand_landmarker/hand_landmarker/float16/1/hand_landmarker.task`, delegate: 'GPU', // Use GPU if available }, numHands: 2, runningMode: 'VIDEO', // Process video stream }); console.log("HandLandmarker created."); console.log("Requesting webcam access..."); const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user', width: { ideal: 1920 }, // Request Full HD width height: { ideal: 1080 } // Request Full HD height }, audio: false, }); this.videoElement.srcObject = stream; console.log("Webcam stream obtained."); // Wait for video metadata to load to ensure dimensions are available return new Promise((resolve) => { this.videoElement.onloadedmetadata = () => { console.log("Webcam metadata loaded."); // Adjust video size slightly after metadata is loaded if needed, but CSS handles most this.videoElement.style.width = this.renderDiv.clientWidth + 'px'; this.videoElement.style.height = this.renderDiv.clientHeight + 'px'; resolve(); }; }); } catch (error) { console.error('Error setting up Hand Tracking or Webcam:', error); this._showError(`Webcam/Hand Tracking Error: ${error.message}. Please allow camera access.`); throw error; // Re-throw to stop initialization } } // _startSpawning, _scheduleNextSpawn, _stopSpawning, _spawnGhost methods removed. _updateHands() { if (!this.handLandmarker || !this.videoElement.srcObject || this.videoElement.readyState < 2 || this.videoElement.videoWidth === 0) return; // this.isAnyHandHovering = false; // Reset hover state each frame - REMOVED const videoTime = this.videoElement.currentTime; if (videoTime > this.lastVideoTime) { this.lastVideoTime = videoTime; try { const results = this.handLandmarker.detectForVideo(this.videoElement, performance.now()); const videoParams = this._getVisibleVideoParameters(); if (!videoParams) return; const canvasWidth = this.renderDiv.clientWidth; const canvasHeight = this.renderDiv.clientHeight; for (let i = 0; i < this.hands.length; i++) { const hand = this.hands[i]; if (results.landmarks && results.landmarks[i]) { let currentRawLandmarks = results.landmarks[i]; if (!this.lastLandmarkPositions[i] || this.lastLandmarkPositions[i].length !== currentRawLandmarks.length) { this.lastLandmarkPositions[i] = currentRawLandmarks.map(lm => ({ ...lm })); } const smoothedLandmarks = currentRawLandmarks.map((lm, lmIndex) => { const prevLm = this.lastLandmarkPositions[i][lmIndex]; return { x: this.smoothingFactor * lm.x + (1 - this.smoothingFactor) * prevLm.x, y: this.smoothingFactor * lm.y + (1 - this.smoothingFactor) * prevLm.y, z: this.smoothingFactor * lm.z + (1 - this.smoothingFactor) * prevLm.z, // visibility and presence are not typically part of MediaPipe landmark objects directly, // but if they were, you might carry them over or smooth them if appropriate. }; }); this.lastLandmarkPositions[i] = smoothedLandmarks.map(lm => ({...lm})); // Update last positions with new smoothed ones hand.landmarks = smoothedLandmarks; const palm = smoothedLandmarks[9]; // MIDDLE_FINGER_MCP const lmOriginalX = palm.x * videoParams.videoNaturalWidth; const lmOriginalY = palm.y * videoParams.videoNaturalHeight; let normX_visible = (lmOriginalX - videoParams.offsetX) / videoParams.visibleWidth; let normY_visible = (lmOriginalY - videoParams.offsetY) / videoParams.visibleHeight; const handX = (1 - normX_visible) * canvasWidth - canvasWidth / 2; const handY = (1 - normY_visible) * canvasHeight - canvasHeight / 2; hand.anchorPos.set(handX, handY, 1); // Hover detection logic REMOVED const prevIsPinching = hand.isPinching; // Store previous pinch state // Pinch detection logic const thumbTipLm = smoothedLandmarks[4]; // THUMB_TIP landmark index const indexTipLm = smoothedLandmarks[8]; // INDEX_FINGER_TIP landmark index if (thumbTipLm && indexTipLm) { // Convert landmark coordinates to screen space for pinch detection const convertToScreenSpace = (lm) => { const originalX = lm.x * videoParams.videoNaturalWidth; const originalY = lm.y * videoParams.videoNaturalHeight; let normX_visible = (originalX - videoParams.offsetX) / videoParams.visibleWidth; let normY_visible = (originalY - videoParams.offsetY) / videoParams.visibleHeight; return { x: (1 - normX_visible) * canvasWidth - canvasWidth / 2, y: (1 - normY_visible) * canvasHeight - canvasHeight / 2 }; }; const thumbTipScreen = convertToScreenSpace(thumbTipLm); const indexTipScreen = convertToScreenSpace(indexTipLm); const distanceX = thumbTipScreen.x - indexTipScreen.x; const distanceY = thumbTipScreen.y - indexTipScreen.y; const pinchDistance = Math.sqrt(distanceX * distanceX + distanceY * distanceY); const pinchThreshold = 45; // Increased from 35. Distance in screen pixels to consider a pinch. if (pinchDistance < pinchThreshold) { hand.isPinching = true; hand.pinchPointScreen.set( (thumbTipScreen.x + indexTipScreen.x) / 2, (thumbTipScreen.y + indexTipScreen.y) / 2 ); } else { hand.isPinching = false; } } else { hand.isPinching = false; } // Fist detection logic (simple version based on finger curl) // This is a basic fist detection. More robust methods might involve checking distances // of all fingertips to the palm or wrist. const isTipNearMCP = (tipLandmark, mcpLandmark, threshold = 0.1) => { if (!tipLandmark || !mcpLandmark) return false; // Using 3D distance, but could simplify to 2D if performance is an issue // and Z-depth isn't significantly varying for this gesture. const dx = tipLandmark.x - mcpLandmark.x; const dy = tipLandmark.y - mcpLandmark.y; // const dz = tipLandmark.z - mcpLandmark.z; // Can include Z if needed const distance = Math.sqrt(dx*dx + dy*dy /* + dz*dz */); return distance < threshold; }; const indexFingerTip = smoothedLandmarks[8]; const indexFingerMcp = smoothedLandmarks[5]; const middleFingerTip = smoothedLandmarks[12]; const middleFingerMcp = smoothedLandmarks[9]; const ringFingerTip = smoothedLandmarks[16]; const ringFingerMcp = smoothedLandmarks[13]; const pinkyTip = smoothedLandmarks[20]; const pinkyMcp = smoothedLandmarks[17]; // Check if at least 3 fingers are curled (tip near MCP joint) let curledFingers = 0; if (isTipNearMCP(indexFingerTip, indexFingerMcp, 0.08)) curledFingers++; if (isTipNearMCP(middleFingerTip, middleFingerMcp, 0.08)) curledFingers++; if (isTipNearMCP(ringFingerTip, ringFingerMcp, 0.08)) curledFingers++; if (isTipNearMCP(pinkyTip, pinkyMcp, 0.08)) curledFingers++; const prevIsFist = hand.isFist; hand.isFist = curledFingers >= 3; // Requires at least 3 fingers to be curled // Interaction Logic if (this.interactionMode === 'animate') { // Release any model grab from other modes if (this.grabbingHandIndex !== -1 && this.pickedUpModel) { // console.log(`Switched to Animate mode or model grab was active. Releasing.`); this.grabbingHandIndex = -1; this.pickedUpModel = null; // if (this.grabMarker && this.pandaModel) this.grabMarker.visible = true; // Grab marker removed // Reset other mode-specific states this.rotateLastHandX = null; this.scaleInitialPinchDistance = null; this.scaleInitialModelScale = null; } if (hand.isPinching) { if (!prevIsPinching && this.animationControlHandIndex === -1) { // Pinch just started and no hand is controlling animation this.animationControlHandIndex = i; this.animationControlInitialPinchY = hand.pinchPointScreen.y; console.log(`Hand ${i} started pinch for animation control at Y: ${this.animationControlInitialPinchY}`); } else if (this.animationControlHandIndex === i && this.animationControlInitialPinchY !== null) { // Pinch continues with the controlling hand const deltaY = hand.pinchPointScreen.y - this.animationControlInitialPinchY; if (Math.abs(deltaY) > this.animationScrollThreshold) { const animationNames = Object.keys(this.animationActions); if (animationNames.length > 0) { let currentIndex = -1; // Find the index of the currently playing animation action if (this.currentAction) { for (let j = 0; j < animationNames.length; j++) { if (this.animationActions[animationNames[j]] === this.currentAction) { currentIndex = j; break; } } } let nextIndex = currentIndex; if (deltaY < 0) { // Moved up nextIndex = (currentIndex + 1) % animationNames.length; // Now scrolls to next console.log("Scrolling animation UP (to next)"); } else { // Moved down nextIndex = (currentIndex - 1 + animationNames.length) % animationNames.length; // Now scrolls to previous console.log("Scrolling animation DOWN (to previous)"); } if (nextIndex !== currentIndex) { this._playAnimation(animationNames[nextIndex]); } } // Reset initial Y to require another full threshold movement this.animationControlInitialPinchY = hand.pinchPointScreen.y; } } } else { // Hand is NOT pinching (still within animate mode) if (prevIsPinching && this.animationControlHandIndex === i) { // Pinch just ended for the controlling hand console.log(`Hand ${i} ended pinch for animation control.`); this.animationControlHandIndex = -1; this.animationControlInitialPinchY = null; } } } else if (this.interactionMode === 'drag') { if (hand.isPinching) { if (!prevIsPinching && this.grabbingHandIndex === -1 && this.pandaModel) { // Pinch just started & nothing is grabbed // REMOVED: Bounding box check - drag can be initiated from anywhere if not scaling this.grabbingHandIndex = i; this.pickedUpModel = this.pandaModel; // Convert 2D screen pinch point to 3D world point on a plane // The plane is at the model's current Z depth this.modelGrabStartDepth = this.pickedUpModel.position.z; // Store initial depth const pinchX = hand.pinchPointScreen.x; const pinchY = hand.pinchPointScreen.y; // Convert 2D screen pinch point (origin center) to NDC (Normalized Device Coords, -1 to 1) const ndcX = pinchX / (this.renderDiv.clientWidth / 2); const ndcY = pinchY / (this.renderDiv.clientHeight / 2); const pinchPoint3DWorld = new THREE.Vector3(ndcX, ndcY, 0.5); // Start with a neutral NDC Z pinchPoint3DWorld.unproject(this.camera); pinchPoint3DWorld.z = this.modelGrabStartDepth; // Force Z to the grab depth console.log(`Grab screen: (${pinchX.toFixed(2)}, ${pinchY.toFixed(2)}), NDC: (${ndcX.toFixed(2)}, ${ndcY.toFixed(2)})`); console.log(`Grab 3D World (pre-offset): ${pinchPoint3DWorld.x.toFixed(2)}, ${pinchPoint3DWorld.y.toFixed(2)}, ${pinchPoint3DWorld.z.toFixed(2)}`); this.modelDragOffset.subVectors(this.pickedUpModel.position, pinchPoint3DWorld); console.log(`Hand ${i} GRABBED model for DRAG at depth ${this.modelGrabStartDepth}. Offset:`, this.modelDragOffset.x.toFixed(2), this.modelDragOffset.y.toFixed(2), this.modelDragOffset.z.toFixed(2) ); } else if (this.grabbingHandIndex === i && this.pickedUpModel) { // Hand is pinching AND is the one grabbing // Update model position based on pinch const currentPinchX = hand.pinchPointScreen.x; const currentPinchY = hand.pinchPointScreen.y; const currentNdcX = (currentPinchX / (this.renderDiv.clientWidth / 2)); const currentNdcY = (currentPinchY / (this.renderDiv.clientHeight / 2)); const newPinchPoint3DWorld = new THREE.Vector3(currentNdcX, currentNdcY, 0.5); newPinchPoint3DWorld.unproject(this.camera); newPinchPoint3DWorld.z = this.modelGrabStartDepth; // Force Z to the original grab depth plane this.pickedUpModel.position.addVectors(newPinchPoint3DWorld, this.modelDragOffset); const minZ = -200; const maxZ = 50; this.pickedUpModel.position.z = Math.max(minZ, Math.min(maxZ, this.pickedUpModel.position.z)); } } else { // Hand is NOT pinching (still within drag mode) if (prevIsPinching && this.grabbingHandIndex === i) { // Pinch just ended and this hand was grabbing console.log(`Hand ${i} RELEASED Stan model (Drag mode) at position:`, this.pickedUpModel.position); this.grabbingHandIndex = -1; this.pickedUpModel = null; // if (this.grabMarker && this.pandaModel) this.grabMarker.visible = true; // Show marker when released - Grab marker removed } } } else if (this.interactionMode === 'rotate') { if (hand.isPinching) { // Changed from hand.isFist if (!prevIsPinching && this.grabbingHandIndex === -1 && this.pandaModel) { // Pinch just started & nothing grabbed for rotation // REMOVED: Bounding box check - rotate can be initiated from anywhere if not scaling this.grabbingHandIndex = i; this.pickedUpModel = this.pandaModel; this.rotateLastHandX = hand.pinchPointScreen.x; // Store initial pinch X for delta calculation console.log(`Hand ${i} INITIATED ROTATION on model via pinch from anywhere.`); } else if (this.grabbingHandIndex === i && this.pickedUpModel && this.rotateLastHandX !== null) { // Hand is pinching AND is the one "grabbing" for rotation const currentHandX = hand.pinchPointScreen.x; // Use pinch point X for delta const deltaX = currentHandX - this.rotateLastHandX; if (this.pickedUpModel && Math.abs(deltaX) > 0.5) { this.pickedUpModel.rotation.y -= deltaX * this.rotateSensitivity; } this.rotateLastHandX = currentHandX; } } else { // Hand is NOT pinching (still within rotate mode) if (prevIsPinching && this.grabbingHandIndex === i) { // Pinch just ended and this hand was "grabbing" for rotation console.log(`Hand ${i} RELEASED ROTATION on model (pinch ended).`); this.grabbingHandIndex = -1; this.pickedUpModel = null; this.rotateLastHandX = null; // if (this.grabMarker && this.pandaModel) this.grabMarker.visible = true; // Grab marker removed } } } else if (this.interactionMode === 'scale') { const hand0 = this.hands[0]; const hand1 = this.hands[1]; if (hand0 && hand1 && hand0.landmarks && hand1.landmarks && hand0.isPinching && hand1.isPinching) { // Both hands are visible and pinching const dist = hand0.pinchPointScreen.distanceTo(hand1.pinchPointScreen); if (this.scaleInitialPinchDistance === null || this.scaleInitialModelScale === null) { // Start of scaling gesture this.scaleInitialPinchDistance = dist; this.scaleInitialModelScale = this.pandaModel.scale.clone(); // Store initial scale vector this.grabbingHandIndex = 0; // Mark as "grabbing" for scaling (using hand 0 as primary) this.pickedUpModel = this.pandaModel; // Indicate model is being interacted with // if(this.grabMarker) this.grabMarker.visible = false; // Grab marker removed console.log(`Scaling initiated. Initial pinch dist: ${dist.toFixed(2)}, Initial scale: ${this.scaleInitialModelScale.x.toFixed(2)}`); } else { // Continue scaling const deltaDistance = dist - this.scaleInitialPinchDistance; const scaleFactorChange = deltaDistance * this.scaleSensitivity; let newScaleValue = this.scaleInitialModelScale.x + scaleFactorChange; // Clamp scale to prevent extreme sizes or inversion const minScale = 10; // Example min scale (adjust based on model's base size) const maxScale = 300; // Example max scale newScaleValue = Math.max(minScale, Math.min(maxScale, newScaleValue)); this.pandaModel.scale.set(newScaleValue, newScaleValue, newScaleValue); // console.log(`Scaling: Current pinch dist: ${dist.toFixed(2)}, Scale change: ${scaleFactorChange.toFixed(3)}, New scale value: ${newScaleValue.toFixed(2)}`); } } else { // One or both hands are not pinching or not visible, or scaling was active if (this.scaleInitialPinchDistance !== null) { console.log("Scaling gesture ended."); this.scaleInitialPinchDistance = null; this.scaleInitialModelScale = null; this.grabbingHandIndex = -1; this.pickedUpModel = null; // if(this.grabMarker && this.pandaModel) this.grabMarker.visible = true; // Grab marker removed } } } this._updateHandLines(i, smoothedLandmarks, videoParams, canvasWidth, canvasHeight); } else { // No landmarks for this hand if (hand.isPinching && this.grabbingHandIndex === i && this.interactionMode === 'drag') { console.log(`Hand ${i} (which was grabbing for drag) disappeared. Releasing model.`); this.grabbingHandIndex = -1; this.pickedUpModel = null; // if (this.grabMarker && this.pandaModel) this.grabMarker.visible = true; // Grab marker removed } else if (this.hands[i].isPinching && this.grabbingHandIndex === i && this.interactionMode === 'rotate') { // Check actual previous pinch state console.log(`Hand ${i} (which was pinching for rotate) disappeared. Releasing model.`); this.grabbingHandIndex = -1; this.pickedUpModel = null; this.rotateLastHandX = null; // if (this.grabMarker && this.pandaModel) this.grabMarker.visible = true; // Grab marker removed } else if (this.interactionMode === 'scale' && this.scaleInitialPinchDistance !== null && (i === 0 || i === 1)) { const hand0Exists = this.hands[0]?.landmarks; const hand1Exists = this.hands[1]?.landmarks; if (!hand0Exists || !hand1Exists) { console.log("Scaling gesture ended due to hand disappearance."); this.scaleInitialPinchDistance = null; this.scaleInitialModelScale = null; this.grabbingHandIndex = -1; this.pickedUpModel = null; // if(this.grabMarker && this.pandaModel) this.grabMarker.visible = true; // Grab marker removed } } hand.landmarks = null; hand.isPinching = false; hand.isFist = false; if (hand.lineGroup) hand.lineGroup.visible = false; } // Play interaction click sound for this hand if applicable (not for scale, handled after loop) let isThisHandActivelyInteractingForSound = false; if (this.interactionMode === 'drag' || this.interactionMode === 'rotate') { isThisHandActivelyInteractingForSound = (this.grabbingHandIndex === i && this.pickedUpModel === this.pandaModel); } else if (this.interactionMode === 'animate') { isThisHandActivelyInteractingForSound = (this.animationControlHandIndex === i); } if (hand.isPinching && isThisHandActivelyInteractingForSound && this.interactionMode !== 'scale') { this.audioManager.playInteractionClickSound(); } } // End of hand loop // After processing both hands, if in scale mode and one hand stops pinching, explicitly stop scaling. if (this.interactionMode === 'scale' && this.scaleInitialPinchDistance !== null) { const hand0 = this.hands[0]; const hand1 = this.hands[1]; const hand0PinchingAndVisible = hand0 && hand0.landmarks && hand0.isPinching; const hand1PinchingAndVisible = hand1 && hand1.landmarks && hand1.isPinching; if (hand0PinchingAndVisible && hand1PinchingAndVisible) { // If scaling is active and both hands are pinching, play sound this.audioManager.playInteractionClickSound(); } else { // If scaling was active but one hand stopped pinching or disappeared if (this.scaleInitialPinchDistance !== null) { console.log("Scaling gesture ended (one hand stopped pinching/disappeared - post-loop check)."); this.scaleInitialPinchDistance = null; this.scaleInitialModelScale = null; this.grabbingHandIndex = -1; this.pickedUpModel = null; // if(this.grabMarker && this.pandaModel) this.grabMarker.visible = true; // Grab marker removed } } } } catch (error) { console.error("Error during hand detection:", error); } } } _getModelScreenBoundingBox() { if (!this.pandaModel || !this.camera || !this.renderer) { return null; } // Ensure the model's world matrix is up to date this.pandaModel.updateMatrixWorld(true); const box = new THREE.Box3().setFromObject(this.pandaModel); if (box.isEmpty()) { return null; // Model might not be loaded or has no geometry } const corners = [ new THREE.Vector3(box.min.x, box.min.y, box.min.z), new THREE.Vector3(box.min.x, box.min.y, box.max.z), new THREE.Vector3(box.min.x, box.max.y, box.min.z), new THREE.Vector3(box.min.x, box.max.y, box.max.z), new THREE.Vector3(box.max.x, box.min.y, box.min.z), new THREE.Vector3(box.max.x, box.min.y, box.max.z), new THREE.Vector3(box.max.x, box.max.y, box.min.z), new THREE.Vector3(box.max.x, box.max.y, box.max.z), ]; let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity; const canvasWidth = this.renderDiv.clientWidth; const canvasHeight = this.renderDiv.clientHeight; corners.forEach(corner => { // Apply model's world transformation to the local bounding box corners corner.applyMatrix4(this.pandaModel.matrixWorld); // Project to Normalized Device Coordinates (NDC) corner.project(this.camera); // Convert NDC to screen coordinates (origin at center of screen) // This matches the coordinate system of pinchPointScreen const screenX = corner.x * (canvasWidth / 2); const screenY = corner.y * (canvasHeight / 2); // In Three.js NDC, +Y is up minX = Math.min(minX, screenX); maxX = Math.max(maxX, screenX); minY = Math.min(minY, screenY); maxY = Math.max(maxY, screenY); }); if (minX === Infinity) return null; // All points were behind camera or some other issue return { minX, minY, maxX, maxY }; } _getVisibleVideoParameters() { if (!this.videoElement || this.videoElement.videoWidth === 0 || this.videoElement.videoHeight === 0) { return null; } const vNatW = this.videoElement.videoWidth; const vNatH = this.videoElement.videoHeight; const rW = this.renderDiv.clientWidth; const rH = this.renderDiv.clientHeight; if (vNatW === 0 || vNatH === 0 || rW === 0 || rH === 0) return null; const videoAR = vNatW / vNatH; const renderDivAR = rW / rH; let finalVideoPixelX, finalVideoPixelY; let visibleVideoPixelWidth, visibleVideoPixelHeight; if (videoAR > renderDivAR) { // Video is wider than renderDiv, scaled to fit renderDiv height, cropped horizontally. const scale = rH / vNatH; // Scale factor based on height. const scaledVideoWidth = vNatW * scale; // Width of video if scaled to fit renderDiv height. // Total original video pixels cropped horizontally (from both sides combined). const totalCroppedPixelsX = (scaledVideoWidth - rW) / scale; finalVideoPixelX = totalCroppedPixelsX / 2; // Pixels cropped from the left of original video. finalVideoPixelY = 0; // No vertical cropping. visibleVideoPixelWidth = vNatW - totalCroppedPixelsX; // Width of the visible part in original video pixels. visibleVideoPixelHeight = vNatH; // Full height is visible. } else { // Video is taller than renderDiv (or same AR), scaled to fit renderDiv width, cropped vertically. const scale = rW / vNatW; // Scale factor based on width. const scaledVideoHeight = vNatH * scale; // Height of video if scaled to fit renderDiv width. // Total original video pixels cropped vertically (from top and bottom combined). const totalCroppedPixelsY = (scaledVideoHeight - rH) / scale; finalVideoPixelX = 0; // No horizontal cropping. finalVideoPixelY = totalCroppedPixelsY / 2; // Pixels cropped from the top of original video. visibleVideoPixelWidth = vNatW; // Full width is visible. visibleVideoPixelHeight = vNatH - totalCroppedPixelsY; // Height of the visible part in original video pixels. } // Safety check for degenerate cases (e.g., extreme aspect ratios leading to zero visible dimension) if (visibleVideoPixelWidth <= 0 || visibleVideoPixelHeight <= 0) { // Fallback or log error, this shouldn't happen in normal scenarios console.warn("Calculated visible video dimension is zero or negative.", {visibleVideoPixelWidth, visibleVideoPixelHeight}); return { // Return full video dimensions as a fallback to prevent division by zero offsetX: 0, offsetY: 0, visibleWidth: vNatW, visibleHeight: vNatH, videoNaturalWidth: vNatW, videoNaturalHeight: vNatH }; } return { offsetX: finalVideoPixelX, offsetY: finalVideoPixelY, visibleWidth: visibleVideoPixelWidth, visibleHeight: visibleVideoPixelHeight, videoNaturalWidth: vNatW, videoNaturalHeight: vNatH }; } // _updateGhosts method removed. _showStatusScreen(message, color = 'white', showRestartHint = false) { // Generalized from _showGameOver this.gameOverContainer.style.display = 'block'; this.gameOverText.innerText = message; this.gameOverText.style.color = color; this.restartHintText.style.display = showRestartHint ? 'block' : 'none'; // No spawning to stop for template } _showError(message) { this.gameOverContainer.style.display = 'block'; this.gameOverText.innerText = `ERROR: ${message}`; this.gameOverText.style.color = 'orange'; this.restartHintText.style.display = 'true'; // Show restart hint on error this.gameState = 'error'; // No spawning to stop this.hands.forEach(hand => { if (hand.lineGroup) hand.lineGroup.visible = false; }); } _restartGame() { // Renamed to _restartTracking or similar if preferred console.log("Restarting tracking..."); this.gameOverContainer.style.display = 'none'; this.hands.forEach(hand => { if (hand.lineGroup) { hand.lineGroup.visible = false; } }); // Ghost removal removed // Score reset removed // Visibility of game elements removed this.gameState = 'tracking'; // Changed from 'playing' this.lastVideoTime = -1; this.clock.start(); // Removed _startSpawning() } // _updateScoreDisplay method removed. _onResize() { const width = this.renderDiv.clientWidth; const height = this.renderDiv.clientHeight; // Update camera perspective this.camera.left = width / -2; this.camera.right = width / 2; this.camera.top = height / 2; this.camera.bottom = height / -2; this.camera.updateProjectionMatrix(); // Update renderer size this.renderer.setSize(width, height); // Update video element size this.videoElement.style.width = width + 'px'; this.videoElement.style.height = height + 'px'; // Watermelon, Chad, GroundLine updates removed. } _updateHandLines(handIndex, landmarks, videoParams, canvasWidth, canvasHeight) { const hand = this.hands[handIndex]; const lineGroup = hand.lineGroup; // Determine if this specific hand is currently involved in a grab/scale interaction let isThisHandActivelyInteracting = false; if (this.interactionMode === 'drag' || this.interactionMode === 'rotate') { isThisHandActivelyInteracting = (this.grabbingHandIndex === handIndex && this.pickedUpModel === this.pandaModel); } else if (this.interactionMode === 'scale') { // For scale, both hands involved show the effect if scaling is active isThisHandActivelyInteracting = (this.scaleInitialPinchDistance !== null && (handIndex === 0 || handIndex === 1)); } else if (this.interactionMode === 'animate') { // For animate, the hand controlling animation scrolling (via pinch) shows the effect isThisHandActivelyInteracting = (this.animationControlHandIndex === handIndex); } const currentHandMaterial = handIndex === 0 ? this.fingertipMaterialHand1 : this.fingertipMaterialHand2; if (currentHandMaterial) { currentHandMaterial.opacity = isThisHandActivelyInteracting ? this.fingertipGrabOpacity : this.fingertipDefaultOpacity; } while (lineGroup.children.length) { const child = lineGroup.children[0]; lineGroup.remove(child); if (child.geometry) child.geometry.dispose(); // Materials are shared, no need to dispose them here unless they are unique per line/circle } if (!landmarks || landmarks.length === 0 || !videoParams) { lineGroup.visible = false; return; } let isAnyLandmarkOffScreen = false; // First, check if any landmark is off-screen based on unclamped normalized coordinates for (const lm of landmarks) { const lmOriginalX = lm.x * videoParams.videoNaturalWidth; const lmOriginalY = lm.y * videoParams.videoNaturalHeight; const normX_visible = (lmOriginalX - videoParams.offsetX) / videoParams.visibleWidth; const normY_visible = (lmOriginalY - videoParams.offsetY) / videoParams.visibleHeight; if (normX_visible < 0 || normX_visible > 1 || normY_visible < 0 || normY_visible > 1) { isAnyLandmarkOffScreen = true; break; } } if (isAnyLandmarkOffScreen) { lineGroup.visible = false; return; } // If all landmarks are on-screen (or would be, before clamping), proceed to calculate points3D for drawing. // These points will use clamped coordinates to ensure they are drawn within canvas bounds if very close to edge. const points3D = landmarks.map(lm => { const lmOriginalX = lm.x * videoParams.videoNaturalWidth; const lmOriginalY = lm.y * videoParams.videoNaturalHeight; let normX_visible = (lmOriginalX - videoParams.offsetX) / videoParams.visibleWidth; let normY_visible = (lmOriginalY - videoParams.offsetY) / videoParams.visibleHeight; // Clamp values FOR DRAWING purposes normX_visible = Math.max(0, Math.min(1, normX_visible)); normY_visible = Math.max(0, Math.min(1, normY_visible)); const x = (1 - normX_visible) * canvasWidth - canvasWidth / 2; const y = (1 - normY_visible) * canvasHeight - canvasHeight / 2; return new THREE.Vector3(x, y, 1.1); // Z for fingertip circles, slightly in front of lines }); const lineZ = 1; // Z for connection lines this.handConnections.forEach(conn => { const p1 = points3D[conn[0]]; const p2 = points3D[conn[1]]; if (p1 && p2) { // Ensure landmarks exist // Create points for the line with the correct Z const lineP1 = p1.clone().setZ(lineZ); const lineP2 = p2.clone().setZ(lineZ); const geometry = new THREE.BufferGeometry().setFromPoints([lineP1, lineP2]); const line = new THREE.Line(geometry, this.handLineMaterial); lineGroup.add(line); } }); // Draw fingertip circles const fingertipRadius = 8; // Radius of the circle for fingertips const wristRadius = 12; // Larger radius for the wrist const circleSegments = 16; // Smoothness of the circle this.fingertipLandmarkIndices.forEach(index => { const landmarkPosition = points3D[index]; if (landmarkPosition) { const radius = (index === 0) ? wristRadius : fingertipRadius; // Use wristRadius for landmark 0 const circleGeometry = new THREE.CircleGeometry(radius, circleSegments); // The 'currentHandMaterial' (fetched and opacity-updated above) is used here. const landmarkCircle = new THREE.Mesh(circleGeometry, currentHandMaterial); landmarkCircle.position.copy(landmarkPosition); // Already has Z=1.1 // Pulse scaling also depends on 'isThisHandActivelyInteracting' if (isThisHandActivelyInteracting) { // Apply pulsing effect to scale // (1 + sin) / 2 gives a 0-1 range, perfect for modulating amplitude const currentPulseProgress = (1 + Math.sin(this.clock.elapsedTime * this.grabbingPulseSpeed)) / 2; const scaleValue = this.pulseBaseScale + currentPulseProgress * this.grabbingPulseAmplitude; landmarkCircle.scale.set(scaleValue, scaleValue, 1); } else { landmarkCircle.scale.set(this.pulseBaseScale, this.pulseBaseScale, 1); // Reset scale } lineGroup.add(landmarkCircle); } }); lineGroup.visible = true; } _animate() { requestAnimationFrame(this._animate.bind(this)); const deltaTime = this.clock.getDelta(); // Update hands if tracking if (this.gameState === 'tracking') { this._updateHands(); } // Update animation mixer if (this.animationMixer) { this.animationMixer.update(deltaTime); } // Bounding box helper visibility logic REMOVED // _updateGhosts and _updateParticles calls removed. // Always render the scene this.renderer.render(this.scene, this.camera); } start() { // Add click listener for resuming audio context and potentially restarting on error this.renderDiv.addEventListener('click', () => { this.audioManager.resumeContext(); if (this.gameState === 'error' || this.gameState === 'paused') { // Assuming 'paused' might be a state where restart is desired this._restartGame(); // Restart tracking } }); console.log('Game setup initiated. Waiting for async operations...'); // Note: Game interaction now starts automatically after _init completes. } _updateSpeechBubbleAppearance() { if (!this.speechBubble) return; const isPlaceholder = this.speechBubble.innerHTML === "..." || this.speechBubble.innerText === "..."; // Apply active styling only if recognition is generally active AND we are not displaying the placeholder. // This means interim/final text will get the active style, but the "..." placeholder will not, // even if the recognition service itself is still running in the background. const showActiveStyling = this.isSpeechActive && !isPlaceholder; const translateY = isPlaceholder ? '-5px' : '0px'; const scale = showActiveStyling ? '1.15' : '1.0'; this.speechBubble.style.transform = `translateX(-50%) translateY(${translateY}) scale(${scale})`; if (showActiveStyling) { // Cyan glow, blue drop shadow, enhanced original shadow // Active speech bubble: brighter color, stronger shadow this.speechBubble.style.boxShadow = '5px 5px 0px #007bff'; // Active blue shadow this.speechBubble.style.border = '2px solid black'; // Keep black border this.speechBubble.style.padding = '18px 28px'; // Slightly larger padding this.speechBubble.style.fontSize = 'clamp(20px, 3.5vw, 26px)'; // Larger font when active this.speechBubble.style.top = '15px'; // Increased top margin when active, reduced from 30px to complement base 10px } else { // Default/inactive styling // Default/inactive speech bubble styling this.speechBubble.style.boxShadow = '4px 4px 0px rgba(0,0,0,1)'; // Hard black shadow this.speechBubble.style.border = '2px solid black'; // Black border this.speechBubble.style.padding = '15px 25px'; this.speechBubble.style.fontSize = 'clamp(16px, 3vw, 22px)'; // Original font size this.speechBubble.style.top = '10px'; // Original top margin, changed from 20px } } _setupSpeechRecognition() { this.speechManager = new SpeechManager( (finalTranscript, interimTranscript) => { // onTranscript callback if (this.speechBubble) { clearTimeout(this.speechBubbleTimeout); if (finalTranscript) { this.speechBubble.innerHTML = finalTranscript; this.speechBubble.style.opacity = '1'; this.speechBubbleTimeout = setTimeout(() => { this.speechBubble.innerHTML = "..."; this.speechBubble.style.opacity = '0.7'; this._updateSpeechBubbleAppearance(); // Update appearance for "..." }, 2000); } else if (interimTranscript) { this.speechBubble.innerHTML = `${interimTranscript}`; this.speechBubble.style.opacity = '1'; } else { // No final, no interim (e.g., recognition just started, ended, or error) this.speechBubbleTimeout = setTimeout(() => { if (this.speechBubble.innerHTML !== "...") { this.speechBubble.innerHTML = "..."; } this.speechBubble.style.opacity = '0.7'; this._updateSpeechBubbleAppearance(); // Update appearance for "..." }, 500); } this._updateSpeechBubbleAppearance(); } }, (isActive) => { // onRecognitionActive callback this.isSpeechActive = isActive; this._updateSpeechBubbleAppearance(); }, (command) => { // onCommandRecognized callback console.log(`Game received command: ${command}`); const validCommands = ['drag', 'rotate', 'scale', 'animate']; if (validCommands.includes(command.toLowerCase())) { this._setInteractionMode(command.toLowerCase()); } else { console.warn(`Unrecognized command via speech: ${command}`); } } ); // Initialize speech bubble with "..." and apply initial appearance if (this.speechBubble) { this.speechBubble.innerHTML = "..."; this.speechBubble.style.opacity = '0.7'; this._updateSpeechBubbleAppearance(); // Apply initial styles (isSpeechActive will be false) } // We will call requestPermissionAndStart() on user interaction (e.g., start button) } _playAnimation(name) { if (!this.animationActions[name]) { console.warn(`Animation "${name}" not found.`); return; } const newAction = this.animationActions[name]; if (this.currentAction === newAction && newAction.isRunning()) { console.log(`Animation "${name}" is already playing.`); return; // Already playing this animation } if (this.currentAction) { this.currentAction.fadeOut(0.5); // Fade out current animation over 0.5 seconds } newAction.reset().fadeIn(0.5).play(); // Reset, fade in and play new animation this.currentAction = newAction; console.log(`Playing animation: ${name}`); this._updateButtonStyles(name); } _updateButtonStyles(activeAnimationName) { const buttons = this.animationButtonsContainer.children; for (let i = 0; i < buttons.length; i++) { const button = buttons[i]; const isActive = button.innerText === activeAnimationName; button.style.backgroundColor = isActive ? '#007bff' : '#f0f0f0'; // Blue if active, light grey if not button.style.color = isActive ? 'white' : 'black'; button.style.fontWeight = isActive ? 'bold' : 'normal'; // Active button has its shadow "pressed" button.style.boxShadow = isActive ? '1px 1px 0px black' : '2px 2px 0px black'; } } _setInteractionMode(mode) { if (this.interactionMode === mode) return; // No change console.log(`Setting interaction mode to: ${mode}`); this.interactionMode = mode; // If currently grabbing, release the model if (this.grabbingHandIndex !== -1 && this.pickedUpModel) { console.log(`Interaction mode changed while grabbing. Releasing model from hand ${this.grabbingHandIndex}.`); this.grabbingHandIndex = -1; this.pickedUpModel = null; this.rotateLastHandX = null; this.scaleInitialPinchDistance = null; // Reset scaling variables this.scaleInitialModelScale = null; // if (this.grabMarker && this.pandaModel) this.grabMarker.visible = true; // Grab marker removed } this._updateHandMaterialsForMode(mode); // Update hand colors for new mode this._updateInteractionModeButtonStyles(); // Show/hide animation buttons container based on mode if (this.animationButtonsContainer) { if (mode === 'animate') { this.animationButtonsContainer.style.display = 'flex'; requestAnimationFrame(() => { // Ensure display is set before opacity transition this.animationButtonsContainer.style.opacity = '1'; }); } else { this.animationButtonsContainer.style.opacity = '0'; // Wait for transition to complete before setting display to none setTimeout(() => { if (this.interactionMode !== 'animate') { // Check again in case mode changed rapidly this.animationButtonsContainer.style.display = 'none'; } }, 300); // Corresponds to transition duration } } this._updateInstructionText(); // Update instruction text when mode changes } _updateInstructionText() { if (this.instructionTextElement) { const instruction = this.interactionModeInstructions[this.interactionMode] || "Use hand gestures to interact."; this.instructionTextElement.innerText = instruction; // The instruction text should always be 10px from the bottom. // The animation buttons are positioned from the top-left and should not affect this. this.instructionTextElement.style.bottom = '10px'; // Decreased bottom margin } } _updateHandMaterialsForMode(mode) { const modeConfig = this.interactionModeColors[mode]; const colorToSet = modeConfig ? modeConfig.hand : new THREE.Color(0x00ccff); // Fallback color if (this.fingertipMaterialHand1) { this.fingertipMaterialHand1.color.set(colorToSet); } if (this.fingertipMaterialHand2) { this.fingertipMaterialHand2.color.set(colorToSet); } } _updateInteractionModeButtonStyles() { for (const modeKey in this.interactionModeButtons) { const button = this.interactionModeButtons[modeKey]; const modeConfig = this.interactionModeColors[modeKey]; const fallbackColor = '#6c757d'; const fallbackTextColor = 'white'; if (modeKey === this.interactionMode) { // Active button button.style.border = '2px solid black'; // All buttons have black border if (modeConfig) { button.style.backgroundColor = modeConfig.base; button.style.color = modeConfig.text; } else { button.style.backgroundColor = fallbackColor; button.style.color = fallbackTextColor; } button.style.fontWeight = 'bold'; // Already bold from initial setup, but ensure it stays button.style.boxShadow = '1px 1px 0px black'; // "Pressed" shadow for active button } else { // Inactive buttons button.style.backgroundColor = 'rgba(255, 255, 255, 0.5)'; // More opaque transparent white background button.style.border = '2px solid black'; // Black border for inactive if (modeConfig) { button.style.color = modeConfig.base; // Neon text color } else { button.style.color = fallbackColor; // Fallback text color for inactive } button.style.fontWeight = 'bold'; // Always bold button.style.boxShadow = '2px 2px 0px black'; // Default shadow for inactive } } // Explicitly set display for animationButtonsContainer based on current mode // This ensures it's correct even on initial load if default mode isn't 'animate' if (this.animationButtonsContainer) { if (this.interactionMode === 'animate') { this.animationButtonsContainer.style.display = 'flex'; requestAnimationFrame(() => { this.animationButtonsContainer.style.opacity = '1'; }); } else { this.animationButtonsContainer.style.opacity = '0'; this.animationButtonsContainer.style.display = 'none'; // Set display none immediately if not animate } } this._updateInstructionText(); // Also call here to adjust position if animation buttons are shown/hidden } _setupDragAndDrop() { this.renderDiv.addEventListener('dragover', (event) => { event.preventDefault(); // Prevent default behavior to allow drop event.dataTransfer.dropEffect = 'copy'; // Show a copy icon this.renderDiv.style.border = '2px dashed #007bff'; // Visual feedback }); this.renderDiv.addEventListener('dragleave', (event) => { this.renderDiv.style.border = 'none'; // Remove visual feedback }); this.renderDiv.addEventListener('drop', (event) => { event.preventDefault(); this.renderDiv.style.border = 'none'; // Remove visual feedback if (event.dataTransfer.files && event.dataTransfer.files.length > 0) { const file = event.dataTransfer.files[0]; const fileName = file.name.toLowerCase(); const fileType = file.type.toLowerCase(); if (fileName.endsWith('.gltf') || fileName.endsWith('.glb') || fileType === 'model/gltf+json' || fileType === 'model/gltf-binary') { console.log(`GLTF file dropped: ${file.name}`, file); // Next step: Process and load this file. this._loadDroppedModel(file); } else { console.warn('Dropped file is not a recognized GLTF format:', file.name, file.type); this._showStatusScreen(`"${file.name}" is not a GLTF model.`, 'orange', false); setTimeout(() => { if (this.gameOverContainer.style.display === 'block' && this.gameOverText.innerText.includes(file.name)) { this.gameOverContainer.style.display = 'none'; } }, 3000); } event.dataTransfer.clearData(); } }); } _loadDroppedModel(file) { console.log("Processing dropped model:", file.name, file.type); const reader = new FileReader(); reader.onload = (e) => { // Pass file.type as well, it might be useful for _parseAndLoadGltf context this._parseAndLoadGltf(e.target.result, file.name, file.type); }; reader.onerror = (error) => { console.error(`FileReader error for ${file.name}:`, error); this._showError(`Error reading file ${file.name}.`); // Ensure loading message is hidden if it was shown by this function if (this.gameOverContainer.style.display === 'block' && this.gameOverText.innerText.startsWith(`Loading "${file.name}"`)) { this.gameOverContainer.style.display = 'none'; } }; const fileNameLower = file.name.toLowerCase(); const fileTypeLower = file.type ? file.type.toLowerCase() : ''; if (fileNameLower.endsWith('.glb') || fileTypeLower === 'model/gltf-binary') { console.log(`Reading ${file.name} as ArrayBuffer.`); reader.readAsArrayBuffer(file); } else if (fileNameLower.endsWith('.gltf') || fileTypeLower === 'model/gltf+json') { console.log(`Reading ${file.name} as text.`); reader.readAsText(file); } else { const message = file.type ? `Unsupported file type: ${file.type}` : 'Cannot determine file type.'; console.warn(`Unknown file format for GLTF loader: ${file.name}, Type: ${file.type}`); this._showError(`${message} for ${file.name}. Please drop a .gltf or .glb file.`); // Ensure loading message is hidden if (this.gameOverContainer.style.display === 'block' && this.gameOverText.innerText.startsWith(`Loading "${file.name}"`)) { this.gameOverContainer.style.display = 'none'; } } } _parseAndLoadGltf(content, fileName, fileType) { const loader = new GLTFLoader(); // GLTFLoader is already imported at the top try { // The 'path' argument is for resolving relative paths for external resources like .bin or textures. // For a single file drop, this is typically empty. If it's a .gltf with external files, // those files would need to be handled separately (e.g., by being dropped together and identified). // This setup works best for self-contained .glb files or .gltf files using data URIs. loader.parse( content, '', // Base path for external resources - empty for ArrayBuffer/string content (gltf) => { console.log(`Successfully parsed GLTF model: ${fileName}`, gltf); // 1. If a previous model exists, remove it and clean up its animations if (this.pandaModel) { this.scene.remove(this.pandaModel); // Consider disposing geometry/materials of this.pandaModel here for memory management in a larger app console.log("Removed previous model from scene."); if (this.animationMixer) { this.animationMixer.stopAllAction(); this.currentAction = null; } // Clear out old animation buttons while (this.animationButtonsContainer.firstChild) { this.animationButtonsContainer.removeChild(this.animationButtonsContainer.firstChild); } this.animationActions = {}; this.animationClips = []; } // 2. Set the new model as the current model this.pandaModel = gltf.scene; // 3. Scale and position the new model const scale = 80; this.pandaModel.scale.set(scale, scale, scale); const sceneHeight = this.renderDiv.clientHeight; this.pandaModel.position.set(0, sceneHeight * -0.45, -1000); // 4. Add the new model to the scene this.scene.add(this.pandaModel); console.log(`Added new model "${fileName}" to scene.`); // 5. Setup animations for the new model this.animationMixer = new THREE.AnimationMixer(this.pandaModel); this.animationClips = gltf.animations; this.animationActions = {}; // Ensure it's clean for new actions if (this.animationClips && this.animationClips.length) { this.animationClips.forEach((clip, index) => { const action = this.animationMixer.clipAction(clip); const actionName = clip.name || `Animation ${index + 1}`; this.animationActions[actionName] = action; const button = document.createElement('button'); button.innerText = actionName; button.style.padding = '5px 10px'; button.style.fontSize = '13px'; button.style.backgroundColor = '#f0f0f0'; button.style.color = 'black'; button.style.border = '2px solid black'; button.style.borderRadius = '4px'; button.style.cursor = 'pointer'; button.style.transition = 'background-color 0.2s ease, box-shadow 0.2s ease'; button.style.boxShadow = '2px 2px 0px black'; button.addEventListener('click', () => this._playAnimation(actionName)); this.animationButtonsContainer.appendChild(button); }); let defaultActionName = Object.keys(this.animationActions)[0]; const idleActionKey = Object.keys(this.animationActions).find(name => name.toLowerCase().includes('idle')); if (idleActionKey) { defaultActionName = idleActionKey; } if (defaultActionName && this.animationActions[defaultActionName]) { this.currentAction = this.animationActions[defaultActionName]; this.currentAction.reset().play(); this._updateButtonStyles(defaultActionName); } else { this.currentAction = null; } } else { console.log(`New model "${fileName}" has no embedded animations.`); this.currentAction = null; } // 6. Reset interaction states this.grabbingHandIndex = -1; this.pickedUpModel = null; this.rotateLastHandX = null; this.scaleInitialPinchDistance = null; this.scaleInitialModelScale = null; this.animationControlHandIndex = -1; this.animationControlInitialPinchY = null; // This will ensure animation buttons are shown/hidden correctly based on current mode this._updateInteractionModeButtonStyles(); this.loadedDroppedModelData = null; // Clear the temp storage }, (error) => { console.error(`Error parsing GLTF model ${fileName}:`, error); this._showError(`Failed to parse "${fileName}". Model might be corrupt or unsupported. Check console.`); } ); } catch (e) { // This catch is for synchronous errors during loader.parse() setup, though most errors are async. console.error(`Critical error during GLTF parsing setup for ${fileName}:`, e); this._showError(`Error setting up parser for "${fileName}".`); } } }

Other games like this

About 3D animation playground