6b0f8d9afb
Drops the parcel.png sprite (which baked the parachute and the box into a single image) for a real 3D model: assets/parachute.glb is the CC-BY 3.0 « Parachute » by Poly by Google, decompressed from poly.pizza's static.poly.pizza CDN. The parcel template now stacks four meshes inside one Group so they move as a unit: - the loaded parachute (centered + scaled to ~1.6 world units max) - a 0.46×0.36×0.46 brown box with metal-low MeshStandardMaterial, positioned at y = -0.96 — right below the parachute's harness point — so the model's strings appear to terminate on it - two thin black straps wrapping the box (0.04-thick boxes, one horizontal one vertical) for visual reinforcement that the cargo is tied down spawnParcel clones the template (deep), per-instance clones every material so opacity can be modulated independently per parcel, and adds a slight pendulum sway + slow Y spin. Falling/scale-up/fade logic adapted from the sprite version. Cleanup disposes the cloned materials when a parcel exits. HTML credit comment extended to attribute both the airplane and the new parachute under CC-BY 3.0. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
95 lines
3.5 KiB
HTML
95 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
Crédits :
|
|
- Modèle 3D « Airplane » par Poly by Google, CC-BY 3.0 — https://poly.pizza/m/a3XrQkLNna9
|
|
- Modèle 3D « Parachute » par Poly by Google, CC-BY 3.0 — https://poly.pizza/m/3Z7vJ96JIEB
|
|
- Licence : https://creativecommons.org/licenses/by/3.0/
|
|
-->
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>MVA Global Fret — Bienvenue</title>
|
|
<meta name="description" content="MVA Global Fret — Le pont aérien entre Paris et Antananarivo.">
|
|
<link rel="icon" type="image/png" href="PNG MVA GLOBAL FRET.png">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@600;700;800&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
|
|
<link rel="stylesheet" href="css/parallax.css">
|
|
|
|
<!-- Three.js (ESM via importmap) + addons (GLTFLoader) -->
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"three": "https://cdn.jsdelivr.net/npm/three@0.158.0/build/three.module.js",
|
|
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.158.0/examples/jsm/"
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="parallax-body">
|
|
|
|
<header class="parallax-header">
|
|
<div class="parallax-logo" aria-label="MVA Global Fret">
|
|
<img src="PNG MVA GLOBAL FRET.png" alt="MVA Global Fret">
|
|
<span>MVA Global Fret</span>
|
|
</div>
|
|
<div class="lang-switcher" role="group" aria-label="Choisir la langue">
|
|
<button data-lang="fr" class="active">FR</button>
|
|
<button data-lang="en">EN</button>
|
|
<button data-lang="mg">MG</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="stage">
|
|
|
|
<!-- Photo aérienne d'Antananarivo en fond -->
|
|
<img class="layer layer-bg" src="assets/antananarivo-bg.jpg" alt="" aria-hidden="true">
|
|
|
|
<!-- Voile très léger pour la lisibilité du bouton -->
|
|
<div class="layer layer-tint"></div>
|
|
|
|
<!-- Canvas Three.js : avion piloté par la souris -->
|
|
<canvas id="three-canvas" class="layer layer-three"></canvas>
|
|
|
|
<!-- Bouton CTA centré -->
|
|
<a href="accueil.html" class="cta-btn">
|
|
<span class="cta-btn-shine"></span>
|
|
<span data-i18n="intro.ctaBtn">Accéder au site</span>
|
|
<i class="fa-solid fa-arrow-right"></i>
|
|
</a>
|
|
|
|
</main>
|
|
|
|
<script src="js/translations.js"></script>
|
|
<script>
|
|
/* i18n minimal ------------------------------------------------------- */
|
|
(function () {
|
|
const lang = localStorage.getItem('mva-lang') || 'fr';
|
|
applyLang(lang);
|
|
document.querySelectorAll('.lang-switcher button').forEach(btn => {
|
|
btn.addEventListener('click', () => applyLang(btn.dataset.lang));
|
|
});
|
|
function applyLang(l) {
|
|
document.documentElement.lang = l;
|
|
localStorage.setItem('mva-lang', l);
|
|
document.querySelectorAll('.lang-switcher button').forEach(b =>
|
|
b.classList.toggle('active', b.dataset.lang === l)
|
|
);
|
|
const t = window.translations?.[l];
|
|
if (!t) return;
|
|
document.querySelectorAll('[data-i18n]').forEach(el => {
|
|
const keys = el.dataset.i18n.split('.');
|
|
let v = t;
|
|
for (const k of keys) v = v?.[k];
|
|
if (v != null) el.textContent = v;
|
|
});
|
|
}
|
|
})();
|
|
</script>
|
|
|
|
<script type="module" src="js/intro-scene.js"></script>
|
|
</body>
|
|
</html>
|