site-mva-global-fret/js/intro-scene.js

/* =========================================================================
   INTRO SCENE — MVA Global Fret
   Photo aérienne d'Antananarivo en fond, avion 3D piloté par la souris :
   il entre par le haut-gauche quand la souris est à gauche, traverse
   l'écran à mesure qu'elle bouge, et sort par la droite. Pas de scroll.

   3D model credit (CC-BY 3.0) : « Airplane » by Poly by Google
   https://poly.pizza/m/a3XrQkLNna9
   ========================================================================= */

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

/* ── Renderer & camera ─────────────────────────────────────────────────── */
const canvas = document.getElementById('three-canvas');
const renderer = new THREE.WebGLRenderer({
  canvas, alpha: true, antialias: true, powerPreference: 'high-performance'
});
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.05;

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 22);
camera.lookAt(0, 0, 0);

/* ── Lighting (golden-hour fill) ───────────────────────────────────────── */
const sun = new THREE.DirectionalLight(0xfff1d6, 1.5);
sun.position.set(-6, 8, 4);
scene.add(sun);

const skyFill = new THREE.HemisphereLight(0xa8c5ff, 0x3a2a1a, 0.65);
scene.add(skyFill);

const ambient = new THREE.AmbientLight(0xffffff, 0.20);
scene.add(ambient);

/* ── Plane (GLTF) ──────────────────────────────────────────────────────── */
const planeHolder = new THREE.Group();
scene.add(planeHolder);

const loader = new GLTFLoader();
loader.load(
  'assets/airplane.glb',
  (gltf) => {
    const model = gltf.scene;
    const box = new THREE.Box3().setFromObject(model);
    const size = box.getSize(new THREE.Vector3());
    const center = box.getCenter(new THREE.Vector3());
    model.position.sub(center);

    const wrapper = new THREE.Group();
    wrapper.add(model);
    const targetSize = 8.5;
    wrapper.scale.setScalar(targetSize / Math.max(size.x, size.y, size.z));
    /* Pivote le modèle pour que le nez pointe vers la droite (+X) */
    wrapper.rotation.y = -Math.PI / 2;
    planeHolder.add(wrapper);
  },
  undefined,
  (err) => console.error('Failed to load airplane.glb:', err)
);

/* ── Souris ─────────────────────────────────────────────────────────────
   La souris fait AVANCER l'avion sur sa trajectoire : on accumule la
   distance parcourue par le curseur. Une fois que l'avion est sorti à
   droite (progress = 1), il reste sorti — la souris ne le ramène pas.

   On garde aussi mouseX (0..1) pour la parallaxe légère de la photo.
*/
const FULL_DISTANCE = 3500;   // pixels de souris pour traverser tout l'écran
const mouse = {
  targetProgress: 0,    // accumulé, croissant
  progress: 0,          // suit avec lerp
  px: 0.5, py: 0.5      // dernier point connu (parallaxe fond)
};

let lastX = null, lastY = null;
window.addEventListener('mousemove', (e) => {
  if (lastX !== null) {
    const dx = e.clientX - lastX;
    const dy = e.clientY - lastY;
    mouse.targetProgress = Math.min(1, mouse.targetProgress + Math.hypot(dx, dy) / FULL_DISTANCE);
  }
  lastX = e.clientX; lastY = e.clientY;
  mouse.px = e.clientX / window.innerWidth;
  mouse.py = e.clientY / window.innerHeight;
}, { passive: true });

/* Mobile : la rotation du device fait progresser l'avion */
let lastGamma = null, lastBeta = null;
window.addEventListener('deviceorientation', (e) => {
  if (e.gamma == null || e.beta == null) return;
  if (lastGamma !== null) {
    const dg = e.gamma - lastGamma;
    const db = e.beta - lastBeta;
    mouse.targetProgress = Math.min(1, mouse.targetProgress + Math.hypot(dg, db) / 90);
  }
  lastGamma = e.gamma; lastBeta = e.beta;
  mouse.px = Math.max(0, Math.min(1, (e.gamma + 30) / 60));
  mouse.py = Math.max(0, Math.min(1, (e.beta - 20) / 60));
}, { passive: true });

const root = document.documentElement;

/* ── Render loop ───────────────────────────────────────────────────────── */
const clock = new THREE.Clock();

function tick() {
  const t = clock.getElapsedTime();

  /* Lerp doux vers la cible (progrès cumulé) */
  mouse.progress += (mouse.targetProgress - mouse.progress) * 0.06;
  const p = mouse.progress;

  /* Variables CSS pour la parallaxe légère de la photo de fond */
  root.style.setProperty('--mx', ((mouse.px - 0.5) * 2).toFixed(4));
  root.style.setProperty('--my', ((mouse.py - 0.5) * 2).toFixed(4));

  /* Trajectoire :
     - p = 0   → arrive haut-gauche (hors champ)
     - p = 0.5 → traverse au centre haut
     - p = 1   → sortie à droite (hors champ)
  */
  const px = -16 + p * 32;
  const py = 7 - p * 5;
  const bob = Math.sin(t * 0.9) * 0.12;

  planeHolder.position.set(px, py + bob, 0);

  /* Banking subtil — penche en pivotant */
  const targetRoll  = -0.18 - (p - 0.5) * 0.25;
  const targetPitch = -0.18 - p * 0.10;
  const targetYaw   = (p - 0.5) * 0.10;
  planeHolder.rotation.z += (targetRoll  - planeHolder.rotation.z) * 0.08;
  planeHolder.rotation.x += (targetPitch - planeHolder.rotation.x) * 0.08;
  planeHolder.rotation.y += (targetYaw   - planeHolder.rotation.y) * 0.08;

  renderer.render(scene, camera);
  requestAnimationFrame(tick);
}

/* ── Resize ────────────────────────────────────────────────────────────── */
function resize() {
  const w = window.innerWidth;
  const h = window.innerHeight;
  renderer.setSize(w, h, false);
  camera.aspect = w / h;
  camera.updateProjectionMatrix();
}
window.addEventListener('resize', resize);
resize();
tick();