Button click doesn’t work as expected


I set an open button and a close button to control the display and hiding of the glb. But each click requires a slide of the screen to activate the display and hiding of the glb. How can I cancel this? The effect I want is that after clicking hide, glb will be hidden immediately, instead of sliding the screen to hide it.
There should be no problem with this code, right?


Did I miss anything?
project link:PlayCanvas 3D HTML5 Game Engine

Hi @leooooooo! Your scripts seem correct to me. I suspect something else conflicts with your scripts. You may want to try disabling other scripts to find out what’s causing the problem.


It seems that the problem is caused by the multiframe.But I need multiframe in this project,Is there any way to prevent them from influencing each other?
This script with multiframe is a project link from yaustar

Multiframe on the orbit camera will only render if the camera moves.

You will have to modify the Orbit Camera so that it renders when there is a change in the application (such as clicking on buttons that show different models etc).

Do you have to use multiframe? It requires a really good understanding on how it works in the Orbit Camera to use effectively.

If you have to use multiframe, there’s some code in the Orbit Camera’s script update that updates the multiframe code. You will have to make sure that is called if there is some visual change in the scene.

Yes, I need it.Which codes need to be modified in Orbit Camera’s script?Can I understand that I need to call this multiframe all the time in some display and hidden methods?

The way I would do it is to have the orbit camera listen to an event and on the callback, update the multiframe logic. Whenever the app makes a visual change such as disabling/enabling entities, it fires that event.

The update function in the Orbit Camera has the logic for updating the multiframe when the camera is moving.

Are there any code fragments you can refer to?I don’t quite understand :sweat_smile:

OrbitCamera.prototype.update = function(dt) {
    // Check if we have are still moving for autorender
    var distanceDiff = Math.abs(this._targetDistance - this._distance);
    var yawDiff = Math.abs(this._targetYaw - this._yaw);
    var pitchDiff = Math.abs(this._targetPitch - this._pitch);
    var pivotDiff = this.pivotPoint.distance(this._lastFramePivotPoint);

    var moved = distanceDiff > 0.001 || yawDiff > 0.01 || pitchDiff > 0.01 || pivotDiff > 0.001;
    if (!this.autoRender) {
        this.app.renderNextFrame = moved || this.app.renderNextFrame;
    }
    
    // Add inertia, if any
    var t = this.inertiaFactor === 0 ? 1 : Math.min(dt / this.inertiaFactor, 1);
    this._distance = pc.math.lerp(this._distance, this._targetDistance, t);
    this._yaw = pc.math.lerp(this._yaw, this._targetYaw, t);
    this._pitch = pc.math.lerp(this._pitch, this._targetPitch, t);
    this._lastFramePivotPoint.copy(this.pivotPoint);

    this._updatePosition();

    if (moved && this._multiframe) {
        this._multiframe.moved();
    }
};

thx,I’ll try :grinning:

OrbitCamera.prototype.update = function (dt) {
    // Check if we have are still moving for autorender
    var distanceDiff = Math.abs(this._targetDistance - this._distance);
    var yawDiff = Math.abs(this._targetYaw - this._yaw);
    var pitchDiff = Math.abs(this._targetPitch - this._pitch);
    var pivotDiff = this.pivotPoint.distance(this._lastFramePivotPoint);

    var moved = distanceDiff > 0.001 || yawDiff > 0.01 || pitchDiff > 0.01 || pivotDiff > 0.001;
    if (!this.autoRender) {
        this.app.renderNextFrame = moved || this.app.renderNextFrame;
    }

    // Add inertia, if any
    var t = this.inertiaFactor === 0 ? 1 : Math.min(dt / this.inertiaFactor, 1);
    this._distance = pc.math.lerp(this._distance, this._targetDistance, t);
    this._yaw = pc.math.lerp(this._yaw, this._targetYaw, t);
    this._pitch = pc.math.lerp(this._pitch, this._targetPitch, t);
    this._lastFramePivotPoint.copy(this.pivotPoint);

    this._updatePosition();

    var that = this;
    this.app.on('entityShow', function () {
        that._multiframe.moved();
    });
    this.app.on('entityHide', function () {
        that._multiframe.moved();
    });

    if (moved && this._multiframe) {
        this._multiframe.moved();
    }
};

I changed it to this way, but occasionally, the model disappeared when I touched the screen

project link:PlayCanvas 3D HTML5 Game Engine

Sorry, I don’t have the bandwidth to debug all the issues with your project

Sorry, I was delayed because of other things. I just saw your reply now.I can add you to my project for debugging

When I say, I don’t have bandwidth, it means unfortunately I don’t have the time.

I’m sorry I misunderstood you. Anyway, thank you for your help.You are so kind!