Zum Hauptinhalt springen

Kann ich die 3D Szene gestalten?

Die 3D-Szene kann in verschiedener Hinsicht gestaltet werden:

Hauptmodell nutzen​

Wenn Sie ihr Produkt in einer Umgebung darstellen wollen, z.B. in einem Raum oder vor einem Haus, dann benötigen Sie diese Umgebung als 3D-Modell. Achten Sie bitte auch hier darauf, dass dieses Modell nicht zu groß wird.

Sie laden das Modell dann wie üblich in Ihren Konfigurator, vor dem Speichern setzen Sie den Haken bei Hauptmodell. Das bewirkt, dass dieses Modell immer angezeigt wird. Sie brauchen es nicht über Regeln einblenden.

Szene anpassen​

Sie passen die 3D-Szene folgendermaßen an:

  • Öffnen Sie den Editor Ihres Konfigurators
  • Klicken Sie im Hauptmenü auf
    Loading...
  • Wählen Sie den Tab 3D Szene (nur bei 3D-Konfiguratoren verfügbar)
  • Wählen Sie eine der vorgefertigten 3D-Vorlagen aus den Kacheln oder passen Sie diese an

3D-Vorlagen verwenden​

Für 3D-Konfiguratoren stehen mehrere vorgefertigte Szenen-Vorlagen zur Verfügung, die speziell für verschiedene Produkte und Anwendungsfälle optimiert wurden. Diese Vorlagen werden als Kacheln angezeigt und können direkt ausgewählt oder individuell angepasst werden.

Die Vorlagen umfassen verschiedene Umgebungen und Beleuchtungsszenarien – von neutralen, professionellen Präsentationsflächen über wohnliche Atmosphären bis hin zu speziellen Szenen für industrielle Produkte oder atmosphärische Darstellungen. Jede Vorlage ist so optimiert, dass sie eine gute Performance und ansprechende Darstellung bietet.

Vorlage auswählen und anpassen​

  1. Öffnen Sie den Editor Ihres Konfigurators
  2. Klicken Sie im Hauptmenü auf
    Loading...
  3. Wechseln Sie zum Tab 3D Szene
  4. Wählen Sie eine Vorlage aus den angezeigten Kacheln
  5. Klicken Sie auf Anpassen, um die Vorlage in einem großen Editor-Modal zu öffnen
  6. Nehmen Sie Ihre gewünschten Änderungen vor und speichern Sie diese
Tipp

Sie können jederzeit zwischen den Vorlagen wechseln oder eine Vorlage als Ausgangspunkt für eigene Anpassungen nutzen. Alle Vorlagen sind so optimiert, dass sie eine gute Performance und ansprechende Darstellung bieten. Über den Anpassen-Button öffnet sich ein großer Editor, in dem Sie die Szenen-Konfiguration detailliert bearbeiten können.

Manuelle Einstellungen​

Wenn Sie die Szene individuell anpassen wollen, klicken Sie bei der gewählten Vorlage auf Anpassen. Es öffnet sich ein großer Editor-Modal, in dem Sie die Szenen-Konfiguration detailliert bearbeiten können.

Alternativ können Sie auch über das frühere Menü auf die Szenen-Einstellungen zugreifen:

  • Klicken Sie rechts auf
    Loading...
  • Wählen Sie Manuelle Einstellungen erstellen und passen Sie die erzeugte Szenen-Konfiguration an

Kamera​

Sie können die Parameter der 3D-Kameras folgendermaßen einstellen:

  • canvasProps:
    • camera:
      • near: Mindestabstand von der Kamera, damit angezeigt wird.
      • far: Maximalabstand von der Kamera, damit angezeigt wird.
      • fov: Field of View: Tele- oder Makro-Objektiv?
      • position: Anfangsposition der Kamera
  • children
    • component=Bounds
      • props
        • margin: Stellt einen Zoom auf das fokussierte Objekt einblenden
        • damping: Geschwindigkeit der Kamera-Animation

Diese Parameter wirken sich auf alle Kameras aus.

Mausbewegung​

Unter children folgendes Objekt suchen oder einfügen:

  • children
    • component=OrbitControls
      • props
        • minPolarAngle: Minimale Neigung
        • maxPolarAngle: Maximale Neigung

Umgebung​

  • children
    • component=Environment
      • props
        • files: URL zu einer HDR, die zur Beleuchtung dient
    • component=Sky Stellt einen Sonnentag dar
      • props
        • distance: Entfernung der Lichtquelle
        • sunPosition: Richtung, aus der das Sonnenlicht kommt
    • component=ContactShadows Stellt einen Sonnentag dar
      • props
        • resolution: Auflösung der Schatten
        • position: Nullpunkt der Schattenebene
        • scale: Größe der Schatten
        • blur: Unschärfe
        • opacity: Durchsichtigkeit der Schatten
        • far: Maximale Entfernung
    • component=Plane Spiegelnde Bodenfläche
      • props
        • args: x und y Ausdehnung der Fläche
        • position: POsition der Fläche
      • children
      • component=MeshReflectorMaterial
        • props
          • blur: Stärke der Unschärfe bei Bodenreflexionen, definiert durch Breite und Höhe. Ein Wert von 0 bedeutet keine Unschärfe.
          • mixBlur: Wie stark die Unschärfe mit der Oberflächenrauhigkeit vermischt wird. Standardwert ist 1.
          • mixStrength: Stärke der Reflexionen.
          • mixContrast: Kontrast der Reflexionen.
          • resolution: Auflösung des Off-Buffer. Ein niedrigerer Wert erhöht die Geschwindigkeit, während ein höherer Wert die Qualität verbessert.
          • mirror: Spiegelung der Umgebung. 0 bedeutet, dass Texturfarben verwendet werden, 1 spiegelt Umgebungsfarben.
          • depthScale: Skaliert den Tiefenfaktor. 0 bedeutet keine Tiefe, der Standardwert ist 0.
          • minDepthThreshold: Untere Grenze für die Interpolation der Tiefentextur (Standardwert = 0).
          • maxDepthThreshold: Obere Grenze für die Interpolation der Tiefentextur (Standardwert = 0).
          • depthToBlurRatioBias: Fügt einen Bias-Faktor zur Tiefentextur hinzu, bevor die Unschärfe berechnet wird. Akzeptiert Werte zwischen 0 und 1, Standard ist 0.25. Ein Wert über 0 stellt sicher, dass die Unschärfe der Textur nicht zu scharf wird.
          • distortion: Verformung.

Schatten​

Um realistische Schatten in Ihrem K3-Konfigurator zu aktivieren, folgen Sie dieser Anleitung:

1. Schatten in der 3D-Szene aktivieren​

  • Öffnen Sie den Editor Ihres Konfigurators
  • Klicken Sie im Hauptmenü auf
    Loading...
  • Wechseln Sie zum Tab 3D Szene
  • Wählen Sie eine Vorlage und klicken Sie auf Anpassen
  • Fügen Sie in den canvasProps die Schatten-Aktivierung hinzu:
"canvasProps": {
  "shadows": true,
  "camera": {
    ...
  }
}

2. Schatten für Modelle konfigurieren​

Für jedes Modell, das Schatten werfen oder empfangen soll:

  • Öffnen Sie die Modell-Einstellungen
  • Aktivieren Sie "Wirft Schatten" - das Modell wirft Schatten auf andere Objekte
  • Aktivieren Sie "Wird schattiert" - das Modell empfängt Schatten von anderen Objekten

3. Lichtquellen mit Schattenwurf einrichten​

  • Gehen Sie zu "Modelle" und wählen Sie eine Lichtquelle aus:
    • Spotlicht - gerichtetes Licht mit scharfen Schatten
    • Punktlicht - Licht, das in alle Richtungen strahlt
    • Richtungslicht - Licht aus einer bestimmten Richtung
  • Aktivieren Sie bei der gewählten Lichtquelle den Schattenwurf

4. Lichtquelle über Regeln einbinden​

  • Erstellen Sie eine neue Regel im Konfigurator
  • Binden Sie die Lichtquelle gezielt in die Szene ein
  • Die Lichtquelle funktioniert nur mit aktiviertem Schattenwurf, wenn sie über eine Regel eingebunden ist

Schatten-Parameter optimieren​

Zusätzlich können Sie die Schatten über diese Komponenten in der 3D-Szene verfeinern:

  • ContactShadows: Für weiche Kontaktschatten am Boden
  • Environment: Für natürliche Umgebungsbeleuchtung
  • Sky: Für Sonnenlicht mit natürlichen Schatten

3D-Effekte​

An dieser Stelle lassen sich noch weitere Effekte einfügen:

    {
      "component": "EffectComposer",
      "children": [
        ...
      ]
    }

Hier einige Beispiele:

Unschärfe:

        {
          "component": "DepthOfField",
          "props": {
            "focusDistance": 0,
            "focalLength": 3,
            "bokehScale": 2
          }
        },

Vignette:

        {
          "component": "Vignette",
          "props": {
            "darkness": 0.3
          }
        },

Allgemeine Helligheit und Kontrast:

        {
          "component": "BrightnessContrast",
          "props": {
            "brightness": -0.03,
            "contrast": 0.01
          }
        },

Ambient Occlusion, Eckenabdunklung:

        {
          "component": "N8AO",
          "props": {
            "samples": 30,
            "aoRadius": 2,
            "intensity": 5
          }
        }