3D sul web con Three.js: un angolo accogliente in un solo file HTML

Un modello 3D che ruota su una landing page cattura l’attenzione come un’immagine piatta non può fare. La buona notizia: il GLB è il formato nativo del 3D sul web, quindi mostrare i nostri modelli in un browser richiede sorprendentemente poco codice.

In questo tutorial costruiremo con Three.js una piccola scena interattiva: un angolo lettura con la Poltrona in legno, la Lampada da tavolo in ceramica, il Comodino in rovere e il Ficus lyrata in cesto.

Cosa ti serve

• I file GLB dei modelli, in una cartella models accanto al tuo file HTML.

• Un server web locale. I browser bloccano il caricamento di file direttamente dal disco, quindi avvia qualcosa come npx serve o l’estensione Live Server di VS Code.

• Nessuno strumento di build: caricheremo Three.js da una CDN usando una import map.

Il codice completo

Crea index.html con questo contenuto:

<!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>

Rinomina i file scaricati in modo che corrispondano ai nomi nel codice, oppure cambia i nomi nel codice. Avvia il server locale e apri la pagina. Puoi ruotare la scena con il mouse e fare zoom con la rotellina.

Cosa fa il codice

Renderer e scena. Creiamo un renderer WebGL che riempie la finestra e una scena con un colore di sfondo caldo.

Illuminazione d’ambiente. RoomEnvironment genera un ambiente luminoso morbido, simile a quello di uno studio. I materiali PBR hanno bisogno di un ambiente da riflettere, e questa singola riga dà ai nostri modelli riflessi credibili senza caricare un HDRI.

Camera e controlli. Una camera prospettica inquadra l’angolo e OrbitControls permette ai visitatori di ruotare e fare zoom. Il damping rende il movimento fluido.

Caricamento dei modelli. GLTFLoader legge ogni GLB, compresi materiali e texture, e ci restituisce un oggetto scena che possiamo posizionare e ruotare. I nostri modelli usano la scala reale in metri e hanno l’origine alla base, quindi per appoggiarli sul pavimento basta y = 0.

Consigli per il posizionamento

• Oggetti sovrapposti. La lampada deve stare sopra il comodino. Sollevala dell’altezza del comodino: sostituisci 0 con l’altezza del mobile nella riga della posizione, oppure calcolala con new THREE.Box3().setFromObject(table).

• Rotazione. rotation.y è espressa in radianti: Math.PI / 2 ruota un modello di 90 gradi.

• Scala. Tutti i nostri modelli condividono la stessa scala, quindi non dovresti dover scalare nulla.

Pronto per la produzione

• Ombre. Aggiungi una DirectionalLight con castShadow = true e imposta castShadow sulle mesh dei modelli per oggetti ben ancorati a terra.

• Schermata di caricamento. Usa THREE.LoadingManager per mostrare l’avanzamento mentre i modelli vengono scaricati.

• Compressione. Per scene grandi, strumenti come gltf-transform possono comprimere ulteriormente geometria e texture. La nostra licenza consente di convertire i file per il tuo progetto.

• Alternativa più semplice. Se ti serve un solo modello da ruotare e ingrandire, il web component model-viewer di Google mostra un GLB con un unico tag HTML.

Tocca a te

Sostituisci l’angolo lettura con una cucina, una cameretta dei giochi o un minuscolo villaggio. Ogni modello dello store è un GLB che funziona esattamente con questo codice.