📱 AR Wählscheibe – Konzept¶

Status: Planung / Konzeptphase
Datum: März 2026
Zielgruppe: iPhone User (iOS 12+)

🎯 Vision¶

Ein vintage Telefon mit Wählscheibe erscheint als 3D-Objekt in deiner Wohnzimmerwelt – platziert auf dem Tisch vor dir. Du steckst den Finger in ein Loch, drehst die echte Scheibe mit deiner Hand, hebst am Ende den Hörer ab – und dein iPhone ruft wirklich an.

🧩 Kern-Interaktion (User Flow)¶

iPhone aufnehmen
      │
      ▼
"AR starten" tippen
      │
      ▼
Kamera-Bild + 3D-Telefon erscheint auf Oberfläche
      │
      ▼
Finger in Loch der Wählscheibe stecken (Touch/Pinch)
      │
      ▼
Scheibe dreht vorwärts bis Anschlag
      │
      ▼
Loslassen → Scheibe dreht selbst zurück (Fliehkraftregler)
      │
      ▼  (für jede Ziffer wiederholen)
      │
      ▼
Hörer-3D-Objekt anheben (Tap auf Hörer)
      │
      ▼
tel:// → native iPhone Telefon-App öffnet

🛠️ Technologie-Entscheidung¶

Option A – Apple AR Quick Look + USDZ ⭐ EMPFOHLEN¶

Wie es funktioniert: 1. USDZ-Datei mit eingebautem TapGesture auf Wählscheibe 2. Scheiben-Rotation als RealityKit-Animation im Modell 3. Hörer-Tap triggert einen Custom Action Button → öffnet tel: URL 4. Kein Backend nötig – reine Static Web App

Option B – WebXR + Three.js / model-viewer¶

⚠️ Für iPhone-Zielgruppe nicht geeignet – iOS Safari hat kein WebXR AR.

Option C – <model> HTML-Element (visionOS 26 / Zukunft)¶

Apple hat in Safari / visionOS 26 das neue <model>-HTML-Element eingeführt.
→ Noch zu früh für breiten Einsatz, aber interessant für Zukunft.

✅ Gewählte Architektur: Option A (USDZ + Quick Look)¶

Web App (manniphone.pages.dev/ar)
    │
    ├── index.html
    │     └── <a href="rotary-phone.usdz" rel="ar">
    │              └── AR Button / Banner
    │
    ├── rotary-phone.usdz          ← 3D Modell mit Animationen
    │     ├── Wählscheibe-Mesh     ← animierbar via Behaviors
    │     ├── Hörer-Mesh           ← Tap-Gesture
    │     └── Custom Action        → tel: URL callback
    │
    └── ar-handler.js
          └── tel: URL aufbauen aus gewählten Ziffern

🎨 3D-Modell Anforderungen¶

Modell-Quelle¶

• Basis: Vintage Wooden Telephone (z.B. TurboSquid Model 2449584)
• Lizenz prüfen! → Muss .usdz-Export erlauben (oder Blender-Konvertierung)
• Alternative: Eigenes Modell in Blender erstellen (Open Source)
• Alternative: Reality Composer (Apple, kostenlos) für einfaches Modell

Technische Specs für USDZ¶

Format:         .usdz (USDA + Texturen, gezippt)
Polygone:       max. 50.000 (Mobile-optimiert)
Texturen:       PBR (Albedo, Roughness, Normal) – max. 2K
Animationen:    
  - dial_forward_{1-0}   (Scheibe vorwärts, pro Ziffer)
  - dial_return          (Scheibe zurück)
  - receiver_lift        (Hörer abheben)
Behaviors:
  - TapGesture auf .hole_1 bis .hole_0 → dial_forward_N
  - TapGesture auf .receiver → Custom Action → tel:
Größe:          ~20cm × 15cm in RealWorld-Units

📐 Interaktions-Konzept im Detail¶

Finger-in-Loch Simulation¶

Da echter Finger-Tracking in Quick Look nicht verfügbar ist, wird vereinfacht:

Tap auf Loch-Bereich
      │
      ▼
RealityKit Behavior: dial_forward_N Animation (0.5s)
      │
      ▼
Animation endet → dial_return Animation (0.9s, automatisch)
      │
      ▼
Custom Action Event → JS empfängt Ziffer
      │
      ▼
Ziffer wird in tel:-String aufgebaut

Hörer abheben → Anruf auslösen¶

Tap auf Hörer-3D-Objekt
      │
      ▼
receiver_lift Animation (0.3s)
      │
      ▼
Quick Look Custom Action:
  checkoutTitle = "Anrufen"
  callToAction = "📞 Jetzt anrufen"
      │
      ▼
User tippt Button → window.location = "tel:+49XXXXXXXXX"

Limit: Quick Look kann keine Ziffer-Daten direkt zurückgeben.
Lösung: Nummer wird VOR dem AR-Start auf der Web-Seite gewählt (2-Stufen-Flow).

🔄 Realistischer 2-Stufen User-Flow¶

STUFE 1: Nummer wählen (bestehende Web-App)
─────────────────────────────────────────────
User öffnet manniphone.pages.dev
  → Wählt Nummer wie bisher (2D Rotary-Interface)
  → Display zeigt: "0176 12345678"
  → Button: "☎️ In AR anrufen"

STUFE 2: AR-Visualisierung + Anruf
─────────────────────────────────────────────
Safari öffnet USDZ mit ?number=017612345678
  → Telefon erscheint in AR auf dem Tisch
  → Display am 3D-Telefon zeigt die Nummer
  → Hörer liegt auf
  → User tippt auf Hörer
  → Quick Look Custom Action Button erscheint
  → "📞 017612345678 anrufen" → tel: URI

📦 Benötigte Ressourcen / Aufwand¶

🚀 Nächste Schritte (wenn Konzept freigegeben)¶

• [ ] STEP 1 – 3D-Modell Lizenz klären / Blender-Modell erstellen
• [ ] STEP 2 – Blender → USDZ Export testen (mit Xcode usdz_converter)
• [ ] STEP 3 – Reality Composer: Tap-Behaviors auf Wählscheibe definieren
• [ ] STEP 4 – Custom Action für Hörer (tel: URI) konfigurieren
• [ ] STEP 5 – Web-Seite: "In AR anrufen" Button mit Nummer-Übergabe
• [ ] STEP 6 – Test auf iPhone 12+ (min. iOS 15 empfohlen)
• [ ] STEP 7 – Deploy auf manniphone.pages.dev/ar

⚠️ Limitierungen & Risiken¶

🔗 Relevante Ressourcen¶

Fazit: Machbar als Pure Web App ohne App-Store, nur mit Safari iOS.
Kernlimitation: Echtes Finger-Tracking nicht möglich → Tap-Vereinfachung.
Empfehlung: 2-Stufen-Flow (Nummer wählen → AR-Visualisierung → Anrufen).