import * as THREE from 'three'; import * as TWEEN from 'https://esm.sh/@tweenjs/tween.js@21.0.0'; export class RubiksCube { constructor(game, cubeSize = 3, audioManager) { this.game = game; this.audioManager = audioManager; // Store AudioManager instance this.cubeSize = cubeSize; this.rotationDuration = 500; // milliseconds this.isRotating = false; this.cubies = []; this.rotatingGroup = null; this.particleSystems = []; this.facesSolvedState = new Array(6).fill(false); this.hoveredCubie = null; this.idleTime = 0; // Time since last interaction this.isBreathing = false; // Flag to track breathing animation state this.breathingEnabled = true; // Controlled by UI, true by default this.baseScale = 1.0; // Base scale for the entire cube group this.pivot = new THREE.Group(); // This group will hold all cubies and be scaled this.createCube(); this.game.scene.add(this.pivot); } createCube() { // Colors for the cube faces (red and blue theme) const colors = { right: 0xff0000, // Red left: 0x880000, // Dark red top: 0x0000ff, // Blue bottom: 0x000088, // Dark blue front: 0xff4444, // Light red back: 0x4444ff // Light blue }; const size = 0.95; // Slightly smaller than 1 to create gaps const offset = this.cubeSize / 2 - 0.5; for (let x = 0; x < this.cubeSize; x++) { for (let y = 0; y < this.cubeSize; y++) { for (let z = 0; z < this.cubeSize; z++) { // Skip the center cube if (x === 1 && y === 1 && z === 1) continue; const materialArray = []; // Create materials for each face for (let i = 0; i < 6; i++) { // Determine color let color; if (i === 0 && x === this.cubeSize - 1) color = colors.right; else if (i === 1 && x === 0) color = colors.left; else if (i === 2 && y === this.cubeSize - 1) color = colors.top; else if (i === 3 && y === 0) color = colors.bottom; else if (i === 4 && z === this.cubeSize - 1) color = colors.front; else if (i === 5 && z === 0) color = colors.back; else color = 0x222222; // Black for inner faces materialArray.push(new THREE.MeshStandardMaterial({ color: color, roughness: 0.3, metalness: 0.2, emissive: color === 0x222222 ? 0x000000 : color, emissiveIntensity: 0.05 })); } const geometry = new THREE.BoxGeometry(size, size, size); const cubie = new THREE.Mesh(geometry, materialArray); // Position the cubie cubie.position.set( (x - offset), (y - offset), (z - offset) ); // Store original position for reference cubie.userData.originalPosition = cubie.position.clone(); cubie.userData.currentPosition = new THREE.Vector3(x, y, z); this.cubies.push(cubie); this.pivot.add(cubie); // Add cubies to the pivot group } } } } getAllCubies() { return this.cubies; } selectFace(intersection) { if (this.isRotating) return; const cubie = intersection.object; const face = Math.floor(intersection.faceIndex / 2); // Determine which face was clicked const normal = new THREE.Vector3(); // Determine face normal in world space if (face === 0) normal.set(1, 0, 0); // Right else if (face === 1) normal.set(-1, 0, 0); // Left else if (face === 2) normal.set(0, 1, 0); // Top else if (face === 3) normal.set(0, -1, 0); // Bottom else if (face === 4) normal.set(0, 0, 1); // Front else if (face === 5) normal.set(0, 0, -1); // Back // Rotate the face this.rotateFace(normal, cubie); } rotateFace(normal, cubie) { if (this.isRotating) return; this.isRotating = true; this.idleTime = 0; // Reset idle time on interaction this.isBreathing = false; // Stop breathing animation this.pivot.scale.set(this.baseScale, this.baseScale, this.baseScale); // Reset scale // Play rotate sound if (this.audioManager) { this.audioManager.playSound('rotate'); } // Determine the axis and threshold for selecting cubies on the same face let axis, threshold; if (Math.abs(normal.x) > 0.9) { axis = 'x'; threshold = cubie.position.x; } else if (Math.abs(normal.y) > 0.9) { axis = 'y'; threshold = cubie.position.y; } else { axis = 'z'; threshold = cubie.position.z; } // Create a group to hold all cubies on the same face this.rotatingGroup = new THREE.Group(); this.game.scene.add(this.rotatingGroup); // Add cubies to the group that are on the same face this.cubies.forEach(c => { if (Math.abs(c.position[axis] - threshold) < 0.1) { // Store cubie's world position const worldPos = new THREE.Vector3(); c.getWorldPosition(worldPos); // Add glow effect to the cube this.addGlowEffect(c); // Remove from pivot and add to rotating group this.pivot.remove(c); this.rotatingGroup.add(c); // Reset position relative to the group c.position.copy(worldPos); } }); // Set the rotation axis const rotationAxis = new THREE.Vector3(); if (axis === 'x') rotationAxis.set(1, 0, 0); else if (axis === 'y') rotationAxis.set(0, 1, 0); else rotationAxis.set(0, 0, 1); // Determine rotation direction (positive for clockwise, negative for counterclockwise) const direction = Math.sign(normal[axis]) * Math.PI/2; // Animate rotation new TWEEN.Tween({ rotation: 0 }) .to({ rotation: direction }, this.rotationDuration) .easing(TWEEN.Easing.Quadratic.Out) .onUpdate(({ rotation }) => { this.rotatingGroup.setRotationFromAxisAngle(rotationAxis, rotation); // Update glow intensity based on rotation progress const progress = Math.abs(rotation / direction); const glowIntensity = this.getGlowIntensity(progress); this.updateGlowEffect(glowIntensity); }) .onComplete(() => { // Put cubies back into the scene with their new positions while (this.rotatingGroup.children.length) { const cubie = this.rotatingGroup.children[0]; const worldPos = new THREE.Vector3(); const worldQuat = new THREE.Quaternion(); // Get world position and rotation cubie.getWorldPosition(worldPos); cubie.getWorldQuaternion(worldQuat); // Remove from group and add back to pivot this.rotatingGroup.remove(cubie); this.pivot.add(cubie); // Set the new position and rotation cubie.position.copy(worldPos); cubie.quaternion.copy(worldQuat); // Reset the glow effect this.resetGlowEffect(cubie); // Snap position to grid cubie.position.x = Math.round(cubie.position.x); cubie.position.y = Math.round(cubie.position.y); cubie.position.z = Math.round(cubie.position.z); } this.game.scene.remove(this.rotatingGroup); this.rotatingGroup = null; this.isRotating = false; this.game.incrementMoveCount(); // Check faces alignment after a move and add particle effects this.checkFacesAlignment(); // Check if the cube is solved after a move this.checkVictory(); }) .start(); } update(delta) { TWEEN.update(); // Idle breathing animation logic if (!this.isRotating) { if (this.breathingEnabled) { this.idleTime += delta; const idleThreshold = 2; // Start breathing after 2 seconds of inactivity if (this.idleTime > idleThreshold && !this.isBreathing) { this.isBreathing = true; // Start breathing animation using TWEEN on the pivot group const breathScale = this.baseScale * 1.02; // Scale up slightly const duration = 2000; // Duration of one breath cycle (in ms) new TWEEN.Tween(this.pivot.scale) .to({ x: breathScale, y: breathScale, z: breathScale }, duration / 2) .easing(TWEEN.Easing.Quadratic.InOut) .onComplete(() => { if (!this.isBreathing) return; // Stop if interrupted new TWEEN.Tween(this.pivot.scale) .to({ x: this.baseScale, y: this.baseScale, z: this.baseScale }, duration / 2) .easing(TWEEN.Easing.Quadratic.InOut) .onComplete(() => { if (this.isBreathing) { // Loop if still breathing this.isBreathing = false; // Reset to allow re-triggering in next update if still idle this.idleTime = idleThreshold + 0.01; // Ensure it triggers again immediately } }) .start(); }) .start(); } } else { // Breathing is disabled if (this.isBreathing) { // If it was breathing, stop it and reset scale this.isBreathing = false; this.pivot.scale.set(this.baseScale, this.baseScale, this.baseScale); this.idleTime = 0; } } } else { // Cube is rotating this.idleTime = 0; this.isBreathing = false; // Ensure scale is reset if rotation started mid-breath if (this.pivot.scale.x !== this.baseScale) { this.pivot.scale.set(this.baseScale, this.baseScale, this.baseScale); } } // Update particle systems for (let i = this.particleSystems.length - 1; i >= 0; i--) { const system = this.particleSystems[i]; system.update(delta); // Remove expired particle systems if (system.isExpired()) { this.game.scene.remove(system.points); this.particleSystems.splice(i, 1); } } } scramble() { // Can't scramble while rotating if (this.isRotating) return; // Reset face solved state this.facesSolvedState = new Array(6).fill(false); // Determine number of scramble moves based on cube size let numMoves; switch (this.cubeSize) { case 2: numMoves = 15; // Fewer moves for 2x2 break; case 4: numMoves = 40; // More moves for 4x4 break; default: // 3x3 or others numMoves = 25; } const axes = ['x', 'y', 'z']; const directions = [1, -1]; // Schedule scramble moves with slight delays for (let i = 0; i < numMoves; i++) { setTimeout(() => { if (this.isRotating) return; // Choose random axis, layer, and direction const axis = axes[Math.floor(Math.random() * axes.length)]; const layer = Math.floor(Math.random() * this.cubeSize) - (this.cubeSize / 2) + 0.5; const direction = directions[Math.floor(Math.random() * directions.length)]; // Create normal vector based on axis and direction const normal = new THREE.Vector3(); if (axis === 'x') normal.set(direction, 0, 0); else if (axis === 'y') normal.set(0, direction, 0); else normal.set(0, 0, direction); // Find a cubie on the face to use as reference const cubie = this.cubies.find(c => Math.abs(c.position[axis] - layer) < 0.1); if (cubie) this.rotateFace(normal, cubie); }, i * this.rotationDuration * 0.8); // Overlap slightly to speed up scramble } return numMoves; // Return the number of moves used for scrambling } // Check if individual faces are aligned and trigger particle effects for newly aligned faces checkFacesAlignment() { if (this.isRotating) return; // Face directions: Right, Left, Top, Bottom, Front, Back const faceDirections = [ { axis: 'x', value: this.cubeSize - 1, index: 0 }, // Right { axis: 'x', value: 0, index: 1 }, // Left { axis: 'y', value: this.cubeSize - 1, index: 2 }, // Top { axis: 'y', value: 0, index: 3 }, // Bottom { axis: 'z', value: this.cubeSize - 1, index: 4 }, // Front { axis: 'z', value: 0, index: 5 } // Back ]; faceDirections.forEach((dir, idx) => { const isSolved = this.isFaceSolved(dir.axis, dir.value, dir.index); // If face is newly solved, play sound and create particle effect if (isSolved && !this.facesSolvedState[idx]) { if (this.audioManager) { this.audioManager.playSound('align'); } this.createParticleEffect(dir.axis, dir.value, dir.index); this.facesSolvedState[idx] = true; } else if (!isSolved) { this.facesSolvedState[idx] = false; } }); } // Create a particle effect at the specified face createParticleEffect(axis, value, faceIndex) { // Calculate the center position of the face const faceCenter = new THREE.Vector3(); if (axis === 'x') { faceCenter.set(value, 1, 1); } else if (axis === 'y') { faceCenter.set(1, value, 1); } else { faceCenter.set(1, 1, value); } // Get the color of the face from one of its cubies const faceCubies = this.cubies.filter(c => Math.abs(c.position[axis] - value) < 0.1 ); if (faceCubies.length === 0) return; const cubie = faceCubies[0]; const faceColor = cubie.material[faceIndex].color.getHex(); // Create a particle system this.particleSystems.push(new ParticleSystem( this.game.scene, faceCenter, faceColor, axis )); } checkVictory() { if (this.isRotating) return false; // Check each face to see if it's solved (all cubies on the face have the same color) const faceDirections = [ { axis: 'x', value: this.cubeSize - 1, index: 0 }, // Right { axis: 'x', value: 0, index: 1 }, // Left { axis: 'y', value: this.cubeSize - 1, index: 2 }, // Top { axis: 'y', value: 0, index: 3 }, // Bottom { axis: 'z', value: this.cubeSize - 1, index: 4 }, // Front { axis: 'z', value: 0, index: 5 } // Back ]; // Check if all faces are solved const solved = faceDirections.every((dir) => { return this.isFaceSolved(dir.axis, dir.value, dir.index); }); if (solved) { this.game.onVictory(); return true; } return false; } // Helper function to check if all cubies on a face have the same color isFaceSolved(axis, value, faceIndex) { // Get all cubies on this face const faceCubies = this.cubies.filter(c => Math.abs(c.position[axis] - value) < 0.1 ); // No cubies found on this face if (faceCubies.length === 0) return false; // Get the material color of the first cubie's face const firstCubie = faceCubies[0]; const firstColor = firstCubie.material[faceIndex].color.getHex(); // Check if all cubies on the face have the same color for their respective face return faceCubies.every(cubie => { return cubie.material[faceIndex].color.getHex() === firstColor; }); } // Method to add a glow effect to a cubie addGlowEffect(cubie) { // Store original emissive intensities for later reset cubie.userData.originalEmissiveIntensities = []; // Store original colors for the glow effect cubie.userData.originalEmissiveColors = []; // Enhance each material's emissive properties cubie.material.forEach((material, index) => { // Store original values cubie.userData.originalEmissiveIntensities[index] = material.emissiveIntensity; cubie.userData.originalEmissiveColors[index] = material.emissive.clone(); // Only enhance the colored faces, not the black internal faces if (material.color.getHex() !== 0x222222) { // Create a glowing effect by increasing emissive intensity material.emissiveIntensity = 0.2; } }); } // Method to update the glow effect intensity during animation updateGlowEffect(intensity) { // Maximum intensity at the middle of the animation this.rotatingGroup.children.forEach(cubie => { cubie.material.forEach((material, index) => { if (material.color.getHex() !== 0x222222) { material.emissiveIntensity = intensity; } }); }); } // Method to reset the glow effect after rotation resetGlowEffect(cubie) { if (cubie.userData.originalEmissiveIntensities) { cubie.material.forEach((material, index) => { // Reset to original values material.emissiveIntensity = cubie.userData.originalEmissiveIntensities[index] || 0.05; if (cubie.userData.originalEmissiveColors[index]) { material.emissive.copy(cubie.userData.originalEmissiveColors[index]); } }); } } // Method to calculate glow intensity based on animation progress getGlowIntensity(progress) { // Create a pulse effect that peaks in the middle of the animation // Using a sine wave to create a smooth pulse const pulseEffect = Math.sin(progress * Math.PI) * 0.4; return 0.2 + pulseEffect; } highlightCubie(cubie) { if (this.isRotating) return; // Unhighlight previous cubie if there was one and it's not the current one if (this.hoveredCubie && this.hoveredCubie !== cubie) { this.unhighlightCubie(); } if (cubie && cubie !== this.hoveredCubie) { this.hoveredCubie = cubie; if (!cubie.userData.originalScale) { cubie.userData.originalScale = cubie.scale.clone(); } if (!cubie.userData.originalEmissiveIntensitiesHover) { cubie.userData.originalEmissiveIntensitiesHover = cubie.material.map(m => m.emissiveIntensity); } // Scale up slightly new TWEEN.Tween(cubie.scale) .to({ x: 1.05, y: 1.05, z: 1.05 }, 100) .easing(TWEEN.Easing.Quadratic.Out) .start(); // Increase emissive intensity for colored faces cubie.material.forEach(material => { if (material.color.getHex() !== 0x222222) { // Not an inner face material.emissiveIntensity = Math.min(1.0, (cubie.userData.originalEmissiveIntensitiesHover[cubie.material.indexOf(material)] || 0.05) + 0.3); } }); } } unhighlightCubie() { if (this.hoveredCubie) { const cubie = this.hoveredCubie; this.hoveredCubie = null; if (cubie.userData.originalScale) { new TWEEN.Tween(cubie.scale) .to({ x: cubie.userData.originalScale.x, y: cubie.userData.originalScale.y, z: cubie.userData.originalScale.z }, 100) .easing(TWEEN.Easing.Quadratic.Out) .start(); } if (cubie.userData.originalEmissiveIntensitiesHover) { cubie.material.forEach((material, index) => { material.emissiveIntensity = cubie.userData.originalEmissiveIntensitiesHover[index] || 0.05; }); // No need to delete originalEmissiveIntensitiesHover here, as it's needed if hovered again } } } } // Particle System class for face alignment effects class ParticleSystem { constructor(scene, centerPosition, color, axis) { this.scene = scene; this.centerPosition = centerPosition; this.lifetime = 2; // seconds this.age = 0; this.numParticles = 100; const particleColor = new THREE.Color(color); // Create geometry for particles this.geometry = new THREE.BufferGeometry(); this.positions = new Float32Array(this.numParticles * 3); this.velocities = new Float32Array(this.numParticles * 3); this.colors = new Float32Array(this.numParticles * 3); this.sizes = new Float32Array(this.numParticles); this.alphas = new Float32Array(this.numParticles); // Setup particles for (let i = 0; i < this.numParticles; i++) { const i3 = i * 3; // Position - start at center of the face this.positions[i3] = centerPosition.x; this.positions[i3 + 1] = centerPosition.y; this.positions[i3 + 2] = centerPosition.z; // Velocity - direction depends on the face orientation // Create a burst effect from the center outward const angle1 = Math.random() * Math.PI * 2; const angle2 = Math.random() * Math.PI * 2; const speed = 2 + Math.random() * 3; if (axis === 'x') { this.velocities[i3] = 0; // Don't move in the face normal direction this.velocities[i3 + 1] = Math.sin(angle1) * speed; this.velocities[i3 + 2] = Math.cos(angle1) * speed; } else if (axis === 'y') { this.velocities[i3] = Math.sin(angle1) * speed; this.velocities[i3 + 1] = 0; // Don't move in the face normal direction this.velocities[i3 + 2] = Math.cos(angle1) * speed; } else { // z this.velocities[i3] = Math.sin(angle1) * speed; this.velocities[i3 + 1] = Math.cos(angle1) * speed; this.velocities[i3 + 2] = 0; // Don't move in the face normal direction } // Add slight random variation to all velocities this.velocities[i3] += (Math.random() - 0.5) * 0.5; this.velocities[i3 + 1] += (Math.random() - 0.5) * 0.5; this.velocities[i3 + 2] += (Math.random() - 0.5) * 0.5; // Color - use face color with slight variation const brightness = 0.8 + Math.random() * 0.2; this.colors[i3] = particleColor.r * brightness; this.colors[i3 + 1] = particleColor.g * brightness; this.colors[i3 + 2] = particleColor.b * brightness; // Size and alpha this.sizes[i] = 0.1 + Math.random() * 0.2; this.alphas[i] = 1.0; } this.geometry.setAttribute('position', new THREE.BufferAttribute(this.positions, 3)); this.geometry.setAttribute('color', new THREE.BufferAttribute(this.colors, 3)); this.geometry.setAttribute('size', new THREE.BufferAttribute(this.sizes, 1)); this.geometry.setAttribute('alpha', new THREE.BufferAttribute(this.alphas, 1)); // Material with custom shader to handle alpha per particle const particleMaterial = new THREE.ShaderMaterial({ uniforms: { pointTexture: { value: this.createParticleTexture() } }, vertexShader: ` attribute float size; attribute float alpha; varying float vAlpha; void main() { vAlpha = alpha; vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); gl_PointSize = size * (300.0 / -mvPosition.z); gl_Position = projectionMatrix * mvPosition; } `, fragmentShader: ` uniform sampler2D pointTexture; varying float vAlpha; void main() { gl_FragColor = vec4(1.0, 1.0, 1.0, vAlpha) * texture2D(pointTexture, gl_PointCoord); if (gl_FragColor.a < 0.1) discard; } `, blending: THREE.AdditiveBlending, depthTest: false, transparent: true, vertexColors: true }); // Create the particle system this.points = new THREE.Points(this.geometry, particleMaterial); scene.add(this.points); } update(delta) { const positions = this.geometry.attributes.position.array; const alphas = this.geometry.attributes.alpha.array; const sizes = this.geometry.attributes.size.array; // Update age this.age += delta; // Update particle positions, sizes and alpha for (let i = 0; i < this.numParticles; i++) { const i3 = i * 3; // Update position based on velocity positions[i3] += this.velocities[i3] * delta; positions[i3 + 1] += this.velocities[i3 + 1] * delta; positions[i3 + 2] += this.velocities[i3 + 2] * delta; // Slow down particles over time this.velocities[i3] *= 0.98; this.velocities[i3 + 1] *= 0.98; this.velocities[i3 + 2] *= 0.98; // Fade out based on lifetime const lifeProgress = this.age / this.lifetime; alphas[i] = Math.max(0, 1 - lifeProgress * 1.1); // Particles grow slightly at first, then shrink if (lifeProgress < 0.3) { sizes[i] *= 1.01; } else { sizes[i] *= 0.99; } } // Update the geometry attributes this.geometry.attributes.position.needsUpdate = true; this.geometry.attributes.alpha.needsUpdate = true; this.geometry.attributes.size.needsUpdate = true; } isExpired() { return this.age >= this.lifetime; } // Create a soft particle texture createParticleTexture() { const canvas = document.createElement('canvas'); canvas.width = 32; canvas.height = 32; const context = canvas.getContext('2d'); const gradient = context.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 ); gradient.addColorStop(0, 'rgba(255,255,255,1)'); gradient.addColorStop(0.2, 'rgba(255,255,255,0.8)'); gradient.addColorStop(0.5, 'rgba(255,255,255,0.3)'); gradient.addColorStop(1, 'rgba(255,255,255,0)'); context.fillStyle = gradient; context.fillRect(0, 0, canvas.width, canvas.height); const texture = new THREE.Texture(canvas); texture.needsUpdate = true; return texture; } } // Cleanup method to remove all cubies and particles from the scene RubiksCube.prototype.cleanup = function() { // Remove all cubies from the scene // Remove the main pivot group from the scene if (this.pivot) { this.game.scene.remove(this.pivot); // Dispose of cubies within the pivot this.pivot.children.forEach(cubie => { if (cubie.geometry) cubie.geometry.dispose(); if (cubie.material) { if (Array.isArray(cubie.material)) { cubie.material.forEach(material => material.dispose()); } else { cubie.material.dispose(); } } }); this.pivot = null; } // Clear cubies array (cubies are children of pivot, will be GC'd with pivot) this.cubies = []; // Remove any rotating group if it exists if (this.rotatingGroup) { this.game.scene.remove(this.rotatingGroup); this.rotatingGroup = null; } // Remove all particle systems for (let i = this.particleSystems.length - 1; i >= 0; i--) { const system = this.particleSystems[i]; this.game.scene.remove(system.points); if (system.geometry) system.geometry.dispose(); if (system.points && system.points.material) system.points.material.dispose(); } // Clear particle systems array this.particleSystems = []; // Reset state this.isRotating = false; this.facesSolvedState = new Array(6).fill(false); this.idleTime = 0; this.isBreathing = false; }