Vai al contenuto
animorio
EN
Tutti gli oggetti 3D

La navicella

NuovoGLBThree.js2 ottobre 2026

Una navicella bianca e arancio con la cupola di vetro, tre sedili dentro e due motori coi dischi accesi. Sta sospesa a mezz’aria e vira piano; nel visore si gira verso il puntatore e ti saluta dondolando le ali.

Cosa c’è dentro

Mesh
211.308 vertici, 377.392 triangoli
Animazione
volo, 8 secondi, in loop. Sospesa a mezz’aria: sale e scende piano, vira a destra e a sinistra inclinandosi nella virata, avanza e arretra di poco. Si chiude su sé stessa.
Parti
  • scafo lo scafo, con la gobba, le prese d’aria, le luci e l’abitacolo
  • cupola il vetro
  • sedili i tre sedili
  • motore_destro, motore_sinistro le gondole dei motori
  • disco_destro, disco_sinistro i dischi accesi
  • ala_destra, ala_sinistra le ali
  • deriva_destra, deriva_sinistra le derive
  • righe le righe dei pannelli
Materiali
Bianco (bianco caldo con la vernice lucida sopra), Arancio (arancio vivo, lucido), Scuro (antracite satinato), Grigio (il grigio chiaro delle derive), Argento (metallo, sulle facce dei motori), Vetro (azzurro, trasparente), Interno (blu ardesia dell’abitacolo), Sedili (grigio azzurro), Luci (lenti ambra che si accendono da sole), LuceCiano (la fessura azzurra sul muso), Motori (i dischi accesi, chiari al centro e col bordo vivo), Righe (le giunture dei pannelli)
Peso
1,6 MB

Come si usa

Carica il GLB e fai partire l’animazione. Ogni parte è un oggetto col suo nome, e i dischi dei motori hanno un materiale tutto loro, «Motori», da accendere quanto vuoi.

three.js
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { MeshoptDecoder } from 'three/addons/libs/meshopt_decoder.module.js';
import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';

// il modello: compresso con meshopt, serve il suo decoder
const loader = new GLTFLoader().setMeshoptDecoder(MeshoptDecoder);
const gltf = await loader.loadAsync('navicella.glb');
scene.add(gltf.scene);

// l'animazione "volo": 8 secondi, in loop
const mixer = new THREE.AnimationMixer(gltf.scene);
mixer.clipAction(gltf.animations[0]).play();

// il materiale "Motori": si accende da solo
const acceso = new Set();
gltf.scene.traverse((m) => {
  if (m.material?.name === 'Motori') acceso.add(m.material);
});

// la luce: uno studio bianco, e il bianco resta bianco
renderer.toneMapping = THREE.NoToneMapping;
scene.environment = new THREE.PMREMGenerator(renderer)
  .fromScene(new RoomEnvironment(), 0.04).texture;

const clock = new THREE.Clock();
renderer.setAnimationLoop(() => {
  mixer.update(clock.getDelta());
  const t = clock.elapsedTime;
  acceso.forEach((m) => { m.emissiveIntensity = 1.6 + 0.15 * Math.sin(t * 3); });   // respira
  renderer.render(scene, camera);
});

Com’è fatto

  • Dal disegno alla camera

    Prima di modellare c’era da capire da dove fosse guardata la navicella. I dischi dei due motori sono cerchi veri, e nel disegno diventano due ellissi: da quelle ellissi escono la posizione, l’angolo e l’obiettivo della camera, con meno di un pixel di errore. Da lì ogni punto del disegno si riporta sul modello, e ogni misura si controlla sovrapponendo i due.

  • Pezzo per pezzo

    Lo scafo è una carena a sezioni che si squadrano verso la coda, con la cupola, la gobba e le prese d’aria scavate dentro; motori, ali e derive sono pezzi a sé. Le misure sono state tarate confrontando migliaia di volte la sagoma del modello con quella del disegno: combaciano al 94%, e il retro che il disegno non mostra è stato chiuso nello stesso stile del muso.

  • Colori netti, senza texture

    Le fasce arancio, il muso scuro, l’abitacolo: ogni zona di colore è una forma nello spazio, e la mesh è stata tagliata esattamente lungo il suo bordo prima di essere alleggerita, tenendo fermi i vertici del bordo. Così ogni triangolo ha un materiale solo e il confine resta netto in qualsiasi programma.

  • Le righe dei pannelli

    Le giunture dei pannelli sono state ricalcate dall’illustrazione, assottigliate a un pixel e riportate sulla superficie lungo i raggi della camera; quelle del lato che non si vede sono lo specchio del lato che si vede. Nel modello sono nastri sottilissimi, appena sopra lo scafo.

  • Liscia davvero

    Ogni pezzo è una superficie matematica: la mesh nasce fitta, poi viene ridotta dove è piatta e tenuta fitta dove curva, e ogni vertice viene riportato esattamente sulla superficie, con la normale presa dalla superficie stessa. Duecentomila vertici, nessuna faccetta, anche da vicino.

LibreriaLe animazioni, con il codice