Want make the 3d model disappear & appear on the click of a button

Help & Support
#1

Hey everyone, I know nothing about javascript coding. Can you please help me, I want to make the model disappear and appear on click of a button.

It would be a great help if someone responds with a script.
Thanks in advance. :v:

#2

If you want to make the model invisible you could do:

entity.model.enabled = false;

And to make it visible again:

entity.model.enabled = true;

Or you could try disabling the entire entity:

entity.enabled = false;

And to bring it back:

entity.enabled = true;

You can create the button in HTML and call a function with the button’s onclick

1 Like
#3

Thanks for the prompt response, but as I know nothing of javascript coding.
Can help me by putting in the variables and functions in the following code:

var BtnInputs = pc.createScript(‘btnInputs’);

// initialize code called once per entity
BtnInputs.prototype.initialize = function() {

};

// update code called every frame
BtnInputs.prototype.update = function(dt) {

};

Suppose I want to disable the model named “TOP” on a click of a button and enable again on another click of the same button.

#4 
var BtnInputs = pc.createScript(‘btnInputs’);

// initialize code called once per entity
BtnInputs.prototype.initialize = function() {
    var self = this;
    this.button = document.getElementById("YourButtonName");
    this.model = app.root.findByName("TOP");

    // if found
    if (this.button)
    {
        this.button.addEventListener('click', function()
        {
            if (self.model.enabled == true)
            {
                self.model.enabled = false;
            }
            else
            {
                self.model.enabled = true;
            }

        }, false);
    }
};
1 Like
#5

Thanks but it is still not working, don’t know If I made any mistake in that.
Here is my project: https://playcanvas.com/editor/scene/997038

Can you pls check it.

#7

Can you try this:

var BtnInputs = pc.createScript(‘btnInputs’);

// initialize code called once per entity
BtnInputs.prototype.initialize = function() {
    this.model = app.root.findByName("Top");

    this.entity.on("click", this.toggleVisibility, this);
};

BtnInputs.prototype.toggleVisibility = function(event) {

    if (this.model.enabled == true)
    {
        this.model.enabled = false;
    }
    else
    {
        this.model.enabled = true;
    }

};
1 Like
#8

Tried this one too, But still didn’t work. the button is still not responsive.
Is there any other thing that I am missing on apart from the code itself.
Like adding a script on model “Top” or sequence of scripts etc

#9

Hello!

I think you have to change this:

this.entity.on("click", this.toggleVisibility, this);

to this:

this.entity.button.on("click", this.toggleVisibility, this);
1 Like
#10

thanks for contributing your answer, but that didn’t work.
It came up with an error " Cannot read property ‘on’ of undefined"

#11

Oke, if I look at the PlayCanvas manuals I see they use this:

this.entity.element.on("click", this.toggleVisibility, this);

Although I think that is strange, you could try it.

1 Like
#12

If you add me to the project I can try to find the right way.

1 Like
#13

Screenshot_208
Screenshot_2081530×997 187 KB

Thanks, Man. It worked but when I launch it in debug mode this error comes up.

#14

I am a bit confused because the PlayCanvas button tutorial does not use a button component.
You can take a look yourself: https://developer.playcanvas.com/en/tutorials/ui-elements-buttons/

#15

The error was because the script was also added to another entity without a button component.
So the answer on the question is the solution of @Gamer_Wael with a little change.

var BtnInputs = pc.createScript(‘btnInputs’);

// initialize code called once per entity
BtnInputs.prototype.initialize = function() {
    this.model = app.root.findByName("Top");
    this.entity.button.on("click", this.toggleVisibility, this);
};

BtnInputs.prototype.toggleVisibility = function(event) {
    if (this.model.enabled === true) {
        this.model.enabled = false;
    }
    else {
        this.model.enabled = true;
    }
};
3 Likes