Kamel Ghabte
FR EN AR
25 Three.js / WebGL

UI diegetique VR

L'interface diegetique existe dans le monde fictif : un ecran holographique dans un vaisseau, une montre au poignet, un panneau de controle physique. Contrairement au HUD (non-diegetique), elle preserve l'immersion totale car l'utilisateur interagit avec des objets qui "existent" dans l'univers. Ce paradigme definit le futur du design d'interface spatiale.

Cliquer/glisser pour tourner
// Diegetic UI in VR — Physical UI objects in 3D space
// Three paradigms demonstrated:

// 1. FLOATING PANEL — Holographic display
class FloatingPanel {
  constructor(scene) {
    // Glass panel with emissive content
    const panelGeo = new THREE.PlaneGeometry(1.2, 0.8);
    const panelMat = new THREE.MeshPhysicalMaterial({
      color: 0x111111,
      transparent: true,
      opacity: 0.85,
      roughness: 0.1,
      metalness: 0.9,
      emissive: 0xc8f135,
      emissiveIntensity: 0.05
    });
    this.mesh = new THREE.Mesh(panelGeo, panelMat);
    // Slight tilt toward user for readability
    this.mesh.rotation.x = -0.1;
  }
}

// 2. WRIST DISPLAY — Always accessible, private
class WristDisplay {
  constructor(scene) {
    // Small screen attached to forearm geometry
    const armGeo = new THREE.CylinderGeometry(0.04, 0.035, 0.2, 8);
    const screenGeo = new THREE.PlaneGeometry(0.08, 0.06);
    // Positioned relative to hand tracking data
    // Visibility toggled by wrist rotation gesture
  }
}

// 3. PHYSICAL BUTTONS — Tactile, satisfying
class PhysicalButton {
  constructor(scene, label) {
    // Cylindrical button with spring animation
    const baseGeo = new THREE.CylinderGeometry(0.03, 0.035, 0.01, 16);
    const capGeo = new THREE.CylinderGeometry(0.025, 0.025, 0.015, 16);
    // Haptic feedback on press (controller vibration)
    // Visual depression + glow on activation
  }
}

Defi

Concevez une quatrieme forme d'UI diegetique : un "hologramme de poche" — un objet que l'utilisateur sort de son inventaire, pose dans l'espace, et qui projette une interface manipulable. Implementez l'animation d'ouverture/fermeture et le comportement de "snap" aux surfaces proches.

Designez les interfaces du futur

Formations sur l'UI spatiale, le design d'interaction 3D et les patterns VR/AR.

Explorer les formations