Dear Gamedev.net members,

I'm sorry to be asking in Javascript, but it is the only language I'm working with currently. I am hoping that the code is simple enough for you to understand what it is doing.

I'm trying to rotate a cube so that dragging down always rotates the object around the world X axis, and dragging to the side always rotates the object around the world Y axis no matter the rotation of the object.

I've seen this example which achieves the exact behavior I am looking for: https://jsfiddle.net/MadLittleMods/n6u6asza/

And then, here's my jsFiddle code that I'm having trouble with: http://jsfiddle.net/9sqvp52u/

I saw this stackoverflow answer: https://stackoverflow.com/questions/45091505/opengl-transforming-objects-with-multiple-rotations-of-different-axis

But I still don't understand what I'm doing wrong. I think I'm still multiplying the rotation matrix to the left side of the object matrix in my code, but the object is always just rotating around its local axis. I learned how the transformation matrix works and how quaternion works but I feel like I am still missing something crucial here.

I would really appreciate your help.

Thank you.

you have to multiply current object matrices and transformation in opposite direction. ObjectPos*=Transformation give transformation respectively to global basis, while ObjectPos=Transformation*ObjectPos give transformation respectively to object's local basis.

also it required to store current object transformation in separate matrix and multiply pvm to it before pass to shader for each object that you render  . Object's world position is independent from view an projection,  so have to be stored and manipulated on animation/simulation stage separately for each object,and combined with view and projection only on rendering stage.

http://jsfiddle.net/nmjuptsg/

enjoy

Off topic: Please don't be sorry to ask in JS. In fact, it's even more convienient than says C++ or C# as it's easier to run :).

On 10/1/2018 at 3:05 PM, mr_tawan said:

more convienient

Really JS have no any modern core language tools unlike C# and especially C++, and have a huge disadvantages like a dynamic typing, dynamic object signatures and GC,  but for browser-based solutions it just no other widely used langueges yet.

On 10/1/2018 at 5:27 AM, Fulcrum.013 said:

http://jsfiddle.net/nmjuptsg/

enjoy

This doesn't work correctly for me. I've tried it on 2 different computers with 2 different browsers.

11 hours ago, Fulcrum.013 said:

Really JS have no any modern core language tools unlike C# and especially C++, and have a huge disadvantages like a dynamic typing, dynamic object signatures and GC,  but for browser-based solutions it just no other widely used langueges yet.

I'm in a place with no compilers at all (and cannot install one). In this case I'd say it's more convenient. ... well may be at least for me I guess. 

1 hour ago, fleabay said:

This doesn't work correctly for me. I've tried it on 2 different computers with 2 different browsers.

Looks like it have some problems with drag detection so don't stop rotation when mouse released. But  rotation made respectively to local axes. Verify your code to make sure dX and dY is zero after drag finished .

http://jsfiddle.net/z85smbxy/

fixed. 

10 minutes ago, Fulcrum.013 said:

http://jsfiddle.net/nmjuptsg/

corrected. 

This one rotates around Y axis when mouse is dragged from top to bottom...

Someone else helped me with this but here's the jsfiddle for others who might have the same problem in the future: http://jsfiddle.net/e30r2oyq/