A white and orange spaceship with a glass canopy, three seats inside and two engines with glowing discs. It hovers in mid-air and gently turns; in the viewer it turns towards your pointer and waves its wings at you.
What’s inside
- Mesh
- 211,308 vertices, 377,392 triangles
- Animation
volo, 8 seconds, looping. Hovering in mid-air: it gently rises and sinks, turns left and right banking into the turn, edges forward and back. It loops seamlessly.- Parts
scafothe hull, with the hump, the air intakes, the lights and the cockpitcupolathe glass canopysedilithe three seatsmotore_destro, motore_sinistrothe engine nacellesdisco_destro, disco_sinistrothe glowing discsala_destra, ala_sinistrathe wingsderiva_destra, deriva_sinistrathe tail finsrighethe panel lines
- Materials
- Bianco (warm white under a glossy clear coat), Arancio (bright orange, glossy), Scuro (satin anthracite), Grigio (the light grey of the fins), Argento (metal, on the engine faces), Vetro (blue, transparent), Interno (slate blue of the cockpit), Sedili (blue grey), Luci (self-lit amber lenses), LuceCiano (the cyan slit on the nose), Motori (the glowing discs, bright at the centre with a vivid rim), Righe (the panel seams)
- Weight
- 1.6 MB
How to use it
Load the GLB and start the animation. Every part is a named object, and the engine discs have a material of their own, “Motori”, that you can light up as much as you like.
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';
// the model: meshopt-compressed, it needs its decoder
const loader = new GLTFLoader().setMeshoptDecoder(MeshoptDecoder);
const gltf = await loader.loadAsync('navicella.glb');
scene.add(gltf.scene);
// the "volo" animation: 8 seconds, looping
const mixer = new THREE.AnimationMixer(gltf.scene);
mixer.clipAction(gltf.animations[0]).play();
// the "Motori" material: it lights itself up
const acceso = new Set();
gltf.scene.traverse((m) => {
if (m.material?.name === 'Motori') acceso.add(m.material);
});
// the light: a white studio, and white stays white
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); }); // it breathes
renderer.render(scene, camera);
});How it’s made
From drawing to camera
Before modelling, the first job was working out where the spaceship was seen from. The discs of the two engines are true circles, and in the drawing they become two ellipses: those ellipses give the camera’s position, angle and lens, with less than a pixel of error. From there every point of the drawing maps onto the model, and every measurement is checked by overlaying the two.
Piece by piece
The hull is a lofted body whose sections get squarer towards the tail, with the canopy, the hump and the air intakes carved into it; engines, wings and fins are separate pieces. The measurements were tuned by comparing the model’s silhouette with the drawing’s thousands of times: they match at 94%, and the back, which the drawing doesn’t show, was closed in the same style as the nose.
Crisp colours, no textures
The orange bands, the dark nose, the cockpit: every colour zone is a shape in space, and the mesh was cut exactly along its edge before being lightened, keeping the edge vertices still. So every triangle has a single material and the border stays crisp in any program.
The panel lines
The panel seams were traced from the illustration, thinned to a single pixel and projected onto the surface along the camera’s rays; the ones on the hidden side mirror the visible side. In the model they are very thin ribbons, just above the hull.
Truly smooth
Every piece is a mathematical surface: the mesh starts dense, is reduced where it is flat and kept dense where it curves, and every vertex is moved exactly back onto the surface, with the normal taken from the surface itself. Two hundred thousand vertices and no facets, even up close.