Français

Tutoriel WebGL

Application WebGL

Exemples WebGL

WebGL - Cube Interactif

Bonjour, aspirants programmeurs ! Aujourd'hui, nous allons entreprendre un voyage passionnant à travers le monde du WebGL. Nous allons créer un cube interactif que vous pouvez faire pivoter avec la souris. Ne vous inquiétez pas si vous n'avez jamais codé auparavant - je vous guiderai à travers chaque étape avec la patience d'une vieille tortue sagesse. Mettons-nous à l'eau !

WebGL - Interactive Cube

Comprendre les Basics

Avant de dessiner notre cube, couvrons rapidement quelques concepts fondamentaux.

Qu'est-ce que WebGL ?

WebGL (Web Graphics Library) est une API JavaScript qui nous permet de render des graphiques 3D dans un navigateur web. C'est comme donner à vos pages web des superpuissances pour créer des effets visuels époustouflants !

Ce dont nous aurons besoin

  1. Un éditeur de texte (comme Notepad++ ou Visual Studio Code)
  2. Un navigateur web (Chrome, Firefox ou tout navigateur moderne)
  3. Une pincée de curiosité et une cuillerée de persévérance !

Exemple - Dessiner un Cube Interactif

Étape 1 : Mise en place du HTML

Commençons par créer le squelette de notre page web. Ouvrez votre éditeur de texte et créez un nouveau fichier appelé interactive_cube.html. Copiez et collez le code suivant :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>WebGL Cube Interactif</title>
<style>
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// Notre code WebGL ira ici
</script>
</body>
</html>

Cela met en place notre structure HTML et inclut la bibliothèque Three.js, ce qui rendra notre travail WebGL beaucoup plus facile.

Étape 2 : Créer la Scène

Ajoutons maintenant un peu de JavaScript pour créer notre scène 3D. Remplacez le commentaire dans la balise script avec ce code :

// Mettre en place la scène, la caméra et le rendu
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('myCanvas') });
renderer.setSize(window.innerWidth, window.innerHeight);

// Créer un cube
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

Reprenons cela :

  • Nous créons une scène, qui est comme une scène pour nos objets 3D.
  • La caméra définit notre point de vue.
  • Le rendu est responsable du dessin de notre scène.
  • Nous créons un cube en utilisant BoxGeometry et lui donnons une couleur verte.
  • Enfin, nous positionnons la caméra à 5 unités de distance du centre.

Étape 3 : Animer le Cube

Pour faire pivoter notre cube, nous devons ajouter une boucle d'animation. Ajoutez ce code après le bloc précédent :

function animate() {
requestAnimationFrame(animate);

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

renderer.render(scene, camera);
}
animate();

Cette fonction sera appelée plusieurs fois, tournant légèrement le cube à chaque trame et re-renderant la scène.

Étape 4 : Rendre Interactif

Maintenant, ajoutons de l'interactivité pour que nous puissions faire pivoter le cube avec la souris. Ajoutez ce code avant la fonction animate() :

let isDragging = false;
let previousMousePosition = { x: 0, y: 0 };

document.addEventListener('mousedown', () => isDragging = true);
document.addEventListener('mouseup', () => isDragging = false);
document.addEventListener('mousemove', (e) => {
if (isDragging) {
const deltaMove = {
x: e.offsetX - previousMousePosition.x,
y: e.offsetY - previousMousePosition.y
};

cube.rotation.y += deltaMove.x * 0.01;
cube.rotation.x += deltaMove.y * 0.01;
}

previousMousePosition = {
x: e.offsetX,
y: e.offsetY
};
});

Ce code ajoute des écouteurs d'événement pour les actions de la souris, nous permettant de faire pivoter le cube en cliquant et en glissant.

Étape 5 : Ajouter un Peu de Peps

Faisons notre cube un peu plus intéressant en lui donnant des couleurs différentes sur chaque face. Remplacez la ligne de création du matériau par cette :

const materials = [
new THREE.MeshBasicMaterial({ color: 0xff0000 }), // Rouge
new THREE.MeshBasicMaterial({ color: 0x00ff00 }), // Vert
new THREE.MeshBasicMaterial({ color: 0x0000ff }), // Bleu
new THREE.MeshBasicMaterial({ color: 0xffff00 }), // Jaune
new THREE.MeshBasicMaterial({ color: 0xff00ff }), // Magenta
new THREE.MeshBasicMaterial({ color: 0x00ffff })  // Cyan
];
const cube = new THREE.Mesh(geometry, materials);

Maintenant, chaque face de notre cube aura une couleur différente !

Conclusion

Félicitations ! Vous venez de créer un cube 3D interactif en utilisant WebGL. Ce n'est que la pointe de l'iceberg en ce qui concerne la programmation des graphiques 3D. En continuant votre voyage, vous découvrirez encore plus de choses incroyables que vous pouvez créer.

N'oubliez pas, apprendre à coder c'est comme apprendre à faire du vélo. Ça peut sembler unstable au début, mais avec de la pratique, vous serez bientôt en train de zigzaguer partout !

Voici un tableau résumant les principales méthodes que nous avons utilisées :

Méthode Description
THREE.Scene() Crée une nouvelle scène 3D
THREE.PerspectiveCamera() Configure la vue de la caméra
THREE.WebGLRenderer() Gère le rendu de la scène
THREE.BoxGeometry() Crée une géométrie de cube
THREE.MeshBasicMaterial() Définit le matériau pour le cube
THREE.Mesh() Combine la géométrie et le matériau
requestAnimationFrame() Appelle la boucle d'animation

Continuez à expérimenter, continuez à apprendre, et surtout, amusez-vous ! Le monde du WebGL est vôtre, et vous êtes maintenant équipé pour commencer à l'explorer. Bon codage !

Credits: Image by storyset

Tutoriel précédent:
WebGL - Rotation du cube