Keyboard Controlled Human Movement in 3DEXCITE

In the 3DEXCITE Creative Experience application, you can make a human character move along a predefined path when a key on the keyboard is pressed. To accomplish this, we start by setting up motion behavior, then proceed to scripting an event, and finally configure a scenario in Storytelling. In this guide, we will walk you through the process of enabling keyboard-controlled human movement in 3DEXCITE, allowing precise control over your actor’s movements.

Let’s go through the process step by step!

Step 1:Import the Human Model

First of all, we need to bring a human character into the scene.

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

Step 2: Add Motion Behavior

Now that the human model is in place, we can shift our focus to adding motion behavior.

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

As a result, the human will be able to move along a path in response to our scripted event.

Step 3: Create a Path for the Human

Before we move on to scripting the movement, let’s first define the path the human will follow.

1. First, Go to the Essentials tab.
2. then, Click Path and start drawing your path in the scene.
3. If necessary, adjust the path shape to ensure smooth movement.
4. Lastly, 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

At this point, we need to set up a scripted actor to handle keyboard input and trigger the human’s movement.

1. Start by Selecting the 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

Let’s break down what this script does and how it works in Creative Experience.

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, making it recognizable 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 EP.Event and set a custom event type, TriggerEventType.

3️⃣ Registering the Custom Event