Rotate object around Y axis with an arrow indicator around model

Hi lovely community <3

I’m trying to rotate a model based on the mouse movement. I’m trying to achieve something like below, where the model is always rotated around it’s origin’s Y axis
https://www.jqueryscript.net/demo/jQuery-Plugin-To-Rotate-Elements-Based-On-Mouse-Position-follow-cursor/

I’d like the model as well as the rotate arrow indicator both to rotate counter clockwise when one moves the mouse counter clockwise and opposite direction when the moves is rotated clockwise around the model’s Y axis. I’d like this regardless of the camera position.

So far I’m only able to get it partially working, as below. Notice how the rotation reverses when i make a full circle in my mouse.
https://playcanvas.com/editor/scene/614415

Any help is appreciated.

Project is 404 or private?

Oops, Sorry. made the project public now.

The jQuery plugin version is always facing the direction to where the mouse cursor is whereas yours is based on displacement of the mouse.

I do want the rotation to happen only on mouse click and movement.
What I wanted to show from the jquery example was that it does a full circle rotation. And the rotation is around Y axis and the center of the arrows/model.

But I’m not able to do that. In my example it oscillates after half a rotation. I’ve tried setting setFromAxisAngle to be Y axis, and a few other settings, but it doesn’t rotate around the object’s center.

The logic between the two are different. What behaviour would you like, the jQuery one but only on if mouse button is down or something like this but only on one mouse movement axis? https://developer.playcanvas.com/en/tutorials/rotating-objects-with-mouse/

The jQuery one but only on if mouse button is down.

Which I visualize as essentially a one axis only rotation (Y - axis) but a full rotation when the mouse is moved in a circle around the object’s origin.

Something like this? https://playcanvas.com/editor/scene/614486

Wow, thanks. That works beautifully when the camera is positioned on top.

Is there a way though to set the rotation always to Y-Axis ? Currently if I change the camera position to view from a different angle, the rotation breaks (https://playcanvas.com/editor/scene/614499)
In my use case the rotation axis is always going to be the global Y axis.

Personally, I think that is the wrong control method to use if you have multiple camera angles and the axis of rotation is not directly towards the camera.

If you want to use the current control system, the only way I can think of is to get the mouse cursor screen position offset from the centre of the screen (assuming that the box is always centred) and then use that offset along the XZ plane of the box to calculate a point for the parent to look at.

Rethinking it, you could use a plane on the XZ and do a raycast from camera to mouse to find a point to look at.

I see… What do you mean by wrong control system?
To give you the full context on my use case. I have furniture models on a plane as seen here (https://launch.playcanvas.com/601403?debug=true)

And I want to offer users a way to rotate them on the X-Z plane, along the origin of the model and about the Y-axis.
And as you can see, there are 2 views, Top down view and Lateral view. So regardless of which camera is active I would want the rotation always along the global Y axis.

I would just have mouse move left/rotate to rotate the object. It makes more sense (want to rotate an object on the floor? Move mouse left/right) compared to rotating round a circle that is in screen space.

Here’s the updated version that works with any camera angle that is above the object in world Y: https://playcanvas.com/editor/scene/614486

1 Like

Another variation would be to get the screen position of the box. Then get the angle from that screen position to the mouse cursor. On mouse move, work out the out the different in angle and apply that to the box.

Ah Gotcha, thanks.

I think we’re on the same page as far as the control system goes.
The screen space arrows were something that I would only enable when the camera is in the top down view. For the foot step view(camera angle) of the model, I planned to have something like this https://cdn3.iconfinder.com/data/icons/3d-printing-icon-set/512/Rotation.png on screen which would be more appropriate.

Also, Thanks for the revision, I think that will work perfectly for my use case.

There seems to be one small glitch though. It works well when I move the mouse under the object or over the object, but when the mouse is moved on the the box (second rotation in the video below), it rotates in the opposite direction than expected.

Do you see an easy way to fix that ?

You have to bear in mind that you are in a 3D space and where the plane of intersection is. The mouse cursor may be ‘on’ the box, but the point of intersection may be behind it so it flips the look direction.

TBH, this version is not ‘great’ and you would need to do a variant of this:

Thanks @yaustar, Will give that a shot. Appreciate your help :slight_smile: