Rotation follow cursor

[nodejs]

Hello,

i have a question about rotating an cube driven by the position of the cursor.
Have created an playground: http://www.babylonjs-playground.com/#NPOXN#5

The cube rotates by not follow the cursor.
When the cursor is left, 0° rotate, cursor right litle more as 90°.

The code that i use:

     document.getElementById("renderCanvas").addEventListener("mousemove", function (event) {
          
          //console.log(scene.pointerX);          
          //box.rotation.y = scene.pointerX / 2;
          
          box.rotation.y = (scene.pointerX / canvas.width) * 2;
          
          // We try to pick an object
          //var pickResult = scene.pick(scene.pointerX, scene.pointerY);
          
        });

I want that the Z Axis follow the cursor 360°.

Can anyone give me a right hint ?

[dbawel]

@nodejs -

First of all, from your post it appears that you might assume you're working with quaternion values for your rotations - and you're not - as WebGL uses euler values by default. So I might assume you're perplexed by the result as you are working in euler math/values - not quaternion - and hope you understand the difference; although I can make no assumptions unless I know the user personally. Otherwise, this answer alone should solve your question, however if you're not familiar with rotations in euler angles, then may I suggest you study euler math first - as you'll be using this regularly by default. Once you understand euler vs. quaternion, then we can look at either converting to quaternion values and create the function using quaternion math, or continue using euler values and write the function using euler math (actually, the math is still just math). So firstly, I hope you understand the difference, and then decide which value type you would like to use. Once you determine this, then we can discuss the two very different functions to accomplish your goal - which is actually a very simple task, and one which everyone must know to work in WebGL.

Below is a playground scene which will show you the values you are inputting and then generating in your y rotation. If you aren't familiar with the console.log() function - remember, I assume nothing with any user on the forum - just press f12 and read your console log values as you move your mouse over the canvas.

http://www.babylonjs-playground.com/#NPOXN#6

Just respond when you understand why you're receiving the current values, and I or others can quickly assist you in writing a function to generate the math to drive the behaviors and return the result you are seeking. And if this is all unfamiliar to you, then it is a lesson which must be learned and fully understood. Otherwise, please accept my apologies if I'm making assumptions which are not correct - which means you are completely familiar with quaternion vs. euler rotation values, and simply having a mild brain fart - as we all often do. If not, then I'm trying to assist you in solving this through understanding the issue; and not simply providing the answer which would be far simpler and require less time on my part. However, I believe you might require a little more understanding of the basics of WebGL frameworks, and some of the fundamental knowledge required to develop content within WebGL. But please let me know if I read you incorrectly, as you'll find the answer to your question quite simple.

Cheers,

DB

[brianzinn]

Maybe what has you confused is that the rotation is in radians instead of degrees:

box.rotation.y = BABYLON.Tools.ToRadians((scene.pointerX / canvas.width) * 360)

If so, I think this does what you're after:
http://www.babylonjs-playground.com/#NPOXN#7
It can be done easily with BABYLON.Tools, but doing it that way so you can see.

[adam]

Here is one way to do it:

https://www.babylonjs-playground.com/#NPOXN#8