Zum Hauptinhalt springen

Gibt es ein Beispiel?

Aber natürlich!

Unser Beispiel dient ebenfalls als Template.
Das heißt, du kannst zu Beginn eines neuen Erweiterungs-Projektes direkt durchstarten.
Das Template kannst du hier finden: https://github.com/OC-Git/k3-external-extension-template

Im Beispiel dreht sich also alles um einen Maßtisch-Konfigurator

Voraussetzungen​

Schritte​

  1. Nutze das Templat zur Erstellung eines neuen Repositorys, oder klone es dir einfach:
    git clone git@github.com:OC-Git/k3-external-extension-template.git
  2. Navigiere in das Repository: cd k3-external-extension-template
  3. Führe npm run login aus - beachte, dass du dafür die AWS-CLI installiert haben musst und über aws configure einmalig deine Zugangsdaten hinterlegt haben musst
  4. Führe npm install aus
  5. Führe npm start aus

Das Projekt sollte nun erfolgreich kompilieren, idealerweise direkt ein Browserfenster öffnen.
Falls nicht, kannst du im Browser diesen Link aufrufen.

tip

Erkunde gern schon den Code und mach dich damit vertraut.
Die folgenden Kapitel klären dich über die Details auf.

Erläuterung zum Aufbau des Templates​

  • Dieses Template dient als vollständige Konfigurator-Anwendung
  • Theoretisch ist es auch denkbar, den K3 in eine größere schon vorhandene Anwendung einzubauen
  • Dieses Template wurde mit CRA aufgebaut.
  • Der Einstiegspunkt ist die App.tsx

Minimales Beispiel​

import React from 'react';
import {
  K3Extensions,
  K3Main
} from '@k3/core';
import { TableScene } from './three/TableScene';

const extensions: K3Extensions = {
  app: {
    k3d: {
      root: () => () => <TableScene></TableScene>,
    }
  },
};

export const App = () => {
  return (
    <K3Main extensions={extensions} />
  );
};
  • Diese Zeilen stellen das Grundgerüst der Anwendung dar
  • K3-Main ist der Startpunkt für jede K3 Erweiterung. Hier können extensions injiziert werden
  • Das Extension-Objekt folgt der Typisierung von K3Extensions. Dort sind auch die einzelnen Erweiterungspunkte genauer dokumentiert
  • In diesem minimalistischen Beispiel ergänzen wir ein dynamisches 3D-Modell für einen Tisch, der auf Eingaben in der Anwendung reagieren soll
  • Wie genau die TableScene funktioniert, erfährst du in unserem Bereich der Visualisierung

image