Tutoriel Three.js : Un guide pour débutants

Three.js est l'une des bibliothèques JavaScript les plus populaires pour la création de graphiques 3D dans les navigateurs web. Basée sur WebGL, elle simplifie le processus de création et d'affichage de graphiques 3D animés sur un navigateur web sans avoir besoin d'apprendre WebGL de bas niveau. Que vous cherchiez à créer des visualisations interactives, des jeux ou des expériences web immersives, Three.js fournit les outils dont vous avez besoin pour donner vie à vos idées.

Avant de plonger dans le développement avec Three.js, envisagez d'essayer Apidog comme alternative à Postman pour vos besoins de tests d'API. Apidog offre une interface intuitive avec des fonctionnalités puissantes pour le développement, les tests et la documentation d'API, le tout sans le gonflement de fonctionnalités que de nombreux utilisateurs trouvent frustrant avec Postman. C'est un excellent outil d'accompagnement lors du développement d'applications web qui interagissent avec des API.

button

Maintenant, commençons notre voyage dans Three.js !

1. Configuration de votre environnement

Installation

Il existe plusieurs façons d'inclure Three.js dans votre projet :

Option 1 : Utilisation de npm (Recommandé)

npm install three

Ensuite, importez-le dans votre fichier JavaScript :

import * as THREE from 'three';

Option 2 : Utilisation d'un CDN

Ajoutez ceci à votre fichier HTML :

<script src="https://cdn.jsdelivr.net/npm/three@0.157.0/build/three.min.js"></script>

Option 3 : Télécharger et inclure localement

Téléchargez la bibliothèque depuis le site web de Three.js, et incluez-la dans votre HTML :

<script src="path/to/three.min.js"></script>

Structure du projet

Pour un projet Three.js de base, vous aurez besoin de :

project-folder/
├── index.html
├── style.css
└── script.js

Votre fichier index.html devrait inclure :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>My Three.js App</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/three@0.157.0/build/three.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

2. Comprendre les fondamentaux

Three.js fonctionne sur quelques concepts clés qu'il est essentiel de comprendre :

Les composants principaux

Scene : Considérez cela comme un conteneur qui contient tous vos objets, lumières et caméras.
Camera : Définit quelle partie de la scène est visible (votre point de vue).
Renderer : Dessine ce que la caméra voit sur votre écran.
Objects (Meshes) : Les objets 3D de votre scène, généralement composés de géométrie et de matériau.
Lights : Sources d'illumination pour votre scène.

Création de votre première scène

Voici un exemple de base pour créer un cube en rotation :

// Create the scene
const scene = new THREE.Scene();

// Create a camera
const camera = new THREE.PerspectiveCamera(
    75,                                     // Field of view
    window.innerWidth / window.innerHeight, // Aspect ratio
    0.1,                                    // Near clipping plane
    1000                                    // Far clipping plane
);
camera.position.z = 5;

// Create the renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

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

// Animation loop
function animate() {
    requestAnimationFrame(animate);
    
    // Rotate the cube
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    
    renderer.render(scene, camera);
}
animate();

3. Rendre votre application réactive

Pour vous assurer que votre application Three.js est belle sur tous les appareils, vous devez gérer le redimensionnement de la fenêtre :

// Handle window resizing
window.addEventListener('resize', () => {
    const width = window.innerWidth;
    const height = window.innerHeight;
    
    // Update renderer
    renderer.setSize(width, height);
    
    // Update camera
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
});

4. Ajout de matériaux et d'éclairage

Les scènes de base ne sont qu'un début. Améliorons la qualité visuelle avec des matériaux et des lumières :

Matériaux

// Standard material with reflection
const material = new THREE.MeshStandardMaterial({
    color: 0x0088ff,       // Blue color
    roughness: 0.5,        // Somewhat shiny
    metalness: 0.5,        // Somewhat metallic
});

// Phong material for simple shiny surfaces
const phongMaterial = new THREE.MeshPhongMaterial({
    color: 0xff0000,       // Red color
    shininess: 100,        // Very shiny
    specular: 0x111111     // Specular highlight color
});

Lumières

// Add ambient light
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);

// Add directional light (like the sun)
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);

// Add point light (like a light bulb)
const pointLight = new THREE.PointLight(0xffffff, 1, 100);
pointLight.position.set(10, 10, 10);
scene.add(pointLight);

5. Création de différentes géométries

Three.js est livré avec de nombreuses géométries intégrées :

// Sphere
const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
const sphere = new THREE.Mesh(sphereGeometry, material);
sphere.position.x = -3;
scene.add(sphere);

// Cylinder
const cylinderGeometry = new THREE.CylinderGeometry(1, 1, 2, 32);
const cylinder = new THREE.Mesh(cylinderGeometry, material);
cylinder.position.x = 0;
scene.add(cylinder);

// Torus (donut)
const torusGeometry = new THREE.TorusGeometry(0.8, 0.3, 16, 100);
const torus = new THREE.Mesh(torusGeometry, material);
torus.position.x = 3;
scene.add(torus);

6. Création de texte dans Three.js

Du texte peut être ajouté à votre scène en utilisant la TextGeometry :

// First, load the font
const loader = new THREE.FontLoader();
loader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', function(font) {
    const textGeometry = new THREE.TextGeometry('Hello Three.js!', {
        font: font,
        size: 0.5,
        height: 0.1,
        curveSegments: 12,
        bevelEnabled: true,
        bevelThickness: 0.03,
        bevelSize: 0.02,
        bevelOffset: 0,
        bevelSegments: 5
    });
    
    const textMaterial = new THREE.MeshStandardMaterial({ color: 0xffff00 });
    const text = new THREE.Mesh(textGeometry, textMaterial);
    
    // Center the text
    textGeometry.computeBoundingBox();
    const textWidth = textGeometry.boundingBox.max.x - textGeometry.boundingBox.min.x;
    text.position.x = -textWidth / 2;
    
    scene.add(text);
});

7. Dessiner des lignes

Vous pouvez créer des lignes dans Three.js pour les wireframes ou la visualisation de chemins :

// Create points for the line
const points = [];
points.push(new THREE.Vector3(-2, 0, 0));
points.push(new THREE.Vector3(0, 2, 0));
points.push(new THREE.Vector3(2, 0, 0));

// Create the line geometry
const lineGeometry = new THREE.BufferGeometry().setFromPoints(points);

// Create material
const lineMaterial = new THREE.LineBasicMaterial({ color: 0xffffff });

// Create the line
const line = new THREE.Line(lineGeometry, lineMaterial);
scene.add(line);

8. Interaction et contrôles

Pour permettre aux utilisateurs d'interagir avec votre scène 3D, vous pouvez ajouter des contrôles :

// Import OrbitControls
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

// Create controls
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // Add smooth damping effect
controls.dampingFactor = 0.05;

// Update the animation loop
function animate() {
    requestAnimationFrame(animate);
    
    // Update controls
    controls.update();
    
    renderer.render(scene, camera);
}

9. Chargement de modèles 3D

Vous pouvez importer des modèles créés dans des logiciels comme Blender :

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

const loader = new GLTFLoader();
loader.load(
    'path/to/model.gltf',
    // Called when loaded
    function(gltf) {
        scene.add(gltf.scene);
    },
    // Called during loading
    function(xhr) {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
    },
    // Called on error
    function(error) {
        console.error('An error happened', error);
    }
);

10. Conseils de débogage et de performance

Panneau de statistiques

import Stats from 'three/examples/jsm/libs/stats.module.js';

const stats = new Stats();
document.body.appendChild(stats.dom);

function animate() {
    requestAnimationFrame(animate);
    stats.begin();
    
    // Your animation code here
    
    stats.end();
    renderer.render(scene, camera);
}

Conseils de performance

Utilisez BufferGeometry au lieu de Geometry (qui est obsolète)
Réutilisez les matériaux et les géométries lorsque cela est possible
Définissez renderer.powerPreference = 'high-performance' pour une meilleure utilisation du GPU
Utilisez Object3D.frustumCulled = true pour masquer les objets en dehors de la vue de la caméra
Optimisez la complexité du modèle en utilisant moins de polygones lorsque cela est possible

Conclusion

Vous avez maintenant appris les bases de Three.js, de la configuration de votre environnement à la création de scènes 3D interactives. Ce n'est que le début - Three.js offre un vaste éventail de fonctionnalités pour créer de superbes expériences web en 3D.

Pour approfondir vos connaissances, explorez la documentation officielle de Three.js et la galerie d'exemples. La communauté est également active sur les forums et GitHub, fournissant des ressources et un support aux développeurs de tous niveaux.

N'oubliez pas que la meilleure façon d'apprendre est d'expérimenter. Commencez par des projets simples et progressez progressivement vers des scènes plus complexes. Avec de la pratique et de la patience, vous créerez des expériences web 3D impressionnantes en un rien de temps !

Bon codage avec Three.js !

button