3D Object move according to mouse movement x and y coordinate..

07 June 2017 08:15
I am having trouble in 3d object movement according to mouse movement x and y coordinate.
I writing code below :

function main_canvas_move(e)
if (_drag_mode == true && _selected_obj)
if (_enable_camera_controls)
_enable_camera_controls = false;

var x = m_mouse.get_coords_x(e);
var y = m_mouse.get_coords_y(e);

var cam = m_scenes.get_active_camera();

if (x >= 0 && y >= 0)
x -= _obj_delta_xy[0];
y -= _obj_delta_xy[1];

var pline = m_cam.calc_ray(cam, x, y, _pline_tmp);
var camera_ray = m_math.get_pline_directional_vec(pline, _vec3_tmp);
var cam_trans = m_trans.get_translation(cam, _vec3_tmp2);
m_math.set_pline_initial_point(_pline_tmp, cam_trans);
m_math.set_pline_directional_vec(_pline_tmp, camera_ray);
var point = m_math.line_plane_intersect(FLOOR_PLANE_NORMAL, 0, _pline_tmp, _vec3_tmp3);
if (point && camera_ray[2] < 0)
m_trans.set_translation_v(_selected_obj, point);

it working with depth the object but i don't move it depth.
i want only x and y coordinate move 3d object according to mouse.
Please help me if any idea.

07 June 2017 09:00
Hi alpatel2008,
Can you attach the whole JS file? There is an 'Attach' button at the lower right when you write your post.
07 June 2017 10:31
Hi Sir,
Please check my attached html with js code file.
My main concern is drag n drop objects. i work perfectly but when i select object (mouse down event) and move it that time also catch depth movement. but i want only 2d coordinate (x and y).

07 June 2017 10:36
Okay, I have your code. One more question: For X and Y do you mean world space? Like in this example:
Or do you mean X and Y on you screen like a normal 2D website?
07 June 2017 10:41
First, Thanks u for early replay.

I follow this above example. but when i move 3d object it become bit and when i move far it small. but i want not change object pespective when i move it.
Whenever i move object at that time it behave like as 2d object.
if possible, please change code my attached file.

how can i do?

Thanks again.
07 June 2017 11:01
I think I understand you want the object to follow your mouse (X and Y from the camera perspective). And you do not want your object to move farther or nearer to the camera. I will look at your code. I am still learning this API my self so I might be slow
07 June 2017 11:45
Exactly sir, you understand my problem.

07 June 2017 12:12
I think there are two solutions. Depending on what you want your project to do. I will give you the easy one first while I work on the other one LOL.
var FLOOR_PLANE_NORMAL = [0, 0, 1];

This variable decides what plane you object moves on. so 0, 0, 1 is the floor (Z plane).
0, 1, 0 is the wall (Y plane).
1, 0, 0 is the wall (X plane)
0.5, 0.5, 0 is a diagonal wall.

In this line:
var point = m_math.line_plane_intersect(FLOOR_PLANE_NORMAL, 0,
                        _pline_tmp, _vec3_tmp3);

The 0 is distance, plus or minus, the plane will be from the center of origin. So if you changed it to -1, the furniture will be moving around 1 unit above the floor. Chang it to 1 and the furniture will move around down below the floor.

So the second solution is just to make the object fallow your mouse X,Y position on the canvas… Still working on that…
07 June 2017 12:48
Thank you Sir,

I already declare var FLOOR_PLANE_NORMAL = [0, 0, 1] in my code.
07 June 2017 12:53
Yes, try changing it to [0.5, 0.5, 0] then try it out.
Please register or log in to leave a reply.