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) { this.game = game; 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.createCube(); this.pivot = new THREE.Group(); 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.game.scene.add(cubie); } } } } 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; // 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 scene and add to rotating group this.game.scene.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 scene this.rotatingGroup.remove(cubie); this.game.scene.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(); // 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); const numMoves = 20; 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 } } // 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, create particle effect if (isSolved && !this.facesSolvedState[idx]) { 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; } } // 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 this.cubies.forEach(cubie => { this.game.scene.remove(cubie); cubie.geometry.dispose(); cubie.material.forEach(material => material.dispose()); }); // Clear cubies array 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); system.geometry.dispose(); system.points.material.dispose(); } // Clear particle systems array this.particleSystems = []; // Reset state this.isRotating = false; this.facesSolvedState = new Array(6).fill(false); }