La 3D sur le web avec Three.js : un coin cosy dans un seul fichier HTML

Un modèle 3D qui tourne sur une landing page attire l’attention comme aucune image plate ne peut le faire. Bonne nouvelle : le GLB est le format natif de la 3D sur le web, et afficher nos modèles dans un navigateur demande étonnamment peu de code.

Dans ce tutoriel, nous allons construire une petite scène interactive avec Three.js : un coin lecture avec le Fauteuil en bois, la Lampe de table en céramique, la Table de chevet en chêne et le Ficus lyrata en panier.

Ce dont vous avez besoin

• Les fichiers GLB des modèles, placés dans un dossier models à côté de votre fichier HTML.

• Un serveur web local. Les navigateurs bloquent le chargement de fichiers directement depuis le disque : lancez par exemple npx serve ou l’extension Live Server de VS Code.

• Aucun outil de build : nous chargerons Three.js depuis un CDN grâce à une import map.

Le code complet

Créez index.html avec ce contenu :

<!doctype html>
<html>
  <head>
    <style>body { margin: 0; background: #f3efe8; }</style>
    <script type="importmap">
      { "imports": {
        "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
        "three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/"
      } }
    </script>
  </head>
  <body>
    <script type="module">
      import * as THREE from 'three';
      import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
      import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
      import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';

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

      const scene = new THREE.Scene();
      scene.background = new THREE.Color('#f3efe8');
      const pmrem = new THREE.PMREMGenerator(renderer);
      scene.environment = pmrem.fromScene(new RoomEnvironment()).texture;

      const camera = new THREE.PerspectiveCamera(40, innerWidth / innerHeight, 0.1, 100);
      camera.position.set(2.5, 1.6, 3);
      const controls = new OrbitControls(camera, renderer.domElement);
      controls.target.set(0, 0.6, 0);
      controls.enableDamping = true;

      const loader = new GLTFLoader();
      const place = (file, x, z, rotY = 0) =>
        loader.load('models/' + file, (gltf) => {
          gltf.scene.position.set(x, 0, z);
          gltf.scene.rotation.y = rotY;
          scene.add(gltf.scene);
        });

      place('wooden-armchair.glb', 0, 0, 0.4);
      place('oak-bedside-table.glb', 0.9, -0.2);
      place('ceramic-table-lamp.glb', 0.9, -0.2);
      place('fiddle-leaf-fig.glb', -0.9, -0.4);

      renderer.setAnimationLoop(() => { controls.update(); renderer.render(scene, camera); });

      addEventListener('resize', () => {
        camera.aspect = innerWidth / innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(innerWidth, innerHeight);
      });
    </script>
  </body>
</html>

Renommez vos fichiers téléchargés pour qu’ils correspondent aux noms du code, ou modifiez les noms dans le code. Lancez votre serveur local et ouvrez la page. Vous pouvez faire pivoter la scène à la souris et zoomer avec la molette.

Ce que fait le code

Renderer et scène. Nous créons un renderer WebGL qui occupe toute la fenêtre et une scène avec une couleur de fond chaleureuse.

Éclairage d’environnement. RoomEnvironment génère un environnement lumineux doux, façon studio. Les matériaux PBR ont besoin d’un environnement à refléter, et cette simple ligne offre à nos modèles des réflexions crédibles sans charger d’HDRI.

Caméra et contrôles. Une caméra en perspective regarde le coin lecture, et OrbitControls permet aux visiteurs de faire pivoter la vue et de zoomer. Le damping rend les mouvements fluides.

Chargement des modèles. GLTFLoader lit chaque GLB, matériaux et textures compris, et nous renvoie un objet scène que nous pouvons positionner et faire pivoter. Nos modèles utilisent une échelle réelle en mètres et ont leur origine à la base : les poser au sol revient simplement à y = 0.

Conseils de positionnement

• Empiler des objets. La lampe doit reposer sur la table. Surélevez-la de la hauteur de la table : remplacez 0 par la hauteur de la table dans la ligne de position, ou calculez-la avec new THREE.Box3().setFromObject(table).

• Rotation. rotation.y s’exprime en radians : Math.PI / 2 fait pivoter un modèle de 90 degrés.

• Échelle. Tous nos modèles partagent la même échelle : vous ne devriez rien avoir à redimensionner.

Préparer la mise en production

• Ombres. Ajoutez une DirectionalLight avec castShadow = true et activez castShadow sur les maillages des modèles pour bien ancrer les objets au sol.

• Écran de chargement. Utilisez THREE.LoadingManager pour afficher la progression pendant le téléchargement des modèles.

• Compression. Pour les grosses scènes, des outils comme gltf-transform peuvent compresser davantage la géométrie et les textures. Convertir des fichiers pour votre propre projet est autorisé par notre licence.

• Option plus simple. Si vous n’avez besoin que d’un seul modèle avec rotation et zoom, le composant web model-viewer de Google affiche un GLB avec une seule balise HTML.

À vous de jouer

Remplacez le coin lecture par une cuisine, une salle de jeux ou un petit village. Chaque modèle de la boutique est un GLB qui fonctionne avec exactement ce code.