Hi everyone!
I am new PC user and I am still building my JS skills, so please be patient. Recently I created a small project (PlayCanvas | HTML5 Game Engine) that tracks your hand movements in real time using the webcam (the original script was adapted from this other project that integrate mediapipe handtracking: PlayCanvas 3D HTML5 Game Engine). In particular, the mediapipe handtracking identifies in real time 21 hand landmarks. Each of them is associated with a rendered entity (called “bone” in the project); all together these entities allow to visualize a virtual hand in the game.
Now I would like to add the possibility of using the virtual hand to interect with other entities (with a rigidbody) by just “touching” them. In particular, I would like to be able to “touch” an entity (e.g. a wall) and disable it. I tried two different approaches but none of them worked, since it looks like I am not able to fire any collision event, it does not matter which script I am using. The approaches I tried are the following:
- I tried to give rigidbodies to each of the virtual hand’s “bones”. In parallel, I created a wall with a collision box and a script that triggers the wall to be disabled when another rigid body enters the wall’s collision box → apparently no collision was detected by the wall when “touched” by the hand.
The script for the wall is:
var CollisionEvent = pc.createScript("collisionEvent"); // establish the variable "CollisionEvent"
// Add sound attributes for each tag
// initialize code called once per entity
CollisionEvent.prototype.initialize = function () {
// Listen for collision events
this.entity.collision.on("collisionstart", this.onCollisionStart, this);
this.entity.collision.on("collisionend", this.onCollisionEnd, this);
};
// Called when a collision starts
CollisionEvent.prototype.onCollisionStart = function (result) {
// Check if the other entity has a rigid body
if (result.other.rigidbody) {
this.entity.enabled = false; // Disable the wall
// Set a timeout to enable the wall again after 2 seconds
setTimeout(() => {
this.entity.enabled = true; // Enable the wall again after 2 seconds
}, 2000); // 2000 milliseconds = 2 seconds
}
};
// Called when a collision ends
CollisionEvent.prototype.onCollisionEnd = function (result) {
// No additional logic is needed here for this specific functionality
};
- I tried to attach a collision box to one of the virtual hand’s “bone” (in particular the one corrisponding to the index’s finger tip). I assigned a rigidbody to the wall. Then I created a script that should disable every entity with a rigidbody that enters the “bone” collision box → again, no collision was detected when the finger “touched” the wall.
var IndexDisable = pc.createScript("indexDisable"); // establish the variable "IndexDisable"
// Add sound attributes for each tag
// initialize code called once per entity
IndexDisable.prototype.initialize = function () {
// Listen for collision events
this.entity.collision.on("collisionstart", this.onCollisionStart, this);
this.entity.collision.on("collisionend", this.onCollisionEnd, this);
};
// Called when a collision starts
IndexDisable.prototype.onCollisionStart = function (result) {
// Check if the other entity has a rigid body
if (result.other.rigidbody) {
other.entity.enabled = false; // Disable the other entity
// Set a timeout to enable the other entity again after 2 seconds
setTimeout(() => {
other.entity.enabled = true; // Enable the other entity again after 2 seconds
}, 2000); // 2000 milliseconds = 2 seconds
}
};
// Called when a collision ends
IndexDisable.prototype.onCollisionEnd = function (result) {
// No additional logic is needed here for this specific functionality
};
Do you have any idea about what I am doing wrong?
Thank you!