Come controllare il movimento umano in 3DEXCITE utilizzando JavaScript

13 febbraio 2025 6 minuti di lettura
Condividere

Movimento umano controllato dalla tastiera in 3DEXCITE

Nell'applicazione 3DEXCITE Creative Experience , è possibile far muovere un personaggio umano lungo un percorso predefinito premendo un tasto della tastiera. Per fare ciò, si inizia impostando il comportamento di movimento, si procede poi alla creazione di uno script per un evento e infine si configura uno scenario in Storytelling. In questa guida, illustreremo il processo per abilitare il movimento umano controllato da tastiera in 3DEXCITE, consentendo un controllo preciso sui movimenti del personaggio.

Vediamo insieme il procedimento passo dopo passo!

Passaggio 1:importare il modello umano

Per prima cosa dobbiamo introdurre un personaggio umano nella scena.

  1. Apri la tua scena in Creative Experience.
  2. quindi, fai clic su Importa e seleziona un modello umano tra le risorse disponibili.
  3. Una volta importato il modello, dovresti posizionare la persona nel punto in cui vuoi che inizi.

Passaggio 2: aggiungere il comportamento del movimento

Ora che il modello umano è pronto, possiamo concentrarci sull'aggiunta del comportamento del movimento.

  1. Per prima cosa, seleziona l' oggetto umano nella scena.
  2. quindi, vai alla Proprietà .
  3. Dopodiché, fai clic su Aggiungi libreria e scegli Comportamento del movimento umano.
  4. Assegnare il comportamento al modello umano.

Di conseguenza, l'essere umano sarà in grado di muoversi lungo un percorso in risposta all'evento da noi programmato.

Figura 1: Comportamento motorio umano – Creative Experience

Fase 3: Creare un percorso per l'umano

Prima di passare alla sceneggiatura del movimento, definiamo innanzitutto il percorso che l'essere umano seguirà.

  1. Per prima cosa, vai alla Essenziali .
  2. quindi fai clic su Percorso e inizia a disegnare il percorso nella scena.
  3. Se necessario, regolare la forma del percorso per garantire un movimento fluido.
  4. Infine, salva il percorso e assicurati che sia correttamente collegato alla scena.

Questo percorso servirà da guida al movimento quando lo script verrà attivato.

Figura 2: Creare un percorso per l'umano

Tecniche JavaScript per l'input da tastiera in 3DEXCITE

Fase 4: creare un attore con script

A questo punto, dobbiamo impostare un attore scriptato per gestire l'input da tastiera e attivare il movimento dell'umano.

Figura 3: Creazione di un attore con script JavaScript
  1. Per iniziare, seleziona Crea attore con script in logici .
  2. Copia e incolla il seguente codice JavaScript nell'editor di script:

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

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

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

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

beScript.onStart = function () {
// Codice da eseguire all'avvio dello script.
};

beScript.onStop = function () {
// Codice da eseguire quando l'esperienza si interrompe.
};

beScript.execute = funzione (contesto) {
// Eseguito ad ogni fotogramma.
// 'contesto.deltaTime' fornisce il tempo trascorso dall'ultimo fotogramma.
};

beScript.onAllKeyboardRelease = function (iEvent) {
// Decommenta la riga seguente per eseguire il debug del rilascio dei tasti.
// console.log(iEvent.key);

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

 

Passaggio 5: comprendere il codice JavaScript

Analizziamo nel dettaglio cosa fa questo script e come funziona in Creative Experience.

1️⃣ Creare un evento personalizzato

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

Definisce una classe di evento personalizzata denominata TriggerEventClass. Estende la EP.Event , rendendola riconoscibile come evento in Creative Experience.

2️⃣ Impostazione del prototipo dell'evento

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

Qui creiamo un prototipo di oggetto basato su EP.Event e impostiamo un tipo di evento personalizzato, TriggerEventType.

3️⃣ Registrazione dell'evento personalizzato

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

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

Per garantire il corretto funzionamento, questo processo verifica innanzitutto se STU.TriggerEvent esiste. In caso contrario, gli assegna la nostra classe TriggerEventClass . Si assicura inoltre che TriggerEventType sia registrato in Event Services in modo che possa essere attivato in seguito.

4️⃣ Funzioni del ciclo di vita degli eventi

beScript.onStart = function () {
// Codice da eseguire all'avvio dello script.
};

beScript.onStop = function () {
// Codice da eseguire quando l'esperienza si interrompe.
};

beScript.execute = funzione (contesto) {
// Eseguito ad ogni fotogramma.
// 'contesto.deltaTime' fornisce il tempo trascorso dall'ultimo fotogramma.
};

Queste funzioni definiscono il ciclo di vita dello script:

  • onStart: viene eseguito all'avvio dello script.
  • onStop: viene eseguito quando l'esperienza si interrompe.
  • esegui: esegue ogni frame (utile per azioni continue).
5️⃣ Gestione dell'input da tastiera

beScript.onAllKeyboardRelease = function (iEvent) {
// Decommenta la riga seguente per eseguire il debug del rilascio dei tasti.
// console.log(iEvent.key);

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

Questa funzione viene attivata ogni volta che viene rilasciato un tasto. Verifica se il tasto rilasciato corrisponde al nostro KeyCode. In caso affermativo, crea una nuova istanza dell'evento personalizzato (STU.TriggerEvent) e la invia all'attore.

Passaggio 6: configurare il sensore

Successivamente, per rilevare l'evento di pressione del tasto, dobbiamo configurare un sensore.

  1. Per prima cosa, vai alla scheda Sensori e crea un nuovo sensore.
  2. quindi, imposta il Tipo su EVENTO.
  3. Dopodiché, imposta l' ID su TriggerEventType.
  4. Impostare l' alias su Eseguito.
  5. Fare clic sull'icona Riproduci per attivare il sensore.
Figura 4: Crea sensore
Definisci una proprietà KeyCode

In altre parole, per specificare quale tasto attiva il movimento:

  1. Nella scheda Proprietà, fare clic su Aggiungi nuova proprietà.
  2. Imposta Nome su KeyCode.
  3. Imposta Tipo su Intero.
  4. Imposta il valore su 73 (che corrisponde al tasto "I" nella Guida API JavaScript).
Figura 5: Crea proprietà KeyCode

Fase 7: creare uno scenario narrativo

Dopo aver impostato il sensore, definiamo come l'uomo reagisce all'evento.

  1. Fare clic su Crea scenario nella Narrazione .
  2. Aggiungi un nuovo blocco "Ogni volta che viene eseguito l'attore Script"
  3. Imposta l'azione su Attivazione umana.
  4. Quindi, aggiungi un altro blocco per Human Follow Path.
  5. Collegateli tra loro in modo che, quando si verifica l'evento, l'essere umano si attivi e segua il percorso.
Figura 6: Creare uno scenario narrativo

Fase 8: esegui l'esperienza

Fatto! Ora, mettiamolo alla prova:

  • Fare clic su Riproduci per eseguire la simulazione.
  • Premi I sulla tastiera.
  • Dopodiché, l'essere umano dovrebbe iniziare a seguire il percorso.

Conclusione

In questo tutorial abbiamo esaminato il processo di:

  • Importazione di un modello umano nella scena.
  • Aggiunta del comportamento di movimento per abilitare il movimento.
  • Creare un percorso che l'uomo possa seguire.
  • Scrivere uno script JavaScript per rilevare l'input da tastiera.
  • Configurazione di un sensore per attivare un evento.
  • Infine, utilizzare la narrazione per far muovere l'essere umano quando viene premuto il tasto "I".

Inoltre, questo metodo può essere ampliato per creare interazioni più complesse, come l'attivazione di animazioni, il controllo di più personaggi o l'integrazione di eventi aggiuntivi.

Infine, nel prossimo articolo del blog, esploreremo come automatizzare posture e gesti utilizzando JavaScript.

Posture umane in 3DEXCITE

Hanen Bdioui
Iscriviti
Notifica di
ospite

1 Commento
Il più vecchio
Più recenti I più votati
trackback

[…] nel nostro blog precedente, abbiamo esplorato come far seguire a un essere umano un percorso predefinito utilizzando JavaScript. Se ve lo siete perso, […]

1
0
Mi piacerebbe sapere cosa ne pensi, per favore commenta.x