Wie man menschliche Bewegungen in 3DEXCITE mit JavaScript steuert

13. Februar 2025 6 Minuten Lesezeit
Aktie

Tastaturgesteuerte menschliche Bewegung in 3DEXCITE

In der 3DEXCITE Creative Experience können Sie eine Spielfigur entlang eines vordefinierten Pfades bewegen, indem Sie eine Taste auf der Tastatur drücken. Dazu richten wir zunächst das Bewegungsverhalten ein, erstellen anschließend ein Skript für ein Ereignis und konfigurieren schließlich ein Szenario im Storytelling-Bereich. In dieser Anleitung zeigen wir Ihnen Schritt für Schritt, wie Sie die tastaturgesteuerte Bewegung von Spielfiguren in 3DEXCITEund so die Bewegungen Ihrer Akteure präzise steuern können.

Lasst uns den Prozess Schritt für Schritt durchgehen!

Schritt 1:Importieren Sie das menschliche Modell

Zunächst einmal müssen wir eine menschliche Figur in die Szene einbringen.

  1. Öffne deine Szene in Creative Experience.
  2. Klicken Sie anschließend auf „Importieren“ und wählen Sie ein menschliches Modell aus den verfügbaren Assets aus.
  3. Sobald das Modell importiert ist, sollten Sie die Person an der gewünschten Startposition positionieren.

Schritt 2: Bewegungsverhalten hinzufügen

Nachdem das menschliche Modell nun implementiert ist, können wir uns auf die Integration von Bewegungsverhalten konzentrieren.

  1. Wählen Sie zunächst das menschliche Objekt in der Szene aus.
  2. Wechseln Sie anschließend zur „Eigenschaften“ .
  3. Klicken Sie anschließend auf „Bibliothek hinzufügen“ und wählen Sie „Menschliches Bewegungsverhalten“.
  4. Weisen Sie das Verhalten dem menschlichen Modell zu.

Als Ergebnis wird der Mensch in der Lage sein, sich entsprechend unserem vorgegebenen Ereignis auf einem vorgegebenen Pfad zu bewegen.

Abbildung 1: Menschliches Bewegungsverhalten – Creative Experience

Schritt 3: Einen Pfad für den Menschen erstellen

Bevor wir uns mit der Ausarbeitung des Bewegungsablaufs befassen, definieren wir zunächst den Pfad, den der Mensch beschreiten wird.

  1. Gehen Sie zunächst auf die „Grundlagen“ .
  2. Klicken Sie anschließend auf „Pfad“ und beginnen Sie, Ihren Pfad in der Szene zu zeichnen.
  3. Passen Sie gegebenenfalls die Pfadform an, um eine reibungslose Bewegung zu gewährleisten.
  4. Zum Schluss speichern Sie den Pfad und stellen sicher, dass er korrekt mit der Szene verbunden ist.

Dieser Pfad dient als Bewegungsführung, wenn das Skript ausgelöst wird.

Abbildung 2: Einen Pfad für den Menschen erstellen

JavaScript-Techniken für die Tastatureingabe in 3DEXCITE

Schritt 4: Einen geskripteten Akteur erstellen

einrichten, programmierten Akteur der die Tastatureingaben verarbeitet und die Bewegungen des Menschen auslöst.

Abbildung 3: Erstellen eines JavaScript-Skript-Actors
  1. Beginnen Sie mit der Auswahl von „ Skriptgesteuerten Akteur erstellen“ unter „ Logische Akteure“.
  2. Kopieren Sie den folgenden JavaScript-Code und fügen Sie ihn in den Skripteditor ein:

var TriggerEventClass = function () {
EP.Event.apply(this, arguments);
};

TriggerEventClass.prototype = Object.create(EP.Event.prototype);
TriggerEventClass.prototype.constructor = TriggerEventClass;
TriggerEventClass.prototype.type = 'TriggerEventType';

if (!STU.TriggerEvent) {
STU.TriggerEvent = TriggerEventClass;
}

if (!EP.EventServices.getEventByType(TriggerEventClass.prototype.type)) {
EP.EventServices.registerEvent(TriggerEventClass);
}

beScript.onStart = function () {
// Code, der beim Start des Skripts ausgeführt werden soll.
};

beScript.onStop = function () {
// Code, der ausgeführt wird, wenn die Anwendung beendet wird.
};

beScript.execute = function (context) {
// Wird in jedem Frame ausgeführt.
// 'context.deltaTime' gibt die seit dem letzten Frame verstrichene Zeit an.
};

beScript.onAllKeyboardRelease = function (iEvent) {
// Die folgende Zeile auskommentieren, um Tastenfreigaben zu debuggen.
// console.log(iEvent.key);

if (iEvent.key === this.KeyCode) {
let newEvent = new STU.TriggerEvent();
this.actor.dispatchEvent(newEvent);
}
};

 

Schritt 5: Den JavaScript-Code verstehen

Lassen Sie uns genauer betrachten, was dieses Skript bewirkt und wie es in Creative Experiencefunktioniert.

1️⃣ Erstellen eines benutzerdefinierten Ereignisses

var TriggerEventClass = function () {
EP.Event.apply(this, arguments);
};

Hiermit wird eine benutzerdefinierte Ereignisklasse namens TriggerEventClass. Sie erweitert die EP.Event Basisklasse Creative Experience.

2️⃣ Einrichtung des Event-Prototyps

TriggerEventClass.prototype = Object.create(EP.Event.prototype);
TriggerEventClass.prototype.constructor = TriggerEventClass;
TriggerEventClass.prototype.type = 'TriggerEventType';

Hier erstellen wir einen Objektprototyp basierend auf EP.Event und legen einen benutzerdefinierten Ereignistyp, TriggerEventType.

3️⃣ Registrierung des benutzerdefinierten Ereignisses

if (!STU.TriggerEvent) {
STU.TriggerEvent = TriggerEventClass;
}

if (!EP.EventServices.getEventByType(TriggerEventClass.prototype.type)) {
EP.EventServices.registerEvent(TriggerEventClass);
}

Um die korrekte Funktion zu gewährleisten, wird zunächst geprüft, ob STU.TriggerEvent existiert. Falls nicht, wird ihm unsere TriggerEventClass . Außerdem wird sichergestellt, dass TriggerEventType in den Ereignisdiensten , damit es später ausgelöst werden kann.

4️⃣ Ereignislebenszyklusfunktionen

beScript.onStart = function () {
// Code, der beim Start des Skripts ausgeführt werden soll.
};

beScript.onStop = function () {
// Code, der ausgeführt wird, wenn die Anwendung beendet wird.
};

beScript.execute = function (context) {
// Wird in jedem Frame ausgeführt.
// 'context.deltaTime' gibt die seit dem letzten Frame verstrichene Zeit an.
};

Diese Funktionen definieren den Lebenszyklus des Skripts:

  • onStart: Wird beim Start des Skripts ausgeführt.
  • onStop: Wird ausgeführt, wenn das Erlebnis beendet wird.
  • execute: Wird in jedem Frame ausgeführt (nützlich für kontinuierliche Aktionen).
5️⃣ Umgang mit Tastatureingaben

beScript.onAllKeyboardRelease = function (iEvent) {
// Die folgende Zeile auskommentieren, um Tastenfreigaben zu debuggen.
// console.log(iEvent.key);

if (iEvent.key === this.KeyCode) {
let newEvent = new STU.TriggerEvent();
this.actor.dispatchEvent(newEvent);
}
};

Diese Funktion wird immer dann ausgelöst, wenn eine Taste losgelassen wird. Sie prüft, ob die losgelassene Taste mit unserem KeyCode. Wenn ja, erstellt sie eine neue Instanz des benutzerdefinierten Ereignisses (STU.TriggerEvent) und sendet diese an den Actor.

Schritt 6: Sensor konfigurieren

Um das Tastendruckereignis zu erkennen, müssen wir als Nächstes einen Sensor konfigurieren.

  1. Gehen Sie zunächst auf die Registerkarte „Sensoren“ und erstellen Sie einen neuen Sensor.
  2. Stellen Sie anschließend den Typ auf EVENT.
  3. Anschließend wird die ID auf TriggerEventType.
  4. Setzen Sie den Alias ​​auf „Ausgeführt“.
  5. Klicken Sie auf das Wiedergabesymbol , um den Sensor zu aktivieren.
Abbildung 4: Sensor erstellen
Definieren Sie eine KeyCode-Eigenschaft

Mit anderen Worten, um festzulegen, welche Taste die Bewegung auslöst:

  1. im Reiter „Eigenschaften“Klicken Sie „Neue Eigenschaft hinzufügen“.
  2. Setze den Namen auf KeyCode.
  3. Setze den Datentyp auf Integer.
  4. Setzen Sie den Wert auf 73 entspricht „I“-Schlüssel im JavaScript API Guide
Abbildung 5: Erstellen von Tastencode-Eigenschaften

Schritt 7: Erstellen Sie ein Storytelling-Szenario

Nach der Einrichtung des Sensors definieren wir nun, wie der Mensch auf das Ereignis reagiert.

  1. Klicken Sie auf „Szenario erstellen“ unter dem „Storytelling“ .
  2. Füge einen neuen „Jedes Mal, wenn Script Actor ausgeführt wird“ Block
  3. Stellen Sie die Aktion auf „Menschliche Aktivierung“.
  4. Fügen Sie anschließend einen weiteren Block für „Mensch folgt Pfad“.
  5. Verknüpfe sie so miteinander, dass der Mensch beim Eintritt des Ereignisses aktiv wird und dem vorgegebenen Pfad folgt.
Abbildung 6: Storytelling-Szenario erstellen

Schritt 8: Führen Sie das Erlebnis durch

Alles ist bereit! Jetzt testen wir es:

  • Klicken Sie auf „Play“ , um die Simulation zu starten.
  • Drücken Sie die Taste I auf Ihrer Tastatur.
  • Anschließend sollte der Mensch dem Pfad folgen.

Abschluss

In diesem Tutorial haben wir den folgenden Prozess durchgearbeitet:

  • Ein menschliches Modell in die Szene importieren.
  • Hinzufügen von Bewegungsverhalten, um Bewegung zu ermöglichen.
  • Einen Weg schaffen, dem der Mensch folgen kann.
  • Ich schreibe ein JavaScript-Skript zur Erkennung von Tastatureingaben.
  • Einen Sensor so konfigurieren, dass er ein Ereignis auslöst.
  • Und schließlich: Storytelling nutzen, um den Menschen zum Handeln zu bewegen, wenn die Taste „I“ gedrückt wird.

Darüber hinaus lässt sich diese Methode erweitern, um komplexere Interaktionen zu ermöglichen. Dazu gehören beispielsweise das Auslösen von Animationen, die Steuerung mehrerer Charaktere oder die Integration zusätzlicher Ereignisse.

Im nächsten Blogbeitragwerden wir uns schließlich mit der Automatisierung von Körperhaltungen und Gesten mithilfe von JavaScript beschäftigen.

Menschliche Körperhaltungen in 3DEXCITE

Hanen Bdioui
Abonnieren
Benachrichtigen
Gast

1 Kommentar
Älteste
Neueste, meistgewählte
Inline-Feedback
Alle Kommentare anzeigen
Trackback

In unserem vorherigen Blogbeitrag haben wir untersucht, wie man einen Menschen mithilfe von JavaScript einem vordefinierten Pfad folgen lässt. Falls Sie ihn verpasst haben, schauen Sie doch mal rein

1
0
Ich würde mich über eure Meinung freuen, bitte kommentiert.x