Créer une Skybox immersive avec CubeTexture

Qu'est-ce qu'une Skybox ?

Imaginez que toute votre scène 3D est placée au centre d'un immense cube. Sur chacune des six faces intérieures de ce cube, on projette une image. Ces images sont conçues pour s'assembler parfaitement aux arêtes, donnant l'illusion que vous êtes au milieu d'un environnement continu à 360°.

L'image ci-dessous illustre parfaitement ce concept :

L'un des grands avantages de cette technique est la performance. Rendre un immense paysage modélisé en 3D serait extrêmement coûteux en ressources, alors que l'affichage de six textures sur un simple cube est très rapide.

Pour bien visualiser l'effet, la vidéo suivante montre ce qu'est une skybox et l'illusion qu'elle crée.

La méthode moderne : CubeTextureLoader

Historiquement, pour créer une skybox, les développeurs créaient manuellement une très grande BoxGeometry, un tableau de six MeshBasicMaterial (un pour chaque face), et prenaient soin de retourner les faces du cube vers l'intérieur avec material.side = THREE.BackSide.

Aujourd'hui, Three.js propose une solution bien plus simple et optimisée : la CubeTexture. C'est un type de texture spécialement conçu pour gérer ces six images comme une seule unité. Pour la charger, nous utiliserons le CubeTextureLoader.

Cette approche est préférable car elle est gérée plus efficacement par le moteur 3D et simplifie grandement notre code.

Atelier : Créer votre propre Skybox

Passons à la pratique. Nous allons ajouter une skybox à notre scène.

1. Trouver les textures

Pour une skybox, il vous faut six images qui s'alignent parfaitement. Elles suivent généralement une convention de nommage qui indique leur direction :

• px (Positif X, droite)
• nx (Négatif X, gauche)
• py (Positif Y, haut)
• ny (Négatif Y, bas)
• pz (Positif Z, avant)
• nz (Négatif Z, arrière)

Vous pouvez trouver de nombreuses textures de skybox gratuites sur des sites comme OpenGameArt.org ou en cherchant "free skybox textures". Téléchargez un ensemble qui vous plaît et placez les six images dans votre dossier public/. Assurez-vous qu'elles sont dans un format web standard comme .jpg ou .png.

2. Charger la CubeTexture

Le processus est très simple et bien documenté. Nous allons utiliser CubeTextureLoader pour charger nos six images.

En s'inspirant de cet exemple, voici comment intégrer le chargement dans votre code.

Attention : L'ordre des images dans le tableau est crucial ! Il doit correspondre à [+X, -X, +Y, -Y, +Z, -Z]. Si vos images sont nommées right, left, top, bottom, front, back, c'est dans cet ordre que vous devrez les lister.

import * as THREE from 'three';
// ... autres imports ...

// ... setup de la scène, caméra, renderer ...

// 1. Créer une instance du loader
const cubeTextureLoader = new THREE.CubeTextureLoader();

// 2. Charger les 6 textures
const cubeTexture = cubeTextureLoader.load([
    '/path/to/px.jpg', // droite
    '/path/to/nx.jpg', // gauche
    '/path/to/py.jpg', // haut
    '/path/to/ny.jpg', // bas
    '/path/to/pz.jpg', // avant
    '/path/to/nz.jpg'  // arrière
]);

// 3. Appliquer la texture comme arrière-plan de la scène
scene.background = cubeTexture;

Remplacez les /path/to/... par les chemins corrects vers vos images dans le dossier public/.

scene.background vs scene.environment

Rappelez-vous de la leçon précédente :

• scene.background définit ce qui est visible en fond de scène.
• scene.environment est utilisé par les matériaux PBR (MeshStandardMaterial, MeshPhysicalMaterial) pour calculer l'éclairage et les reflets.

La CubeTexture que nous venons de créer peut servir aux deux ! Si vous voulez que vos objets métalliques ou brillants reflètent la skybox, il vous suffit d'ajouter cette ligne :

scene.environment = cubeTexture;

Cela crée une cohérence parfaite entre ce que l'on voit en fond et ce qui est reflété par les objets.

Voici un exemple de code complet :

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

// --- Initialisation de base ---
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);

// --- Création de la Skybox ---
const loader = new THREE.CubeTextureLoader();
loader.setPath('/textures/skybox/'); // Optionnel : définissez un chemin de base

const textureCube = loader.load([
    'px.png', 'nx.png',
    'py.png', 'ny.png',
    'pz.png', 'nz.png'
]);

scene.background = textureCube;
scene.environment = textureCube; // Pour les reflets sur les objets PBR

// --- Objet de test ---
const sphere = new THREE.Mesh(
    new THREE.SphereGeometry(1, 32, 32),
    new THREE.MeshStandardMaterial({
        metalness: 1.0,
        roughness: 0.05
    })
);
scene.add(sphere);

// --- Boucle d'animation ---
function animate() {
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
}
animate();

Avec ce code, vous devriez voir une sphère très réfléchissante au milieu de votre skybox, reflétant l'environnement de manière convaincante.

Et dans React Three Fiber ?

Comme vous pouvez vous y attendre, l'écosystème R3F simplifie également la création de skybox. Le composant <Environment /> de drei, que nous avons vu dans la leçon précédente, peut aussi accepter un tableau de 6 images via sa prop files.

import { Environment } from '@react-three/drei'

// Dans votre composant Canvas
<Environment
  background // Applique aussi en fond de scène
  files={['px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png']}
  path="/textures/skybox/"
/>

Ceci montre une fois de plus comment la connaissance des concepts de Three.js (CubeTextureLoader, scene.background) se transpose directement et simplement dans l'univers déclaratif de R3F.

Conclusion

Vous maîtrisez désormais deux techniques essentielles pour créer des environnements immersifs : l'IBL avec un fichier HDRI et la Skybox avec une CubeTexture. Le choix entre les deux dépend souvent des ressources dont vous disposez (une image panoramique vs six images cubiques) et de l'effet désiré.

Points clés à retenir :

• Une skybox est une technique qui utilise 6 textures sur les faces intérieures d'un cube pour simuler un environnement à 360°.
• La méthode moderne et efficace dans Three.js utilise CubeTextureLoader pour charger les 6 images en une seule CubeTexture.
• L'ordre des images dans le loader est primordial : [+X, -X, +Y, -Y, +Z, -Z].
• La CubeTexture résultante est assignée à scene.background pour être visible, et peut aussi être assignée à scene.environment pour l'éclairage et les reflets.

Aperçu de la prochaine leçon :
Jusqu'à présent, nos scènes sont magnifiques mais statiques. Dans le prochain module, nous allons leur donner vie ! Nous commencerons par la base de toute animation dans Three.js : comment animer les propriétés d'un objet (comme sa rotation ou sa position) directement dans la boucle de rendu.