How to change euler rotation by a value?

Help & Support
1

I’m trying to make it so when I press the up arrow key, it changes the euler y rotation to rotate up, and rotate down with the down arrow. There’s no rotate() function for euler angles, so i tried to do “setLocalEulerAngles(0, this.entity.getLocalEulerAngles + 1, 0)”. Whenever I try this though, it sets all the eulers to NaN.

This is the full script. The only part I need help with is the euler rotation parts when pressing the arrow keys.

var Camera = pc.createScript('Camera');

Camera.attributes.add('rotateSpeed', {type: 'number'})

Camera.attributes.add('ballThrown', {type: "entity"})

Camera.attributes.add('throwForce', {type: "number"})

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


    this.app.mouse.on("mousedown", this._onMouseDown, this);

    this.app.mouse.on("mousemove", this._onMouseMove, this);



    this.eulers = new pc.Vec3();




};

Camera.prototype._onMouseMove = function (e) 
{
    
    this.eulers.x -= e.dx
    this.eulers.y -= e.dy

}

Camera.prototype._onMouseDown = function (e) 
{
    
    this.app.mouse.enablePointerLock()
    var clone = this.ballThrown.clone()
    this.app.root.addChild(clone)
    clone.enabled = true
    clone.setPosition(this.entity.getPosition())
    clone.translate(this.entity.forward.clone().scale(1))
    clone.rigidbody.type = 'dynamic'
    clone.rigidbody.applyImpulse(this.entity.forward.clone().scale(this.throwForce))
    this.entity.sound.play('throw')

}

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


    
    

    if (pc.Mouse.isPointerLocked())
    {
        
        this.entity.setLocalEulerAngles(this.eulers.y * this.rotateSpeed, 0, 0);

    }

    
    var keys = this.app.keyboard
   
    if (keys.isPressed(pc.KEY_UP))
    {
        this.entity.setLocalEulerAngles(this.entity.getLocalEulerAngles() + 1, 0, 0)
        console.log(this.entity.getLocalEulerAngles())
    }

    if (keys.isPressed(pc.KEY_DOWN))
    {
        this.entity.setLocalEulerAngles(this.entity.getLocalEulerAngles() - 1, 0, 0)
        console.log(this.entity.getLocalEulerAngles())

    }


};
2

Hi @august!

You are missing some brackets.

this.entity.setLocalEulerAngles(0, this.entity.getLocalEulerAngles() + 1, 0);
3

Nevermind, the brackets are not missing in your actual code.

4

getEulerAngles() returns a vector, and from the code you want to get the .y property of the vector – so must be getEulerAngles().y.

I also note that when the rotation is set via setEulerAngles(), sometimes there are distortions like when the parameters (0, y, 0) are passed to the setter, and then when trying to get them with the getter – other values ​​are returned, for example (-180, 180 - y, -180) or something like that.

Therefore, in my approaches, I either perform rotation using quaternion multiplication Quat.mul(Quat), or store the rotation in a separate property and pass it to setEulerAngles on change without reading getEulerAngles().

ExampleScript.attributes.add('rotationSpeed', {type:'number', default:90});

ExampleScript.prototype.initialize = function() {
    this.angleY = 0; // this.entity.getEulerAngles().y // if u want
}

// do not forget to multiply angle by dt if rotation performed continuously in update
ExampleScript.prototype.rotate = function(angle){ 
    this.angleY += angle;
    this.entity.setEulerAngles(
        0, 
        this.angleY, 
        0);
}

ExampleScript.prototype.update = function(dt) {
    if(this.app.keyboard.isPressed(pc.KEY_LEFT)){
        this.rotate(this.rotationSpeed * dt); // dont forget dt
    }
    else if(this.app.keyboard.isPressed(pc.KEY_RIGHT)){
        this.rotate(-this.rotationSpeed * dt); // dont forget dt
    }
}
2 Likes
5

Good catch @robert.ua, I overlooked that. :see_no_evil: