Atelier N°19 — Design d'Interaction AR
Parallaxe & indices de profondeur
La parallaxe est la difference de deplacement apparent entre objets proches et lointains. Deplacez votre souris pour observer comment les couches a differentes profondeurs Z reagissent avec des vitesses differentes, creant une illusion de profondeur.
WebGL non disponible
Votre navigateur ne supporte pas Three.js
Voir le code
// Parallax depth effect
const layers = [];
const depths = [0, -2, -4, -6, -8];
depths.forEach((z, i) => {
const layer = createLayerObjects(z);
layers.push({ group: layer, depth: z });
scene.add(layer);
});
// Mouse-driven parallax
document.addEventListener('mousemove', (e) => {
const mx = (e.clientX / window.innerWidth - 0.5) * 2;
const my = (e.clientY / window.innerHeight - 0.5) * 2;
layers.forEach(layer => {
const factor = (layer.depth / -10) * intensity;
layer.group.position.x = mx * factor;
layer.group.position.y = -my * factor;
});
});Defi
Augmentez l'intensite de parallaxe. A quel point l'effet devient-il inconfortable ? Trouvez le seuil optimal entre immersion et confort visuel — un equilibre crucial en design AR/VR.