Needle Engine für Blender

Last updated 25 days ago

Needle Engine für Blender

Needle Engine für Blender ermöglicht es Ihnen, hochgradig interaktive, flexible und leichtgewichtige Webanwendungen direkt in Blender zu erstellen. Nutzen Sie die leistungsstarken Werkzeuge von Blender, um Ihre 3D-Szenen visuell einzurichten, zu animieren und zu gestalten.

Das Blender Add-on installieren

Stellen Sie sicher, dass Sie und node.js installiert haben.

Needle Engine für Blender herunterladen

Gehen Sie in Blender zu Edit > Preferences > Add-ons und klicken Sie auf den Dropdown-Pfeil, um die Schaltfläche Install from Disk zu finden.
Wählen Sie die heruntergeladene ZIP-Datei (benannt needle-blender-plugin-*.zip) aus, um sie zu installieren.
Suchen Sie in der Suchleiste für Add-ons nach "Needle" und stellen Sie sicher, dass Needle Engine Exporter for Blender aktiviert ist.

Erste Schritte

Vielen Dank, dass Sie Needle Engine für Blender verwenden.

Mit diesem Add-on können Sie hochgradig interaktive und optimierte WebGL- und WebXR-Erlebnisse in Blender erstellen, die mit Needle Engine und three.js laufen.

Sie können Animationen sequenzieren, Ihre Szenen einfach mit Lightmaps versehen, Interaktivität hinzufügen oder eigene Skripte in Typescript oder Javascript erstellen, die im Web laufen.

*Anpassen der Beleuchtungs- und Umgebungs-Einstellungen zwischen Blender und Needle Engine. HDRI-Umgebungsbeleuchtungen werden automatisch direkt aus Blender exportiert. Sobald Sie speichern, wird die Seite automatisch neu geladen.*

:::tip Feedback geben

Beispiele für Blender

Erstellen oder öffnen Sie zunächst eine neue Blend-Datei, die Sie ins Web exportieren möchten. Öffnen Sie das Properties-Fenster und wählen Sie die Scene-Kategorie. Wählen Sie im Needle Engine-Panel einen Project Path aus. Klicken Sie dann auf Generate Project. Es wird automatisch installiert und der Server gestartet – sobald dies abgeschlossen ist, sollte Ihr Browser geöffnet werden und die threejs-Szene wird geladen.

Standardmäßig wird Ihre Szene beim Speichern der Blend-Datei automatisch erneut exportiert. Wenn der lokale Server läuft (z.B. durch Klicken auf Run Project), wird die Website mit Ihrem geänderten Modell automatisch aktualisiert.

Übersicht des Projekt-Panels

Der Pfad zu Ihrem Webprojekt. Sie können die kleine Ordner-Schaltfläche rechts verwenden, um einen anderen Pfad auszuwählen.
Die Schaltfläche Run Project wird angezeigt, wenn der Projektpfad auf ein gültiges Webprojekt verweist. Ein Webprojekt ist gültig, wenn es eine package.json enthält.
Directory öffnet das Verzeichnis Ihres Webprojekts (den Project Path).
Diese Schaltfläche exportiert die aktuelle Szene erneut als glb in Ihr lokales Webprojekt. Dies geschieht standardmäßig auch beim Speichern Ihrer Blend-Datei.
Code Editor versucht, den vscode Workspace in Ihrem Webprojekt zu öffnen.
Wenn Sie mit mehreren Szenen in einer Blend-Datei arbeiten, können Sie konfigurieren, welche Szene Ihre Main scene ist und ins Web exportiert werden soll. Wenn eine Ihrer Komponenten auf eine andere Szene verweist, werden diese ebenfalls als separate glb-Dateien exportiert. Wenn Sie auf die Schaltfläche "Export" klicken, wird Ihre Main scene diejenige sein, die im Browser geladen wird.
Verwenden Sie die Schaltflächen Build: Development oder Build: Production, wenn Sie Ihr Webprojekt auf einen Server hochladen möchten. Dies bündelt Ihr Webprojekt und erzeugt die Dateien, die Sie hochladen können. Beim Klicken auf Build: Production werden auch Optimierungen auf Ihre Texturen angewendet (sie werden für das Web komprimiert).
Dokumentation öffnen

Blender Einstellungen

Farbmanagement

Standardmäßig ist der Blender-Viewport auf Filmic eingestellt – mit dieser Einstellung stimmen Ihre Farben in Blender und in three.js nicht überein. Um dies zu beheben, gehen Sie zur Blender Render-Kategorie und wählen Sie im ColorManagement-Panel View Transform: Standard

Umgebungsbeleuchtung

Sie können die Umgebungsbeleuchtung und den Skybox über die Viewport-Shading-Optionen ändern. Weisen Sie eine Cubemap für die Beleuchtung oder den Hintergrund-Skybox zu. Sie können die Stärke oder den Weichzeichner anpassen, um das Erscheinungsbild nach Ihren Wünschen zu ändern.

Hinweis: Um die Skybox-Cubemap auch im Browser zu sehen, erhöhen Sie die World Opacity auf 1.

Hinweis: Alternativ können Sie die Einstellung Scene World im Viewport Shading-Tab aktivieren, um die in den Blender World-Einstellungen zugewiesene Umgebungstextur zu verwenden.

Alternativ, wenn Sie die Cubemap nicht als Hintergrund sehen möchten, fügen Sie einer beliebigen Blender Camera eine Camera-Komponente hinzu und ändern Sie clearFlags: SolidColor – beachten Sie, dass die Camera-Einstellungen backgroundBlurriness und backgroundIntensity die Viewport-Shading-Einstellungen überschreiben.

Eigene HDRI / EXR Umgebungsbeleuchtung und Skybox hinzufügen

Export

Um ein Objekt vom Export auszuschließen, können Sie die Viewport- und Render-Anzeige deaktivieren (siehe Abbildung unten).

Animation 🏇

Für einfache Anwendungsfälle können Sie die Animation-Komponente zur Wiedergabe eines oder mehrerer Animationclips verwenden. Wählen Sie einfach Ihr Objekt aus, fügen Sie eine Animation-Komponente hinzu und weisen Sie den Clip zu (Sie können zusätzliche Clips zum Exportieren dem Clips-Array hinzufügen). Standardmäßig wird nur der erste zugewiesene Clip wiedergegeben, wenn playAutomatically aktiviert ist. Sie können die anderen Clips mit einer einfachen benutzerdefinierten Typescript-Komponente auslösen).

AnimatorController

Der Animator-Controller kann für komplexere Szenarien erstellt werden. Er funktioniert als Zustandsmaschine (statemachine), mit der Sie mehrere Animationszustände in einem Graph erstellen und Bedingungen und Interpolations-Einstellungen für Übergänge zwischen diesen konfigurieren können.

*Erstellen und exportieren Sie [Animator-Zustandsmaschinen](#animatorcontroller) zur Steuerung komplexer Charakteranimationen*

Einen AnimatorController erstellen

Der AnimatorController-Editor kann über das EditorType-Dropdown in der oberen linken Ecke jedes Panels geöffnet werden:

*Erstellen eines neuen Animator-Controller Assets ☝ oder Auswahl eines aus Ihren zuvor erstellten Assets*

Graph-Übersicht

Verwenden Sie Shift+A, um einen neuen AnimatorState zu erstellen.
Der Parameters-Knoten wird erstellt, sobald Sie einen ersten Knoten hinzufügen. Wählen Sie ihn aus, um Parameter einzurichten, die in Übergängen verwendet werden (über das Node-Panel am rechten Rand).
Dies ist ein AnimatorState. Der orangefarbene Zustand ist der Startzustand (er kann über die Schaltfläche Set default state im Node-/Properties-Panel geändert werden).
Die Properties für einen AnimatorState können verwendet werden, um einen oder mehrere Übergänge zu anderen Zuständen einzurichten. Verwenden Sie das Conditions-Array, um Parameter auszuwählen, die die Bedingung für den Übergang erfüllen müssen.

Einen AnimatorController verwenden

Um einen AnimatorController zu verwenden, fügen Sie dem Root-Objekt Ihrer Animationen eine Animator-Komponente hinzu und wählen Sie das AnimatorController Asset aus, das Sie für dieses Objekt verwenden möchten.

Sie können die Animator-Parameter von Typescript aus einstellen oder z.B. über das Ereignis einer Button-Komponente.

Zeitachse — NLA Tracks exportieren 🎬

Sie können Blender NLA Tracks direkt ins Web exportieren. Fügen Sie einem beliebigen Blender-Objekt eine PlayableDirector-Komponente hinzu (über Add Component). Weisen Sie die Objekte in der Liste animation tracks in der Komponente zu, für die die NLA Tracks exportiert werden sollen.

::: details Codebeispiel für interaktive Zeitachsen-Wiedergabe Fügen Sie dieses Skript zu src/scripts hinzu (siehe Abschnitt benutzerdefinierte Komponenten) und fügen Sie es einem beliebigen Objekt in Blender hinzu, damit die Zeit einer Zeitachse durch Scrollen im Browser gesteuert wird.

import { Behaviour, PlayableDirector, serializable, Mathf } from "@needle-tools/engine";

export class ScrollTimeline extends Behaviour {

    @serializable(PlayableDirector)
    timeline?: PlayableDirector;

    @serializable()
    sensitivity: number = .5;

    @serializable()
    clamp: boolean = false;

    private _targetTime: number = 0;

    awake() {
        this.context.domElement.addEventListener("wheel", this.onWheel);
        if (this.timeline) this.timeline.pause();
    }

    private onWheel = (e: WheelEvent) => {
        if (this.timeline) {
            this._targetTime = this.timeline.time + e.deltaY * 0.01 * this.sensitivity;
            if (this.clamp) this._targetTime = Mathf.clamp(this._targetTime, 0, this.timeline.duration);
        }
    }

    update(): void {
        if (!this.timeline) return;
        const time = Mathf.lerp(this.timeline.time, this._targetTime, this.context.time.deltaTime / .3);
        this.timeline.time = time;
        this.timeline.pause();
        this.timeline.evaluate();
    }
}

:::

Interaktivität 😎

Sie können Objekte in Ihrer Hierarchie über das Needle Components-Panel hinzufügen oder entfernen:

Komponenten können über die X-Schaltfläche unten rechts entfernt werden:

Benutzerdefinierte Komponenten

Benutzerdefinierte Komponenten können auch einfach durch das Schreiben von Typescript-Klassen hinzugefügt werden. Sie werden automatisch kompiliert und erscheinen in Blender, wenn sie gespeichert werden.

::: warning Hinweis Stellen Sie sicher, dass @needle-tools/needle-component-compiler 2.x in Ihrem Webprojekt installiert ist (package.json devDependencies). :::

Lightmapping 💡

Needle enthält ein Lightmapping-Plugin, das es sehr einfach macht, schöne Lichter auf Texturen zu baken und diese ins Web zu bringen. Das Plugin generiert automatisch Lightmap UVs für alle Modelle, die als lightmapped markiert sind, es ist kein manueller Textur-Atlas erforderlich. Es unterstützt auch Lightmapping von mehreren Instanzen mit ihren eigenen Lightmap-Daten. Damit Lightmapping funktioniert, benötigen Sie mindestens ein Licht und ein Objekt mit aktiviertem Lightmapped im Needle Object-Panel.

Für schnellen Zugriff auf Lightmap-Einstellungen und Baking-Optionen können Sie das Scene View-Panel im Needle-Tab verwenden:

Alternativ können Sie auch das Lightmapping-Panel im Render Properties-Tab verwenden:

Texturkomprimierung

Aktualisierung

Ein Problem melden

Bitte überprüfen Sie auch die Logs in Blender. Sie finden spezifische Logs für das Needle Engine Addon über Help/Needle in Blender.

Integrierter Bug Reporter

Bei Bedarf können wir in bestimmten Fällen auch benutzerdefinierte NDAs für Ihre Projekte einrichten. Bitte kontaktieren Sie uns für weitere Informationen.

:::tip Die Nutzung des Bug Reporters erfordert ein Webprojekt Stellen Sie sicher, dass Sie ein Webprojekt eingerichtet haben, bevor Sie einen Bugreport senden – dies hilft uns, mehr über Ihr System und Ihre Einrichtung zu verstehen und das Problem leichter zu reproduzieren. :::

Nächste Schritte

Seite automatisch von KI übersetzt

Previousblender Nextcloud

Last updated 25 days ago