[SOLVED] Event by clicking on an object

[doesnot]

Hello, I need to perform some actions by clicking on an object.
I tried to do it using the same mechanics as for the button, but nothing works.
How can I trigger a click event on an object?

var BtnLight = pc.createScript('btnLight');

// initialize code called once per entity
BtnLight.prototype.initialize = function() {
    let btnLight = this.entity.findByName('btnLight');
    
    let byBtnLight = this.entity.find('name', 'byBtnLight');
    
    let byBtnFlag = true;
    
    btnLight.element.on('click', function (e) {
        console.log('check');
        byBtnLight.forEach((itemLight)=>{
            itemLight.light.enabled = byBtnFlag;
        });

        byBtnFlag = !byBtnFlag;
    }, this); 
};

[Albertos]

Hello @doesnot! With object you mean a 3D entity in your scene? If that is the case I suggest to look at the tutorial page below.

https://developer.playcanvas.com/en/tutorials/entity-picking

[doesnot]

@Albertos

With object you mean a 3D entity in your scene? If that is the case I suggest to look at the tutorial page below.

Yes.
Oh, I saw that article, but didn’t pay enough attention to it - I’ll look it up right now.

[doesnot]

No, that’s too harsh. I can’t understand what’s going on or what I should do about it.
But thank you so much for responding to my problem anyway:)

[Albertos]

With that method you ‘shoot’ a line (raycast) from the camera to the click position of the user to detect if the user clicked on an object. There is no function for a 3D entity that works as easy as a 2D element (or button) unfortunately.

If you share a link of your project, maybe I can see why your current method doesn’t work.

[doesnot]

I was able to do it.
I understand the principle, but I find it very difficult to navigate objects, layers, etc. I know JS well, but PlayCanvas doesn’t.
When I copied the code from the article, it couldn’t find my “Camera” object, although I seem to have connected it.
I’m not sure I can share the project - it’s an employer project we’re working on.
I found a code snippet in his scripts where all the necessary object manipulation had already been done, so I just implemented the logic I needed there and everything was fine!
Again, thank you very much for your help:)

[yaustar]

@doesnot

When I copied the code from the article, it couldn’t find my “Camera” object, although I seem to have connected it.

It would be good if you can share a new project with the code a similar setup so we work through the understanding in case you or someone else runs into this issue again

In the article, it is assumed that the script is attached to an entity with the camera.

[doesnot]

Sorry, I have a lot of orders now, and PlayCanvas I am not so good at (as well as 3D modeling) to quickly make such a project.
In a nutshell: there was a button on the model (made by an object - a cylinder); and it was necessary to turn on the light sources when you click on this button.
Yeah, I figured out later that the script needs to be attached to the object itself. I originally attached it to the whole scene.
Did I understand correctly that you need to attach it to the object, because that’s how the clicked area is defined? What volume the object occupies, that will be the clickable area?

[yaustar]

Without a specific project to look at, it’s dependent on the what code you were using.

In the tutorial linked earlier, there were two different ways to do picking. Which one did you try to use?

[Albertos]

@doesnot

Did I understand correctly that you need to attach it to the object, because that’s how the clicked area is defined?

No, that’s probably because the (tutorial) script is written that way. You can write the script so that the script does not have to be on the button entity itself.

@doesnot

What volume the object occupies, that will be the clickable area?

Only for 2D elements. You can not use a 3D object with this, until you use one of the methods from the tutorial I sent before.

[doesnot]

I tried both, but my employer had it implemented through this one:

var Hotspot = pc.createScript('hotspot');

Hotspot.attributes.add("cameraEntity", {type: "entity", title: "Camera Entity"});
Hotspot.attributes.add("radius", {type: "number", title: "Radius"});
Hotspot.attributes.add("popUpWindows", {type: "entity",array: true});
Hotspot.attributes.add("fadeDropOff", {
    type: "number", 
    default: 0.4, 
    title: "Fade Drop Off", 
    description: "When to start fading out hotspot relative to the camera direction. 1 for when hotspot is directly inline with the camera. 0 for never."
});

Hotspot.prototype.doRayCast = function (screenPosition) {
    // Only do the raycast if the sprite is showing
    if (this.sprite.enabled) { 
        // Initialise the ray and work out the direction of the ray from the a screen position
        this.cameraEntity.camera.screenToWorld(screenPosition.x, screenPosition.y, this.cameraEntity.camera.farClip, this.ray.direction); 
        this.ray.origin.copy(this.cameraEntity.getPosition());
        this.ray.direction.sub(this.ray.origin).normalize();

        // If the hotspot is clicked on, then send a event to start the 'pulse' effect
        if (this.hitArea.intersectsRay(this.ray)) {
            this.enablePopUpWindow();
            // Start light's code
            this.ByBtnLight();
            // End light's code
            this.entity.fire("pulse:start");
        }
    }
};

[yaustar]

That looks like it is based off the tutorial project: Information hotspots | Learn PlayCanvas

The script you’ve shown doesn’t seem to be full script so I’m going to use the tutorial’s as the reference for the advice below.

That script needs to be attached to every object that is going to be clicked on as seen here:

Each script instance needs are reference to the camera:

And finally, the hit area is defined by the radius attribute here:

And the sphere hit area is created in the initialise function of the hotspot script:

[yaustar]

Why are you tagging us @Saad_Maxamtech ?