Quantum Topology Matcher (
Contributed by loshu2000
Improved by Laravel Company · 2026-09-07
Act as an expert Creative Technologist and Interaction Architect. Your task is to construct a complete, single-file implementation of a minimalist, interactive 3D web game based on complex spatial alignment mechanics.
PROJECT TITLE: Quantum Entanglement
OUTPUT REQUIREMENT: Provide the complete, runnable code within a single index.html file. The implementation must use only HTML, inline CSS, and vanilla JavaScript. All necessary libraries must be loaded via CDN (specifically Three.js).
1. CORE GAME SPECIFICATION
A. Conceptual Goal: The player must find and synchronize two distinct particle clusters by matching their exact spatial orientation and topological structure to initiate a fusion event.
B. Game Elements:
- Particle Clusters: A dynamic array of 3D objects floating in a void.
- Interaction: Clicking a cluster must trigger the unfolding of its unique 3D geometric matrix.
- Goal State: Identify two clusters that share identical spatial orientations and topologies.
2. TECHNICAL & MECHANIC REQUIREMENTS
A. Rendering Engine:
- Library: Three.js, loaded via CDN.
- Setup: Utilize the
WebGLRenderer. - Performance: Implement highly optimized rendering using buffer geometries for all cluster meshes to ensure high frame rates.
B. Physics & Interaction:
- Rotation: Implement smooth, intuitive 3D rotation control via mouse drag interaction applied to the selected cluster. This rotation must utilize precise quaternion mathematics.
- Alignment Check: The core mechanic relies on accurately comparing the spatial orientation (rotation matrix/quaternion) and topology (the resulting unfolded mesh structure) of two clusters.
- Fusion Event: Upon successful alignment (identical orientation/topology), trigger a "gravity implosion." This must be visualized by calculating and rendering mutual attraction vectors between the two clusters, followed by the destruction of both meshes, replaced by a particle effect.
3. AESTHETIC & DESIGN DIRECTION
Design Style: Minimalist Surrealism.
- Background: Pure, absolute white void (
#FFFFFF). - Cluster Materials: Clusters must utilize a "frosted glass" or volumetric transmission material effect, allowing the background void to subtly influence the cluster geometry.
- Lighting/Effects: Implement dynamic, interactive volumetric light trails that react to the cluster positions and rotation, emphasizing the ethereal nature of the space.
4. EXECUTION INSTRUCTIONS
Generate the complete index.html file that encapsulates all the required Three.js setup, scene management, interactive controls, geometry generation, and the complex spatial alignment logic. Ensure the code is clean, well-commented, and immediately runnable.
Original prompt (before our improvements)
I want you to act as a creative technologist and interaction architect. Construct a single-file (index.html) web game based on spatial alignment mechanics. GAME SPEC: Title: Quantum Entanglement Core mechanic: A 3D array of collapsed particle clusters floats in space. Clicking a cluster unfolds its unique 3D geometric matrix. Goal: Find and unfold two clusters with identical spatial orientations and topologies to fuse them via gravity implosion vectors. TECH REQUIREMENTS: Single file: HTML5 with inline styles and vanilla JavaScript leveraging Three.js via CDN. Rendering: Three.js WebGLRenderer with high-performance buffer geometries. Physics: Implement smooth quaternion math for rotating clusters via mouse drag. When a match occurs, compute mutual attraction vectors causing an implosion particle effect before mesh destruction. Design style: Minimalist surrealism. Pure white void background, frosted glass (transmission) cluster materials, and interactive volumetric light trails.