Keyboard Controlled Human Movement in 3DEXCITE

In 3DEXCITE Creative Experience application, we can make a human character move along a predefined path when a key on the keyboard is pressed. This involves setting up motion behavior, scripting an event, and configuring a scenario in Storytelling. This guide will walk you through keyboard-controlled human movement in 3DEXCITE, allowing precise control over your actor’s movement.

Let’s go through the process step by step!

Step 1: Import the Human Model

The first step is to bring a human character into the scene.

1. Open your scene in Creative Experience.
2. Click Import and select a human model from the available assets.
3. Once imported, position the human where you want them to start.

Step 2: Add Motion Behavior

Now, we need to add movement capabilities to the human model.

1. Select the human object in the scene.
2. Go to the Properties tab.
3. Click Add Library and choose Human Motion Behavior.
4. Assign the behavior to the human model.

This will allow the human to move along a path in response to our scripted event.

Step 3: Create a Path for the Human

Next, we define the path that the human will follow.

1. Go to the Essentials tab.
2. Click Path and start drawing your path in the scene.
3. Adjust the path shape as needed.
4. Save the path and make sure it is properly connected to the scene.

This path will serve as the movement guide when the script is triggered.

JavaScript Techniques for Keyboard Input in 3DEXCITE

Step 4: Create a Scripted Actor

Now, we set up a scripted actor to handle keyboard input and trigger the human’s movement.

1. Select Create Scripted Actor in the Logic Actors .
2. Copy and paste the following JavaScript code into the script editor:

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 to execute when the script starts.
};

beScript.onStop = function () {
// Code to execute when the experience stops.
};

beScript.execute = function (context) {
// Executed on each frame.
// 'context.deltaTime' provides the time elapsed since the last frame.
};

beScript.onAllKeyboardRelease = function (iEvent) {
// Uncomment the following line to debug key releases.
// console.log(iEvent.key);

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

 

Step 5: Understanding the JavaScript Code

This script is responsible for detecting a key press event and triggering an action in Creative Experience. Let’s break it down:

1️⃣ Creating a Custom Event

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

• This defines a custom event class called TriggerEventClass.
• It extends the EP.Event base class, allowing it to be recognized as an event in Creative Experience.

2️⃣ Setting Up the Event Prototype

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

• Here, we create an object prototype based on the EP.Event prototype.
• We specify a custom event type called "TriggerEventType".

3️⃣ Registering the Custom Event