How to change Entity's rotation?

Hey guys,

I’ve been trying to emulate a door swing but I still couldn’t figure it out. How can I set my local entity rotation to not be in the middle? I’ve tried using rotation and translate to emulate the door opening but this happens:


the white x,y bars are just my guide of the world space. PlayCanvas Logo as the door

Any suggestions?

Ultimately, i’d love to select and drag to open the door. So far, opening the door has taking me a long time to achieve :frowning:

Thanks,
Joseph

You could make the logo a child of another entity (drag it on top of it). Then offset the logo and put the rotation script on the parent.

Alternatively you could change the pivot point inside a 3d modeling program, but I think you will then have a collision offset issue unless you use a collision mesh.

I made a project that does the first method.

https://playcanvas.com/crefossus/rotatedoor

Here is the script : https://playcanvas.com/crefossus/rotatedoor/editor/rotateOnClick.js

You can find tutorials on mouse input here:

And rotation here:

2 Likes

Woah! This is great. Thank you so much for the help. :smile:

Hi @Crefossus,

Extending this chat a little bit. Can you give me some advice on how would I swing the door when it’s click and drag?

Here is what I have so far:

 update: function (dt) {
        if(context.mouse.wasReleased(pc.MOUSEBUTTON_LEFT)){
        leftButtonDown = false;
        mMove = false; // Mouse move
        }
        
        if(context.mouse.isPressed(pc.MOUSEBUTTON_LEFT)){
            // Execute only when Hold LeftMouseButton and Drag Events are fired
            if(leftButtonDown === true) {
                if (mMove === true) {
                 
                // Here is my general thought on achieving my goal
                // IF the mouse location moves to the LEFT
                    // Then move towards closing the door
                // ELSE IF the mouse location moves to the RIGHT
                    // Then move towards opening the door
    
                }
            }
        }
    }

Any thoughts?

Thank you

Do you want to open or close the door once the drag amount has exceeded some threshhold? (After reading again, I guess you really want to swing the door when you drag? I’ll leave that up to you.)

I would use the mouse delta variable as described here:

"Our first event handler handles the mouse move event. The event variable is a pc.MouseEvent and in this case we are interested in event.dx and event.dy, which are the number of pixels the mouse has moved since the last mouse event. "

You could store the total change in another variable (a bit like they are in the article, except I don’t see a reason to clamp , divide it, and you don’t need to set it to the angle to start with … although you may want to do exactly that for your version).

Then handle when you want to rotate like if(this.mousedx > 3) { //handle rotate right}

Okay I ended up just doing a simple version of this one too:

Here is the scene; where you can also find the code:

http://playcanvas.com/designer/337152/scene/351308

Not sure, but you may also be interested in making sure the mouse is on some object:

And if the player is inside a spherical trigger (close enough to the door. - you may get away with just a distance check here too)

Well, my door swing isn’t as nice as Crefossus, but I am adding it here for your reference:
http://playcanvas.com/designer/337153/scene/351311

You’ll immediately notice that the pivot points for the two doors are different. Unfortunately I couldn’t modify the pivot point for the PlayCanvas primitive box so I left it as is. The important piece is the mouse handling code, which you can see in the DoorController.js file attached to the “Panel” entity. Btw, I was considering adding physics too, with constraints and inertia (torque, angular momentum) to make it a little more life like.

The code is shown below too:

pc.script.create('DoorController', function (context) {
    // Creates a new DoorController instance
    var DoorController = function (entity) {
        this.entity = entity;
        
        this.isMouseDown = false;
        this.dx = 0;
        this.dy = 0;
        
        context.mouse.on(pc.EVENT_MOUSEDOWN, this.onMouseDown, this);
        context.mouse.on(pc.EVENT_MOUSEUP, this.onMouseUp, this);
        context.mouse.on(pc.EVENT_MOUSEMOVE, this.onMouseMove, this);
    };

    DoorController.prototype = {
        // Called once after all resources are loaded and before the first update
        initialize: function () {
            // move pivot point to left side of panel
        },

        // Called every frame, dt is time in seconds since last update
        update: function (dt) {
            
            if(this.isMouseDown) {
                if(this.dx != 0) {
                    this.entity.rotateLocal(0, this.dx, 0);
                }
            }
        },
        
        onMouseDown: function(event) {
            this.isMouseDown = false;
            
            if(event.button === pc.MOUSEBUTTON_LEFT) {
                this.isMouseDown = true;
            }
        },
        
        onMouseUp: function(event) {
            this.isMouseDown = false;
        },
        
        onMouseMove: function(event) {
            if(this.isMouseDown) {
                this.dx = event.dx;
                this.dy = event.dy;
            }
        }
    };

    return DoorController;
});

EDIT - changed link above to PlayCanvas Designer.

Sorry, I forgot to add some links:

@Crefossus Thank you for the insight. Yeah. I was thinking something like event.dx and event.dy to know when to swing open and close.

@r2d2 Thanks. But the link is 403 Forbidden. I was also thinking to add physics just to be more life like door swing. Thanks for the resources. I appreciate it.

Joseph, the project is public now incase you would like to reference it. The relevant part is the script above, DoorController, which listens for the mouse events Down, Move, and Up. The DX, DY values are saved and during the update() call, the door is rotated locally using DX, as the left-mouse button is held down and the mouse is moved.

Please let me know if/when you don’t need it and I’ll delete it.