Ask coding questions

← Back to all posts
Rotating a 3D Object towards the mouse position
programmeruser (597)

I'm trying to draw a 3D cube that rotates towards the user's mouse with perspective projection. I have managed to draw the cube, but I can't figured out how to rotate the cube. Maybe I should "unproject" the current mouse position, convert it to cartesian coordinates, figure out the offset and rotate it by that?
( @xxpertHacker help)

Comments
hotnewtop
realTronsi (929)

hey, you know some 3d stuff, do you happen to know point inside 3d mesh detection?

xxpertHacker (935)

@realTronsi
@programmeruser
Not to be lazy, but you both know JS and C, both are writing graphics-related code, both used a canvas, and both posted in the same day.

I think you both might be able to help each other better than I could.

realTronsi's post: https://replit.com/talk/ask/Jittered-canvas-dragging-and-scaling-biased-to-origin/132418

programmeruser's post: https://replit.com/talk/ask/Rotating-a-3D-Object-towards-the-mouse-position/132521 (here)

programmeruser (597)

@xxpertHacker didn't he fix the issue on his own?

xxpertHacker (935)

@programmeruser He just did barely after I said the above ^, so... yeah.

But, I won't be able to look at this for a bit, possibly until tommorow. Maybe someone will answer this in the meanwhile? Maybe not.

realTronsi (929)

@programmeruser wait you can use c in html wtf

xxpertHacker (935)

@realTronsi GLSL is similar to C, they just used C for syntax highlighting.

programmeruser (597)

@realTronsi it's a GLSL fragment shader, I just used the .c extension so that I could get syntax highlighting

xxpertHacker (935)

@realTronsi OpenGL was supported before Wasm existed, lol.

realTronsi (929)

@xxpertHacker yes I know, but I ddidn't mention openGL though :thonk:

xxpertHacker (935)

@programmeruser I was thinking about the last time that I've worked with anything 3D... I haven't done a 3D graph in over a year, I haven't written any code that manipulates 3D objects in forever either.

Then I thought about your current problem: moving a 3D cube to the mouse's position.

First off, how are you getting the mouse's position via GLSL?

Second, I remembered that someone literally did this with P5.js on Repl... https://replit.com/talk/share/Real-3D-3D-But-its-actually-not-fake/80965.

Hopefully you can understand their math, and apply it here?

programmeruser (597)

@xxpertHacker the 3D cube there doesn't rotate with the mouse.
The specific library I'm using has a vec2 uniform storing the mouse position named u_mouse.

xxpertHacker (935)

@programmeruser It moves and rotates, so can't you isolate the rotation part of the code?

I should've updated my comment, I later looked at the library myself and found that it loads a few global variables for you.

programmeruser (597)

@xxpertHacker it moves, but it doesn't rotate.

xxpertHacker (935)

@programmeruser It repositions itself to face the cursor.

What are you thinking of doing?

programmeruser (597)

@xxpertHacker two corners of the cube are determined by the mouse position, not the rotation.
What I was thinking of doing is in the post.

xxpertHacker (935)

@programmeruser Oh, I see the difference, it's really just changing the angle that the cube is viewed at.

I get what you're trying to do, but I'm inexperienced in 3D positioning.

xxpertHacker (935)

Ngl, I never learned much GLSL, since I could neer find a good resource, besides the spec, lol.

programmeruser (597)

@xxpertHacker https://thebookofshaders.com
I'm not really looking for a GLSL answer, just a function in some language that works.