Wie erweitere ich die Visualisierung meines Konfigurators?

tip

Grundsätzlich gilt:

• 3D Szenen Erweiterungen basieren immer auf three, @react-three/fiber und @react-three/drei.
• Natürlich könnt ihr euch auch andere Bibliotheken des three-Ökosystems dazu installieren
• Die Verknüpfung von Eurem Code und dem K3 passiert eigentlich immer über die unten genannten hooks und keys
• Ihr könnt entweder einzelne Komponenten erweitern/überschreiben oder die ganze Szene überschreiben (maximale Flexibilität, aber höherer Aufwand)
• Am Ende ist es aber meist "nur" 3D-Entwicklung mit three & Co mit nur wenig K3 spezifischen Elementen

Punktuell mithilfe des Szenen-Templates und app.k3d.sceneComponents

Im Konfigurator kann man sich unter "Passen Sie die 3D Szene an" selber einen Komponentenbaum als JSON zusammenbauen. Dabei kann man auf Komponenten zugreifen, die von (in dieser Hierarchie)

• @react-three/fiber
• @react-three/drei
• uns: K3D, K3BoundsFocus, K3Model
• react

stammen und ihnen beliebige, gültige Props übergeben.

Der Clue: Man kann auch selber im app.k3d.sceneComponents Extension-Point beliebige Komponenten definieren und diese dann hier benutzen. Dabei überschreiben sie Komponenten mit gleichem Namen aus den obigen Quellen.

Wir empfehlen nach Möglichkeit diese Methode zu verwenden. Man kann damit relativ granular bestimmte Details der 3D Szene anpassen ohne sie komplett neu zu schreiben.

Vollständig mithilfe von app.k3d.root

Alternativ lässt sich die 3D-Szene über den ExtensionPoint app.k3d.root erweitern. Dort kann mithilfe von Three(-Fiber) eine komplett individuelle 3D Szene gebaut werden.

Dies ist insbesondere wichtig, wenn ein parametrisiertes 3D Modell gebaut werden soll. Auf die ausgewählten Werte sollte mithilfe von keys und insbesondere den hooks

• useSelectedNumberByVariableKey
• useSelectedValueByVariableKey
• useSelectedValueAttributeByKey

zugegriffen werden.

Es empfiehlt sich insbesondere einen Blick auf

• CanvasWithScreenshotting (sollte anstatt des normalen fiber canvas genutzt werden)
• useMaterialReplacedGLTF (statt useGltf, wenn auf dieses Modell Material-Ersetzen Aktionen ausgeführt werden sollen)
• K3D rendered alle Modelle die über den Editor eingepflegt werden

zu werfen.

Beispiel

Ein Beispiel für ein parametrisiertes Modell habt ihr schon bei den keys gesehen.

Außerdem kann man beispielsweise mithilfe von keys und app.k3d.sceneComponents die Umgebung dynamisch austauschen.

import { Environment } from '@react-three/drei';
import React from 'react';
import { K3Extensions, useSelectedValueByVariableKey } from '@k3/core';

const extensions: K3Extensions = {
    app: {
        k3d: {
            sceneComponents: {
                Environment: {
                    root: () => () => {
                        const environment = useSelectedValueByVariableKey('umgebung');

                        const getDreiPreset = () => {
                            switch (environment.key) {
                                case 'stadt':
                                    return 'city';
                                case 'abend':
                                    return 'sunset';
                                case 'wald':
                                    return 'forest';
                                default:
                                    return 'studio';
                            }
                        };

                        return <Environment preset={getDreiPreset()} />;
                    },
                },
            },
        },
    },
};

Noch mehr Beispiele findet ihr im Beispielprojekt.