+

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

1. 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.

2. Wählen Sie die heruntergeladene ZIP-Datei (benannt needle-blender-plugin-*.zip) aus, um sie zu installieren.

3. 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.

Beispiele für Blender

• Blender Beispiele herunterladen

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.

Wenn Ihr Webprojekt bereits existiert und Sie einfach weiter an der Website arbeiten möchten klicken Sie auf die blaue Schaltfläche Run Project, um den lokalen Server zu starten:

Übersicht des Projekt-Panels

1. Der Pfad zu Ihrem Webprojekt. Sie können die kleine Ordner-Schaltfläche rechts verwenden, um einen anderen Pfad auszuwählen.
2. 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.
3. Directory öffnet das Verzeichnis Ihres Webprojekts (den Project Path).
4. Diese Schaltfläche exportiert die aktuelle Szene erneut als glb in Ihr lokales Webprojekt. Dies geschieht standardmäßig auch beim Speichern Ihrer Blend-Datei.
5. Code Editor versucht, den vscode Workspace in Ihrem Webprojekt zu öffnen.
6. 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.
7. 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).
8. 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 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

1. Verwenden Sie Shift+A, um einen neuen AnimatorState zu erstellen.
2. 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).
3. 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).
4. 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.

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:

Zum Beispiel durch Hinzufügen einer OrbitControls-Komponente zum Kameraobjekterhalten Sie grundlegende Kamerasteuerungen für Mobil- und Desktop-GerätePassen Sie die Einstellungen für jede Komponente in den entsprechenden Panels an

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.

Um benutzerdefinierte Komponenten zu erstellen, öffnen Sie den Workspace über das Needle Project-Panel und fügen Sie eine .ts Skriptdatei in src/scripts innerhalb Ihres Webprojekts hinzu. Bitte beachten Sie die Scripting-Dokumentation, um zu erfahren, wie Sie benutzerdefinierte Komponenten für Needle Engine schreiben.

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.

Verwenden Sie das Needle Object-Panel, um Lightmapping für ein Mesh-Objekt oder Licht zu aktivieren:

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

Die Needle Engine Build Pipeline komprimiert Texturen automatisch mithilfe von ECT1S und UASTC (abhängig von ihrer Verwendung in Materialien), wenn ein Production Build erstellt wird (erfordert die Installation von toktx). Sie können jedoch den Komprimierungstyp pro Textur im Material-Panel überschreiben oder ändern.

Sie können die Komprimierung pro Textur ändern. Um die Standard-Komprimierungseinstellungen zu überschreiben, gehen Sie zum Material-Tab und öffnen Sie die Needle Material Settings. Dort finden Sie einen Schalter, um die Textureinstellungen pro in Ihrem Material verwendeter Textur zu überschreiben. Siehe die Texturkomprimierungstabelle für eine kurze Übersicht über die Unterschiede zwischen den einzelnen Komprimierungsalgorithmen.

Aktualisierung

Die Glühbirne im Needle Project-Panel informiert Sie, wenn eine neue Version des Add-ons verfügbar ist. Klicken Sie einfach auf das Symbol, um die neue Version herunterzuladen.

Ein Problem melden

Wenn Sie auf Probleme stoßen, helfen wir Ihnen gerne weiter! Treten Sie bitte unserem Forum bei, um schnellen Support zu erhalten.

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

Sie können auch automatisch einen Bugreport direkt aus Blender erstellen und hochladen. Hochgeladene Bugreports werden ausschließlich zum Debugging verwendet. Sie sind auf unserem Backend verschlüsselt und werden nach 30 Tagen gelöscht.

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.

Nächste Schritte

• Konzept: Webprojekte
• Konzept: Assets exportieren
• Konzept: Deployment (Ihre Website teilen)
• Komponenten: Erfahren Sie mehr über Everywhere Actions
• Scripting für Anfänger: Typescript Grundlagen
• Scripting für Anfänger: Eigene Komponenten schreiben

Seite automatisch von KI übersetzt