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 gauche (-X) :
       l'avion entre par la droite et sort par la gauche. */
    wrapper.rotation.y = -Math.PI / 2;
    planeHolder.add(wrapper);
  },
  undefined,
  (err) => console.error('Failed to load airplane.glb:', err)
);

/* ── Souris ─────────────────────────────────────────────────────────────
   L'avion avance automatiquement à vitesse de croisière (BASE_SPEED).
   Bouger la souris ajoute un boost qui le pousse plus vite vers la fin.
   Une fois sorti à droite (progress = 1), il reste sorti.
*/
const BASE_SPEED   = 1 / 28;   // 28 s pour traverser sans toucher la souris
const MOUSE_BOOST  = 1 / 4500; // pixels de souris → progress (0..1)
const mouse = {
  targetProgress: 0,
  progress: 0,
  px: 0.5, py: 0.5
};

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) * MOUSE_BOOST);
  }
  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 pousse l'avion plus vite vers la fin */
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) / 120);
  }
  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();

let lastT = 0;
function tick() {
  const t = clock.getElapsedTime();
  const dt = Math.min(0.1, t - lastT);  // clamp pour éviter les bonds après onglet en arrière-plan
  lastT = t;

  /* Avance autonome + cible cumulée par la souris, le tout limité à 1 */
  mouse.targetProgress = Math.min(1, mouse.targetProgress + BASE_SPEED * dt);
  /* Lerp doux pour fluidifier */
  mouse.progress += (mouse.targetProgress - mouse.progress) * 0.06;
  const p = mouse.progress;

  /* 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 droite → gauche, en montée :
     - p = 0   → entre par la droite (légèrement bas)
     - p = 0.5 → traverse au centre, en train de monter
     - p = 1   → sorti complètement, en haut-gauche hors champ
  */
  const px =  18 - p * 40;     // +18 → -22 (large marge de sortie)
  const py = -1 + p * 13;      // -1 → +12 (en montée, sort du cadre par le haut)
  const bob = Math.sin(t * 0.9) * 0.12;

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

  /* Pour un avion volant -X (nose à gauche), avec up = +Y :
     - rotation.z (axe latéral du monde) = PITCH. Négatif → nez en l'air.
     - rotation.x (axe longitudinal du monde) = ROLL.
     - rotation.y (axe vertical du monde) = YAW.
  */
  const targetPitch = -0.30 - p * 0.05;           // ~17°-20° nez en l'air (montée)
  const targetRoll  =  0.12 + (p - 0.5) * 0.10;   // léger roulis
  const targetYaw   =  0;
  planeHolder.rotation.z += (targetPitch - planeHolder.rotation.z) * 0.08;
  planeHolder.rotation.x += (targetRoll  - 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();