Ceci est une traduction générée par l'IA de l'article polonais original et peut contenir des erreurs mineures.

Créer un Rubik's Cube 3D interactif avec Vue 3 et WebGL

Les graphiques tridimensionnels dans le navigateur ont depuis longtemps cessé de n'être qu'une curiosité technologique, devenant un outil puissant pour créer des expériences hautement interactives. Lorsque l'on pense à la 3D sur le web, la première association est souvent la bibliothèque Three.js. Dans ce post, cependant, je voudrais présenter une approche architecturale consistant à construire un Rubik's Cube 3D Interactif entièrement au sein du framework Vue 3, en s'appuyant fortement sur l'API native de l'interface WebGL et sur une gestion précise de l'état des fractions de rotation.

Vous pouvez étudier l'intégralité de mon dernier projet open-source – rubic-cube – sur mon instance Gitea publique. Bonne lecture !

Architecture et défis

Le principal problème lors de la mise en œuvre de jeux de logique comme le Rubik's Cube n'est pas seulement de « dessiner » des cubes dans l'espace, mais de gérer leurs rotations sur des axes individuels sans collision.

Pourquoi Vue 3 ?

L'utilisation de l'état réactif de Vue 3 (grâce à l'API de Composition – ref, computed, watch) permet de découpler avec élégance la logique et les mathématiques du cube lui-même (l'état des 27 petits cubes, qu'on appelle les Cubies) de la couche de rendu qui projette les images sur le <canvas>. Le moteur réactif de Vue fonctionne brillamment pour suivre « l'intention » de l'utilisateur de tourner une face donnée (par exemple, le glissement d'un doigt sur l'écran).

Boucle de rendu vs Panneau de réactivité

Dans un flux 3D web classique, nous avons une boucle requestAnimationFrame qui calcule et redessine le monde 60 (ou 120) fois par seconde. L'ajout de tout l'état Vue réactif à l'intérieur tuerait drastiquement les performances sur des appareils plus faibles (mobiles).

Ma solution pour maintenir 60 FPS a été de limiter la réactivité. La représentation de l'agencement du cube (modèle de données) n'est mise à jour qu'à la demande lors de mouvements spécifiques de l'algorithme, tandis que le WebGL de son côté projette simplement des polygones dans l'espace cosmique en interrogeant les matrices de transformation dans une boucle brute, contournant presque entièrement le proxy de Vue pendant la simple phase de peinture (rendu).

TIP

La meilleure tactique d'optimisation dans Vue pour les lourdes opérations de projection de rendu est de séparer les matrices de transformation en tant qu'objets JS bruts sans la surcharge de la Réactivité.

Modèle mathématique – Quaternions et Angles d'Euler

Pour prévenir le célèbre problème du Gimbal Lock (blocage de cardan), nous implémentons les rotations de toute la matrice 3x3x3 des plans individuels en utilisant des Quaternions plutôt que des Angles d'Euler. Lorsqu'on effectue une « rotation rapide » de la face droite, une animation CSS est bien trop imprévisible pour pouvoir s'y fier.

La rotation a lieu en mappant des positions par rapport à l'itération centrale :

// Fragment conceptuel de l'algorithme de rotation de colonne dans Vue
function rotateSlice(axis, index, direction) {
  state.isAnimating = true;
  const targetAngle = direction * (Math.PI / 2); // 90 degrés
  
  animateValue(0, targetAngle, 300, (currentAngle) => {
    // Mise à jour de la matrice de rotation pour les petits cubes (cubies) actifs
    updateActiveCubiesMatrix(axis, currentAngle);
  }).then(() => {
    snapToGrid();
    state.isAnimating = false;
  });
}

Grâce à cela, nous obtenons l'effet de « clipsage » du cube sur ses positions exactes tous les 90 degrés, tout en conservant une rotation en projection isométrique parfaitement fluide.

Réactivité et toucher mobile

Un Rubik's Cube nécessite un glissement (drag) tridimensionnel – il n'y a pas de défilement plat ici. Cela a été résolu en enregistrant les événements natifs touchstart, touchmove sur l'objet <canvas>, ce qui permet d'analyser les vecteurs delta de glissement :

<template>
  <div class="cube-container">
    <canvas 
      ref="webglCanvas" 
      @touchstart="handleTouchStart"
      @touchmove="handleTouchMove"
    ></canvas>
  </div>
</template>

Le tout est entièrement jouable sur un écran tactile et fonctionne avec une latence remarquablement faible – presque aussi bien qu'une application native, ce qui constitue un succès phénoménal pour les standards web modernes.

Essayez par vous-même !

Construire des graphiques basés sur des mathématiques spatiales développe l'esprit d'un ingénieur bien plus que l'assemblage standard de formulaires et de requêtes REST. Cela ouvre les yeux sur les optimisations matérielles.

Jetez un œil au dépôt public sur mon domaine pour télécharger vous-même le code et l'exécuter localement : 👉 Dépôt Rubic Cube sur Gitea 7u.pl

Résolvez-le entièrement et venez montrer votre record de temps de requêtes (PR) sur l'algorithme de mélange ! 🚀