Kamel Ghabte
FR EN AR
22 Three.js / WebGL

Locomotion VR

En realite virtuelle, le deplacement est un probleme fondamental de design. La teleportation offre un confort maximal mais brise l'immersion spatiale. Le mouvement continu preserve la continuite mais provoque le mal du simulateur chez 40-60% des utilisateurs. Cet atelier vous permet d'experimenter les deux paradigmes et de ressentir leurs compromis.

Mode: Teleportation
// Locomotion VR - Teleportation vs Continuous
// Click on ground = instant teleport
// Hold mouse = continuous movement toward pointer

const raycaster = new THREE.Raycaster();
const pointer = new THREE.Vector2();
let mode = 'teleport'; // or 'continuous'
let isHolding = false;
let targetPos = new THREE.Vector3();

function onPointerDown(e) {
  pointer.x = (e.clientX / w) * 2 - 1;
  pointer.y = -(e.clientY / h) * 2 + 1;
  raycaster.setFromCamera(pointer, camera);
  const hits = raycaster.intersectObject(ground);
  if (hits.length > 0) {
    targetPos.copy(hits[0].point);
    if (mode === 'teleport') {
      // Instant jump
      camera.position.set(targetPos.x, 1.6, targetPos.z);
    } else {
      isHolding = true;
    }
  }
}

function animate() {
  if (mode === 'continuous' && isHolding) {
    // Smooth lerp toward target
    camera.position.lerp(
      new THREE.Vector3(targetPos.x, 1.6, targetPos.z),
      0.02
    );
  }
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}

Defi

Implementez un troisieme mode "dash" : un deplacement rapide mais anime sur 300ms vers la destination. Observez comment la vitesse de transition affecte votre sensation de confort. Quel timing offre le meilleur compromis immersion/confort ?

Approfondissez le Design VR

Formations completes sur le design d'interaction en realite virtuelle et augmentee.

Explorer les formations