Forum

Object look at cursor

13 November 2018 15:52
Hi everyone,
Very nice framwork.
I need to understand how to move a head so that you always look at the mouse pointer.

can someone help me? :)
13 November 2018 21:41
I need to understand how to move a head so that you always look at the mouse pointer.
You need to describe more precisely what you want to do. You have an object in 3D space. A human head? You want the head to follow the movement of the mouse pointer? Is that it?

Like in these old javascript gimmicks where eyes on the screen follow the mouse pointer? https://codepen.io/J-Roel/full/wWGNQN/
13 November 2018 22:10
Hi and thanks for the quick response.
You're right, now I'll give you a better picture from the situation.
I have a skull in the center of the 3D scene and I would like it to always look at the cursor with local position.
I retrieved the information of the position of the x, y axes of the cursor
function main_canvas_down(e) {
   
    if (_disable_interaction)
     return;

    if (e.preventDefault)
        e.preventDefault();

    var x = m_mouse.get_coords_x(e);
    var y = m_mouse.get_coords_y(e);
    var obj = m_scenes.pick_object(x, y);
    var obts =  m_scenes.get_all_objects();

    console.log(x,y);

    var skull = m_scenes.get_object_by_name("skull");
    
    // compose quaternion
    var quat_60_Z_neg = m_quat.setAxisAngle([0, 0, 1], -Math.PI/3, m_quat.create());

    // get old rotation
    var quat_old = m_trans.get_rotation(skull);

    // left multiply: quat60_Z_neg * quat_old
    var quat_new = m_quat.multiply(quat_60_Z_neg, quat_old, m_quat.create());

    // set new rotation
    m_trans.set_rotation_v(skull, quat_new);

}

With this snippet my skull rotates in the y axis of 60 deg, but i don't understand how i can transform the cord of my 2D dom into quaternion.
Ideas?
13 November 2018 22:38
You need to describe more precisely what you want to do. You have an object in 3D space. A human head? You want the head to follow the movement of the mouse pointer? Is that it?
Hi and thanks for the quick response.
You're right, now I'll give you a better picture from the situation.
I have a skull in the center of the 3D scene and I would like it to always look at the cursor with local position.
I retrieved the information of the position of the x, y axes of the cursor
function main_canvas_down(e) {
   
    if (_disable_interaction)
     return;

    if (e.preventDefault)
        e.preventDefault();

    var x = m_mouse.get_coords_x(e);
    var y = m_mouse.get_coords_y(e);
    var obj = m_scenes.pick_object(x, y);
    var obts =  m_scenes.get_all_objects();

    console.log(x,y);

    var skull = m_scenes.get_object_by_name("skull");
    
    // compose quaternion
    var quat_60_Z_neg = m_quat.setAxisAngle([0, 0, 1], -Math.PI/3, m_quat.create());

    // get old rotation
    var quat_old = m_trans.get_rotation(skull);

    // left multiply: quat60_Z_neg * quat_old
    var quat_new = m_quat.multiply(quat_60_Z_neg, quat_old, m_quat.create());

    // set new rotation
    m_trans.set_rotation_v(skull, quat_new);

}

With this snippet my skull rotates in the y axis of 60 deg, but i don't understand how i can transform the cord of my 2D dom into quaternion.
Ideas?
14 November 2018 09:56
14 November 2018 14:07
Reply to post of user Blend4Life
Something like this?

http://blend4life.atwebpages.com/projects/follow_mouse_pointer/follow_mouse_pointer.html
Yesssss! this is what i'm looking for :)
14 November 2018 19:11
OK, this is what I did: To visualize the task, it's best to imagine the user's screen as a plane in 3D space (I made it green) and align the camera lens with that screen:


Now you have 3D coordinates to work with, because the mouse position can be imagined as a point somewhere on the green plane and the skull looks at that point. For example, if the mouse pointer is in the upper right corner, the vector you need to point your skull at would be the vertex seen in the screenshot, i.e. [9.6,-10,5.4].

To get a 3D vector for ANY mouse x/y, you first calculate where the mouse pointer is relative to the canvas size (for example: mouse at 444/777 on a 1920x1080 canvas would be x=0.23125, y=0.71944). Then you transform these x/y values to the plane's bounding box, so that you get the X and Z locations of the point on the plane in 3D space which corresponds to the canvas x/y mouse position in 2D space. The third coordinate (Y) is always -10 (the plane's Y location), so now you have a 3D vector and can point the skull at it. This is very simple because B4W already has built-in functions for pointing, raycasting etc.

I used m_cam.eye_set_look_at() and a second camera. It points to the calculated vector and then I simply copy its rotation to the skull object. To make it continuous, it's all put in a frame callback:
function frame_cb() {

  var cont = m_cont.get_container();                        // get canvas container
  var px = (cont.clientWidth - mx) / cont.clientWidth;      // calc mouse x on canvas
  var py = (cont.clientHeight - my) / cont.clientHeight;    // calc mouse y on canvas
  var vec_px = plane_bb.max_x - plane_wid * px;             // calc vector X
  var vec_pz = plane_bb.min_z + plane_hei * py;             // calc vector Z

// Make camera look at the calculated vector:
  m_cam.eye_set_look_at(dummy_cam, monkey_loc, [vec_px,plane_bb.min_y,vec_pz]) 

// Copy the resulting rotation over to the skull:
  m_trans.set_rotation_euler_v(monkey, m_trans.get_rotation_euler(dummy_cam));
}


I've attached the project.zip.
14 November 2018 21:33
It's fantastic, thank you very much.
15 November 2018 17:26
Reply to post of user Blend4Life
OK, this is what I did: To visualize the task, it's best to imagine the user's screen as a plane in 3D space (I made it green) and align the camera lens with that screen:


Now you have 3D coordinates to work with, because the mouse position can be imagined as a point somewhere on the green plane and the skull looks at that point. For example, if the mouse pointer is in the upper right corner, the vector you need to point your skull at would be the vertex seen in the screenshot, i.e. [9.6,-10,5.4].

To get a 3D vector for ANY mouse x/y, you first calculate where the mouse pointer is relative to the canvas size (for example: mouse at 444/777 on a 1920x1080 canvas would be x=0.23125, y=0.71944). Then you transform these x/y values to the plane's bounding box, so that you get the X and Z locations of the point on the plane in 3D space which corresponds to the canvas x/y mouse position in 2D space. The third coordinate (Y) is always -10 (the plane's Y location), so now you have a 3D vector and can point the skull at it. This is very simple because B4W already has built-in functions for pointing, raycasting etc.

I used m_cam.eye_set_look_at() and a second camera. It points to the calculated vector and then I simply copy its rotation to the skull object. To make it continuous, it's all put in a frame callback:
function frame_cb() {

  var cont = m_cont.get_container();                        // get canvas container
  var px = (cont.clientWidth - mx) / cont.clientWidth;      // calc mouse x on canvas
  var py = (cont.clientHeight - my) / cont.clientHeight;    // calc mouse y on canvas
  var vec_px = plane_bb.max_x - plane_wid * px;             // calc vector X
  var vec_pz = plane_bb.min_z + plane_hei * py;             // calc vector Z

// Make camera look at the calculated vector:
  m_cam.eye_set_look_at(dummy_cam, monkey_loc, [vec_px,plane_bb.min_y,vec_pz]) 

// Copy the resulting rotation over to the skull:
  m_trans.set_rotation_euler_v(monkey, m_trans.get_rotation_euler(dummy_cam));
}


I've attached the project.zip.

Wow!
Thank you so much man, this was what I was looking for!
I will try to see what comes out and then I will show you the result :D
 
Please register or log in to leave a reply.