Is it possible to rotate an Entity with the mouse scroll?

Help & Support
1

Is posible using the Scroll of mouse?

1 Like
2

Yes, definitely, Playcanvas provides events to listen to the mouse wheel event. You can grab the new value (how much the wheel moved) and use it to rotate an entity.

For example here is how the orbit camera scripts do that in the default Model Viewer starter kit:

MouseInput.prototype.onMouseWheel = function (event) {
    this.orbitCamera.distance -= event.wheel * this.distanceSensitivity * (this.orbitCamera.distance * 0.1);
    event.event.preventDefault();
};

You can use a similar piece of code to capture the event.wheel value and rotate an entity.

1 Like
3

Here you can find a tutorial on how to rotate an object with the mouse click:

https://developer.playcanvas.com/en/tutorials/rotating-objects-with-mouse/

You can experiment changing the pc.EVENT_MOUSEMOVE event and the onMouseMove method to use the mouse wheel.

4

:pensive: :tired_face: I can’t do it.


//var
var Rotate = pc.createScript('rotate');

Rotate.attributes.add('cameraEntity', {type: 'entity', title: 'Camera Entity'});
Rotate.attributes.add('orbitSensitivity', {
    type: 'number', 
    default: 0.3, 
    title: 'Orbit Sensitivity', 
    description: 'How fast the camera moves around the orbit. Higher is faster'
});


// initialize code called once per entity
Rotate.prototype.initialize = function() {
    this.app.mouse.on(pc.EVENT_MOUSEWHEEL, this.onMouseWheel, this);
    
    this.lastTouchPoint = new pc.Vec2();
    if (this.app.touch) {
        this.app.touch.on(pc.EVENT_TOUCHSTART, this.onTouchStart, this);
        this.app.touch.on(pc.EVENT_TOUCHMOVE, this.onTouchMove, this);        
    }
};


Rotate.horizontalQuat = new pc.Quat();
Rotate.verticalQuat = new pc.Quat();
Rotate.resultQuat = new pc.Quat();

Rotate.prototype.rotate = function (dx, dy) {
    var horzQuat = Rotate.horizontalQuat;
    var vertQuat = Rotate.verticalQuat;
    var resultQuat = Rotate.resultQuat;

    // Create a rotation around the camera's orientation in order for them to be in 
    // screen space  
    horzQuat.setFromAxisAngle(this.cameraEntity.up, dx * this.orbitSensitivity);
    vertQuat.setFromAxisAngle(this.cameraEntity.right, dy * this.orbitSensitivity);

    // Apply both the rotations to the existing entity rotation
    resultQuat.mul2(horzQuat, vertQuat);
    resultQuat.mul(this.entity.getRotation());

    this.entity.setRotation(resultQuat);    
};


Rotate.prototype.onTouchStart = function (event) {
    var touch = event.touches[0];
    this.lastTouchPoint.set(touch.x, touch.y);
};


//Rotate.prototype.onTouchMove = function (event) {
Rotate.prototype.onMouseWheel = function (event) {
    var touch = event.touches[0];



    var wheel = this.wheel;
    var dy = touch.y - this.lastTouchPoint.y;
    
    //this.rotate(dx, dy);
    
    this.lastTouchPoint.set(touch.x, touch.y);
};

//Rotate.prototype.onMouseMove = function (event) {    
Rotate.prototype.onMouseWheel = function (event){
    var mouse = this.app.mouse;
    //if (mouse.isPressed(pc.MOUSEBUTTON_LEFT)) {
      //  this.rotate(event.dx, event.dy);
        this.rotate(event.Wheel * this.distanceSensivity * event.wheel *0.001);
    
};


/*
MouseInput.prototype.onMouseWheel = function (event) {
    this.orbitCamera.distance -= event.wheel * this.distanceSensitivity * (this.orbitCamera.distance * 0.1);
    event.event.preventDefault();
}; */
1 Like
5

You are close! Actually I think your code would have worked if you didn’t scale the value so low (0.001).

Here, I’ve forked the tutorial and added side by side the onMouseWheel method. It will rotate the object around the X axis when scrolling with the mouse:

https://playcanvas.com/project/649546/overview/rotating-objects-with-mousewheel

1 Like