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