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 rechts auf
    Loading...
  • Wenn Sie die Szene anpassen wollen, 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.

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
          }
        }