Rotate 3D model by mouse

Help & Support
1

Hello playcanvas community!!

How to make 3D model rotator by mouse,
I don’t won’t to rotate camera rather I want to make camera fix and rotate model only

Also in addition add zoom in and out through scroll wheel.

Thanks again

2

Hi @Nofil_khan,

Here is an example project with the rotation behavior that you’re looking for:

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

Take a look at the orbit-camera.js and mouse-input.js scripts in this example project:

https://developer.playcanvas.com/en/tutorials/orbit-camera/

If specifically look at the onMouseWheel function in mouse-input.js, you can use a similar event function to move the camera along it’s forward axis to get closer or farther away from the object. To make that transition smooth, have a look at the update function (line 293 specifically) as a starting point to see how you might approach the issue.

I hope this is helpful.

3 Likes
3

I did do an alternative to the above example that ‘feels’ more correct to me when rotation an object that you may want to consider:

https://playcanvas.com/project/586330/overview/the-room-item-exam

1 Like
4

This is awesome, two more requests(these are related to my initial question)

  1. How to zoom in and out using the mouse wheel
  2. How to only rotate a 3D object when it’s on the 3D object only,not anywhere on the screen??
5

A lot of it is dependent on where you would use it. For example, zooming in can be done by:

  • Moving the camera forward/back
  • Changing the camera FOV
  • Moving the object back and forward in the direction of the camera
  • Scaling the object up/down

How to only rotate a 3D object when it’s on the 3D object only,not anywhere on the screen??

Not sure what you mean here

Give it a try yourself and see where you end up :slight_smile:

1 Like
6

I will sure give it a try ,I will try to do it by more easy way than your code is for rotate 3D model.

Secondly what I mean with second part of question is that

In example you see if we click and drag anywhere on screen it rotates 3D model,I want to move/rotate only if you clicked directly on model not anywhere on screen .
How would that be possible

7

You can use one of these two methods: Entity Picking | Learn PlayCanvas to know if your mousedown is over the entity. If it is, then do rotation on mouse move. If not, don’t do anything.

1 Like
8

I will give it a shot

9

I will give it a shot