import * as THREE from 'three'; // Removed BloomEffect, EffectPass, KernelSize from import import { EffectComposer, RenderPass } from 'postprocessing'; export class VisualScene { constructor(containerElement) { this.container = containerElement; this.scene = new THREE.Scene(); this.camera = new THREE.PerspectiveCamera(75, this.container.clientWidth / this.container.clientHeight, 0.1, 1000); // Enable alpha for transparency this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); this.setupRenderer(); this.setupCamera(); this.setupLighting(); // Reinstate lighting // this.createBackgroundPlane(); // Background shader removed this.createVisualObjects(); // Renamed this.setupPostprocessing(); // New setup step this.textureLoader = new THREE.TextureLoader(); this.startupSpriteTexture = null; this.startupSpriteMaterial = null; this.startupParticles = []; this.notifySpriteTexture = null; this.notifySpriteMaterial = null; this.notifyParticles = []; this.shutdownSpriteTexture = null; // New texture for shutdown this.shutdownSpriteMaterial = null; // New material for shutdown this.shutdownParticles = []; // New array for shutdown particles this.chimesSpriteTexture = null; // New texture for chimes this.chimesSpriteMaterial = null; // New material for chimes this.chimesParticles = []; // New array for chimes particles this.loadStartupSprite(); this.loadNotifySpriteTexture(); this.loadShutdownSpriteTexture(); this.loadChimesSpriteTexture(); // Load the chimes texture window.addEventListener('resize', this.onWindowResize.bind(this)); } setupRenderer() { this.renderer.setSize(this.container.clientWidth, this.container.clientHeight); this.renderer.setPixelRatio(window.devicePixelRatio); this.renderer.setClearAlpha(0); // Make the renderer's background transparent this.renderer.domElement.style.position = 'absolute'; // Overlay on top this.renderer.domElement.style.top = '25px'; // Position below title bar this.renderer.domElement.style.left = '0'; this.renderer.domElement.style.height = 'calc(100% - 25px)'; // Adjust height this.renderer.domElement.style.zIndex = '1'; // Behind UI elements like buttons, video, markers this.renderer.domElement.style.pointerEvents = 'none'; // Don't interfere with interactions this.container.appendChild(this.renderer.domElement); console.log("Three.js Renderer initialized."); } setupCamera() { this.camera.position.z = 5; } setupLighting() { const ambientLight = new THREE.AmbientLight(0xffffff, 1.5); // Slightly less intense ambient this.scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0); // Slightly less intense directional directionalLight.position.set(1, 1, 1); this.scene.add(directionalLight); console.log("Basic lighting setup reinstated."); } // createBackgroundPlane() { ... removed ... } createVisualObjects() { // Renamed // Geometries - Sphere and Cube // Geometries - Sphere and Cube this.sphereGeometry = new THREE.SphereGeometry(1.8, 32, 32); this.cubeGeometry = new THREE.BoxGeometry(2.5, 2.5, 2.5); this.torusGeometry = new THREE.TorusGeometry(1.5, 0.6, 16, 100); this.coneGeometry = new THREE.ConeGeometry(1.5, 3, 32); this.cylinderGeometry = new THREE.CylinderGeometry(1.5, 1.5, 3, 32); this.geometries = [ this.sphereGeometry, this.cubeGeometry, this.torusGeometry, this.coneGeometry, this.cylinderGeometry ]; this.currentGeometryIndex = 0; // Fill Object Material (Glass) const fillMaterial = new THREE.MeshPhysicalMaterial({ color: 0xFF1493, // Start with Neon Pink metalness: 0.3, // Reduced metalness to show color better roughness: 0.6, // Slightly increased roughness transmission: 0.0, // Set transmission to 0 to prevent light passing through and washing out color transparent: true, opacity: 0.7, // Always 0.7 opacity ior: 1.5, // Index of Refraction (less relevant without transmission) thickness: 0.5, // Thickness (less relevant without transmission) // emissive: 0x000000, // Ensure no emissive color interferes initially }); // Wireframe Object Material (Basic White Outline) const wireframeMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true, opacity: 1.0, }); // Create Meshes this.fillObject = new THREE.Mesh(this.geometries[this.currentGeometryIndex], fillMaterial); this.wireframeObject = new THREE.Mesh(this.geometries[this.currentGeometryIndex], wireframeMaterial); // Add both to the scene this.scene.add(this.fillObject); this.scene.add(this.wireframeObject); console.log("Fill and Wireframe visual objects created."); // State for effects (mostly related to fillObject now) this.baseColor = new THREE.Color(0xFF1493); // Changed to Neon Pink this.targetColor = new THREE.Color().copy(this.baseColor); // Initialize target to Neon Pink this.spinSpeed = new THREE.Vector3(0, 0, 0); this.spinDamping = 0.95; this.colorLerpFactor = 0.15; // Slightly faster color transition this.kickSpinImpulse = new THREE.Vector3( (Math.random() - 0.5) * 8, (Math.random() - 0.5) * 8, (Math.random() - 0.5) * 8 ); this.pastelColors = [ new THREE.Color(0x39FF14), // Neon Green new THREE.Color(0xFF00FF), // Magenta / Neon Pink new THREE.Color(0x00FFFF), // Cyan / Aqua new THREE.Color(0xFDFE02), // Neon Yellow new THREE.Color(0xFF5F1F), // Bright Orange new THREE.Color(0x00BFFF), // Deep Sky Blue (Bright Blue) new THREE.Color(0xDA70D6) // Orchid (Bright Purple/Pink) ]; this.lastRandomColorIndex = -1; // Reset index tracking // Snare state - No longer changes wireframe color, wireframe stays white // this.snareWireframeTargetColor = new THREE.Color(0xffffff); // Removed // this.wireframeColorLerpFactor = 0.15; // Removed // Hi-Hat effect state this.hiHatScaleActive = false; this.hiHatScaleTimer = 0; this.hiHatScaleDuration = 0.3; this.hiHatTargetScaleFactor = 1.3; this.baseScale = new THREE.Vector3(1, 1, 1); // Auto-rotation speed this.baseRotationSpeed = new THREE.Vector2(0.05, 0.1); // Radians per second (X, Y) } loadStartupSprite() { this.textureLoader.load( 'https://rosebud.ai/assets/computer_explorer_cool-3.png?PjnO', (texture) => { this.startupSpriteTexture = texture; this.startupSpriteMaterial = new THREE.SpriteMaterial({ map: this.startupSpriteTexture, color: 0xffffff, transparent: true, // Keep true to respect PNG alpha for shape opacity: 1.0, // Make visible parts fully opaque alphaTest: 0.1, // Discard nearly transparent pixels sizeAttenuation: true }); console.log("Startup sprite and material loaded."); }, undefined, // onProgress callback not needed (error) => { console.error("Error loading startup sprite:", error); } ); } loadNotifySpriteTexture() { this.textureLoader.load( 'https://rosebud.ai/assets/game_freecell-2.png?xqfs', (texture) => { this.notifySpriteTexture = texture; this.notifySpriteMaterial = new THREE.SpriteMaterial({ map: this.notifySpriteTexture, color: 0xffffff, transparent: true, alphaTest: 0.1, opacity: 1.0, // Ensure full opacity sizeAttenuation: true }); console.log("Notify sprite (Freecell icon) and material loaded."); }, undefined, (error) => { console.error("Error loading notify sprite:", error); } ); } loadShutdownSpriteTexture() { this.textureLoader.load( 'https://rosebud.ai/assets/msn3-3.png?xqX6', (texture) => { this.shutdownSpriteTexture = texture; this.shutdownSpriteMaterial = new THREE.SpriteMaterial({ map: this.shutdownSpriteTexture, color: 0xffffff, transparent: true, alphaTest: 0.1, opacity: 1.0, sizeAttenuation: true }); console.log("Shutdown sprite (MSN icon) and material loaded."); }, undefined, (error) => { console.error("Error loading shutdown sprite:", error); } ); } loadChimesSpriteTexture() { this.textureLoader.load( 'https://rosebud.ai/assets/no-0.png?fvin', (texture) => { this.chimesSpriteTexture = texture; this.chimesSpriteMaterial = new THREE.SpriteMaterial({ map: this.chimesSpriteTexture, color: 0xffffff, transparent: true, alphaTest: 0.1, opacity: 1.0, sizeAttenuation: true }); console.log("Chimes sprite (no-0 icon) and material loaded."); }, undefined, (error) => { console.error("Error loading chimes sprite:", error); } ); } triggerStartupEffect() { if (!this.startupSpriteMaterial) { console.warn("Startup sprite material not loaded yet."); return; } const numParticles = 6; // Further reduced number of particles for larger size const initialYPosition = 3.0; // Start slightly higher for a longer fall const xSpreadMin = -this.camera.aspect * 2.5; // Left edge of view frustum at z=5 approx. const xSpreadMax = xSpreadMin + (this.camera.aspect * 5 * 0.50); // Increased to 50% width from the left for (let i = 0; i < numParticles; i++) { const individualMaterial = this.startupSpriteMaterial.clone(); // Clone material for unique rotation individualMaterial.rotation = Math.random() * Math.PI * 2; // Random initial rotation const sprite = new THREE.Sprite(individualMaterial); // Use the cloned material const initialX = Math.random() * (xSpreadMax - xSpreadMin) + xSpreadMin; sprite.position.set( initialX, initialYPosition + (Math.random() - 0.5) * 0.4, // Slightly more Y variation (Math.random() - 0.5) * 0.05 // Less Z variation ); // Random size (already good: 0.7 to 1.2) const scale = Math.random() * 0.5 + 0.7; sprite.scale.set(scale, scale, scale); this.scene.add(sprite); // Random speed components (velocityX, initial velocityY, rotationSpeed) are already well randomized this.startupParticles.push({ sprite: sprite, velocityX: (Math.random() - 0.5) * 0.8, // Slightly increased horizontal speed range velocityY: Math.random() * 0.6 + 0.3, // Slightly increased initial downward speed range rotationSpeed: (Math.random() - 0.5) * 2.5, // Slightly increased rotation speed range lifetime: Math.random() * 2 + 3, }); } console.log(`Triggered startup effect with ${numParticles} particles.`); } triggerNotifyEffect() { if (!this.notifySpriteMaterial) { console.warn("Notify sprite material not loaded yet."); return; } const numParticles = 6; // Increased to match startup const initialYPosition = 3.0; // Matched startup // Calculate X spread: 25% to 75% from the left edge of the viewport (wider range) const worldWidthApprox = this.camera.aspect * 5; const leftEdgeX = -worldWidthApprox / 2; // Original Notify was 25% to 50%. To make it 'wider' like startup (which is 0-50% from left), // we can expand its original range or shift it. Let's expand its zone. // Startup effectively covers a 50% width. We'll make notify also cover a 50% width. // Original Notify: Spawns in the second quarter from left (25% to 50%) // To make it 'as wide as startup', it will now span from 25% to 75% (a 50% span) const xSpreadMin = leftEdgeX + (worldWidthApprox * 0.25); // Starts at 25% from left const xSpreadMax = leftEdgeX + (worldWidthApprox * 0.75); // Ends at 75% from left (covers 50% width) for (let i = 0; i < numParticles; i++) { const individualMaterial = this.notifySpriteMaterial.clone(); individualMaterial.rotation = Math.random() * Math.PI * 2; const sprite = new THREE.Sprite(individualMaterial); const initialX = Math.random() * (xSpreadMax - xSpreadMin) + xSpreadMin; sprite.position.set( initialX, initialYPosition + (Math.random() - 0.5) * 0.4, // Matched startup (Math.random() - 0.5) * 0.05 // Matched startup ); const scale = Math.random() * 0.5 + 0.7; // Matched startup (0.7 to 1.2) sprite.scale.set(scale, scale, scale); this.scene.add(sprite); this.notifyParticles.push({ sprite: sprite, velocityX: (Math.random() - 0.5) * 0.8, // Matched startup velocityY: Math.random() * 0.6 + 0.3, // Matched startup rotationSpeed: (Math.random() - 0.5) * 2.5, // Matched startup lifetime: Math.random() * 2 + 3, // Matched startup }); } console.log(`Triggered notify effect with ${numParticles} particles.`); } triggerShutdownEffect() { if (!this.shutdownSpriteMaterial) { console.warn("Shutdown sprite material not loaded yet."); return; } const numParticles = 6; // Matched startup const initialYPosition = 3.0; // Matched startup // Calculate X spread: 50% to 100% from the left edge (right half of screen) const worldWidthApprox = this.camera.aspect * 5; const leftEdgeX = -worldWidthApprox / 2; const xSpreadMin = leftEdgeX + (worldWidthApprox * 0.50); // Starts at 50% from left (center) const xSpreadMax = leftEdgeX + (worldWidthApprox * 1.00); // Ends at 100% from left (right edge) for (let i = 0; i < numParticles; i++) { const individualMaterial = this.shutdownSpriteMaterial.clone(); individualMaterial.rotation = Math.random() * Math.PI * 2; const sprite = new THREE.Sprite(individualMaterial); const initialX = Math.random() * (xSpreadMax - xSpreadMin) + xSpreadMin; sprite.position.set( initialX, initialYPosition + (Math.random() - 0.5) * 0.4, // Matched startup Y variation (Math.random() - 0.5) * 0.05 // Matched startup Z variation ); const scale = Math.random() * 0.5 + 0.9; // New larger scale: 0.9 to 1.4 sprite.scale.set(scale, scale, scale); this.scene.add(sprite); this.shutdownParticles.push({ sprite: sprite, velocityX: (Math.random() - 0.5) * 0.8, // Matched startup velocityY: Math.random() * 0.6 + 0.3, // Matched startup rotationSpeed: (Math.random() - 0.5) * 2.5, // Matched startup lifetime: Math.random() * 2 + 3, // Matched startup }); } console.log(`Triggered shutdown effect with ${numParticles} particles.`); } triggerChimesEffect() { if (!this.chimesSpriteMaterial) { console.warn("Chimes sprite material not loaded yet."); return; } const numParticles = 7; // A few more particles, as they are smaller const initialYPosition = 3.2; // Similar starting height // Calculate X spread: From the right edge, extending 25% of the screen width to the left const worldWidthApprox = this.camera.aspect * 5; const rightEdgeX = worldWidthApprox / 2; const xSpreadMin = rightEdgeX - (worldWidthApprox * 0.25); // 25% from the right, extending left const xSpreadMax = rightEdgeX; // Right edge for (let i = 0; i < numParticles; i++) { const individualMaterial = this.chimesSpriteMaterial.clone(); individualMaterial.rotation = Math.random() * Math.PI * 2; const sprite = new THREE.Sprite(individualMaterial); const initialX = Math.random() * (xSpreadMax - xSpreadMin) + xSpreadMin; sprite.position.set( initialX, initialYPosition + (Math.random() - 0.5) * 0.5, (Math.random() - 0.5) * 0.1 ); const scale = Math.random() * 0.2 + 0.4; // Smaller scale for "no-0" icon (0.4 to 0.6) sprite.scale.set(scale, scale, scale); this.scene.add(sprite); this.chimesParticles.push({ sprite: sprite, velocityX: (Math.random() - 0.7) * 0.4, // Tend to drift left velocityY: Math.random() * 0.4 + 0.2, rotationSpeed: (Math.random() - 0.5) * 2.0, lifetime: Math.random() * 1.5 + 2.0, // Lifetime between 2.0 and 3.5 seconds }); } console.log(`Triggered chimes effect with ${numParticles} particles.`); } onWindowResize() { this.camera.aspect = this.container.clientWidth / this.container.clientHeight; this.camera.updateProjectionMatrix(); this.renderer.setSize(this.container.clientWidth, this.container.clientHeight); this.composer.setSize(this.container.clientWidth, this.container.clientHeight); // Resize composer too // Update background shader resolution uniform (no longer needed) // if (this.backgroundUniforms) { // this.backgroundUniforms.resolution.value.set(this.container.clientWidth, this.container.clientHeight); // } console.log("Visual scene and composer resized."); } setupPostprocessing() { this.composer = new EffectComposer(this.renderer); this.composer.addPass(new RenderPass(this.scene, this.camera)); // --- Bloom effect code removed entirely --- console.log("Postprocessing initialized (no Bloom effect)."); } update(frequencyData, triggeredButtonIndex = -1, deltaTime = 16.67) { if (!this.fillObject || !this.wireframeObject) return; // Check both objects exist const dtSeconds = deltaTime / 1000; // Update background shader time uniform (no longer needed) // if (this.backgroundUniforms) { // this.backgroundUniforms.time.value += dtSeconds; // } // --- Handle Triggered Effects --- if (triggeredButtonIndex === 0) { // Kick // Apply a random spin impulse this.kickSpinImpulse.set( (Math.random() - 0.5) * 10 + 5, (Math.random() - 0.5) * 10 + 5, (Math.random() - 0.5) * 10 + 5, ); this.spinSpeed.add(this.kickSpinImpulse); // console.log("Kick Spin!"); } else if (triggeredButtonIndex === 1) { // Snare // Cycle to the next geometry this.currentGeometryIndex = (this.currentGeometryIndex + 1) % this.geometries.length; const newGeometry = this.geometries[this.currentGeometryIndex]; // Dispose of old geometries to free up GPU memory if (this.fillObject.geometry !== newGeometry) { this.fillObject.geometry.dispose(); this.wireframeObject.geometry.dispose(); } this.fillObject.geometry = newGeometry; this.wireframeObject.geometry = newGeometry; const geometryNames = ['Sphere', 'Cube', 'Torus', 'Cone', 'Cylinder']; console.log(`Snare: Geometry changed to ${geometryNames[this.currentGeometryIndex]}`); // Wireframe color remains white, no change needed here. // this.snareWireframeTargetColor is removed. } else if (triggeredButtonIndex === 2) { // Hi-Hat // Trigger scale pulse effect if (!this.hiHatScaleActive) { this.hiHatScaleActive = true; this.hiHatScaleTimer = this.hiHatScaleDuration; // Immediately jump to target scale for impact on both objects this.fillObject.scale.setScalar(this.hiHatTargetScaleFactor); this.wireframeObject.scale.setScalar(this.hiHatTargetScaleFactor); console.log("Hi-Hat Scale Pulse!"); } } else if (triggeredButtonIndex === 3) { // Clap // Select a random pastel color for the fill object let randomIndex; do { randomIndex = Math.floor(Math.random() * this.pastelColors.length); } while (this.pastelColors.length > 1 && randomIndex === this.lastRandomColorIndex); this.lastRandomColorIndex = randomIndex; this.targetColor.copy(this.pastelColors[randomIndex]); // Target color for fill object console.log("Clap Color Change!"); } // --- Apply Damping and Updates --- // Apply slow auto-rotation this.fillObject.rotation.x += this.baseRotationSpeed.x * dtSeconds; this.fillObject.rotation.y += this.baseRotationSpeed.y * dtSeconds; this.wireframeObject.rotation.x += this.baseRotationSpeed.x * dtSeconds; this.wireframeObject.rotation.y += this.baseRotationSpeed.y * dtSeconds; // Apply spin damping to the impulse speed this.spinSpeed.multiplyScalar(Math.pow(this.spinDamping, dtSeconds * 60)); // Apply rotation based on spin speed to BOTH objects const rotationDeltaX = this.spinSpeed.x * dtSeconds; const rotationDeltaY = this.spinSpeed.y * dtSeconds; const rotationDeltaZ = this.spinSpeed.z * dtSeconds; this.fillObject.rotation.x += rotationDeltaX; this.fillObject.rotation.y += rotationDeltaY; this.fillObject.rotation.z += rotationDeltaZ; this.wireframeObject.rotation.x += rotationDeltaX; this.wireframeObject.rotation.y += rotationDeltaY; this.wireframeObject.rotation.z += rotationDeltaZ; // Lerp fill object color towards target color this.fillObject.material.color.lerp(this.targetColor, this.colorLerpFactor); // Wireframe color is fixed, no lerp needed for it. // this.wireframeObject.material.color.lerp(this.snareWireframeTargetColor, this.wireframeColorLerpFactor); // Removed // Ensure wireframe material color stays white (in case it was ever changed) if (!this.wireframeObject.material.color.equals(new THREE.Color(0xffffff))) { this.wireframeObject.material.color.set(0xffffff); } // Opacity is now fixed at 0.7, so no dynamic update needed here // this.fillObject.material.opacity = 0.7; // This line is not strictly needed as it's set at creation // --- Handle Hi-Hat Scale Pulse Effect --- if (this.hiHatScaleActive) { this.hiHatScaleTimer -= dtSeconds; if (this.hiHatScaleTimer <= 0) { // Timer expired, ensure scale is reset and deactivate this.hiHatScaleActive = false; this.fillObject.scale.copy(this.baseScale); this.wireframeObject.scale.copy(this.baseScale); } else { // While active, smoothly lerp back to base scale for both const returnSpeed = 0.15; this.fillObject.scale.lerp(this.baseScale, returnSpeed); this.wireframeObject.scale.lerp(this.baseScale, returnSpeed); } } // --- Render --- // Update startup particles for (let i = this.startupParticles.length - 1; i >= 0; i--) { const particle = this.startupParticles[i]; particle.velocityY += 3.5 * dtSeconds; // Gravity particle.sprite.position.y -= particle.velocityY * dtSeconds; particle.sprite.position.x += particle.velocityX * dtSeconds; particle.sprite.material.rotation += particle.rotationSpeed * dtSeconds; // Sprites rotate their material particle.lifetime -= dtSeconds; if (particle.lifetime <= 0 || particle.sprite.position.y < -5) { // Off-screen or lifetime ended this.scene.remove(particle.sprite); particle.sprite.material.dispose(); // Dispose the cloned material this.startupParticles.splice(i, 1); } } // Update notify particles for (let i = this.notifyParticles.length - 1; i >= 0; i--) { const particle = this.notifyParticles[i]; particle.velocityY += 2.8 * dtSeconds; // Slightly less gravity than startup for a lighter feel particle.sprite.position.y -= particle.velocityY * dtSeconds; particle.sprite.position.x += particle.velocityX * dtSeconds; particle.sprite.material.rotation += particle.rotationSpeed * dtSeconds; particle.lifetime -= dtSeconds; if (particle.lifetime <= 0 || particle.sprite.position.y < -5) { // Off-screen or lifetime ended this.scene.remove(particle.sprite); particle.sprite.material.dispose(); // Dispose the cloned material this.notifyParticles.splice(i, 1); } } // Update shutdown particles for (let i = this.shutdownParticles.length - 1; i >= 0; i--) { const particle = this.shutdownParticles[i]; particle.velocityY += 3.5 * dtSeconds; // Matched startup gravity particle.sprite.position.y -= particle.velocityY * dtSeconds; particle.sprite.position.x += particle.velocityX * dtSeconds; particle.sprite.material.rotation += particle.rotationSpeed * dtSeconds; particle.lifetime -= dtSeconds; if (particle.lifetime <= 0 || particle.sprite.position.y < -5) { // Off-screen or lifetime ended this.scene.remove(particle.sprite); particle.sprite.material.dispose(); // Dispose the cloned material this.shutdownParticles.splice(i, 1); } } // Update chimes particles for (let i = this.chimesParticles.length - 1; i >= 0; i--) { const particle = this.chimesParticles[i]; particle.velocityY += 2.5 * dtSeconds; // A lighter gravity for chimes particle.sprite.position.y -= particle.velocityY * dtSeconds; particle.sprite.position.x += particle.velocityX * dtSeconds; particle.sprite.material.rotation += particle.rotationSpeed * dtSeconds; particle.lifetime -= dtSeconds; if (particle.lifetime <= 0 || particle.sprite.position.y < -5) { // Off-screen or lifetime ended this.scene.remove(particle.sprite); particle.sprite.material.dispose(); // Dispose the cloned material this.chimesParticles.splice(i, 1); } } // Use the composer to render instead of the direct renderer this.composer.render(dtSeconds); // Pass delta time } }