Après avoir découvert Three.js dans notre premier blog d'introduction, passons à la pratique ! Aujourd'hui, tu vas apprendre à créer un projet simple avec un cube tournant en utilisant Three.js. Ne t'inquiète pas, c'est plus simple que cela n'y paraît, et je vais te guider à travers chaque étape.
Étape 1 : Créer les fichiers
Dans un nouveau dossier, crée deux fichiers :
-
index.html– Pour la structure HTML. -
app.js– Pour notre code Three.js.
Nous allons commencer par initialiser la structure de base de notre page web, inclure la bibliothèque Three.js via son CDN, et lier notre fichier app.js qui contiendra le code de notre application.
Dans index.html, colle ce code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Premier Projet Three.js</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Étape 2 : Initialiser Three.js
Dans cette étape, nous initialisons les composants essentiels de Three.js. Nous créons d'abord une Scene, qui agit comme un conteneur pour tous nos objets 3D. Ensuite, nous configurons une PerspectiveCamera, qui simule la vue humaine avec un champ de vision de 75 degrés et un ratio d'aspect correspondant à la fenêtre du navigateur. Les deux derniers paramètres (0.1 et 1000) définissent les plans de coupe proche et lointain de la caméra. Enfin, nous initialisons un WebGLRenderer pour afficher notre scène. Nous ajustons sa taille à celle de la fenêtre et l'ajoutons au corps du document HTML. Ces éléments constituent la base de toute scène Three.js et permettent de visualiser des objets 3D dans le navigateur.
Dans app.js, voici a quoi le code ressemblera :
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
Étape 3 : Créer un cube
Dans cette étape, nous créons notre premier objet 3D : un cube. Voici comment nous procédons :
- Nous définissons la forme de notre objet. Ici,
BoxGeometrycrée un cube simple.
const geometry = new THREE.BoxGeometry();
- Nous créons un matériau de base pour notre cube. Le paramètre
color: 0x00ff00définit la couleur du cube en vert (en hexadécimal).
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
- Nous combinons la géométrie et le matériau pour créer un "Mesh", qui est un objet 3D rendu dans Three.js.
const cube = new THREE.Mesh(geometry, material);
- Nous ajoutons le cube à notre scène pour qu'il soit visible.
scene.add(cube);
- Nous reculons la caméra de 5 unités sur l'axe Z pour avoir une vue d'ensemble du cube. Sans cela, la caméra serait à l'intérieur du cube.
camera.position.z = 5;
Cette séquence de code illustre les étapes fondamentales pour créer et afficher un objet 3D dans Three.js : définir sa forme, son apparence, le créer, l'ajouter à la scène, et positionner la caméra pour le voir.
Dans app.js, voici a quoi le code ressemblera :
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
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;
Étape 4 : Animer le cube
Pour donner vie à notre scène, nous allons animer le cube en le faisant tourner. Voici comment nous procédons :
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
La fonction animate() est appelée en boucle grâce à requestAnimationFrame(). À chaque frame, elle incrémente légèrement la rotation du cube et redessine la scène. Cette méthode, courante en Three.js, permet de générer des mouvements continus dans la scène 3D.
Étape 5 : Résultat
Ouvre index.html dans ton navigateur. Si tout fonctionne, tu verras un cube vert qui tourne !
Prochaines étapes
Maintenant que tu as créé ton premier projet, essaie de modifier la forme ou la couleur du cube. La semaine prochaine, nous explorerons comment ajouter des lumières pour améliorer ta scène 3D.
Commentaires