I am trying to convert 2d coordinates of mouse to 3d

Questions
1

Hello All,

Is there any perfect solution for this conversion from 2d to 3d.

In most of the solution they are using projector that is not supported by three js now…

I am following this article and a lot of stack overflow but i did not find a perfect solution please is there any way possible for this

Thanks

2

Keep in mind the thread you linked is from 2011-2012 - it’s nice and nostalgic, but at the very least, it is also risky to use it as a source of information.

Since you need to add an additional dimension, you can try either:

  1. Use a Raycaster to cast a ray on your 3D scene - it will return a 3D position of mouse cursor as long as the cursor is over a 3D object on the scene.
  2. Place a PlaneBufferGeometry parallel to the viewport, in front of the camera - at any depth you’d like. Then use Raycaster to cast mouse position onto that plane (this can be useful, if you need a 3D position of the mouse at a specific depth level, regardless of whether there’s any object there or not.)
1 Like
3

Thanks for the quick response, its really like a sunshine for me.

I am following the 2nd way but i am getting always getting point in xz plane due to my code and i am new to THREE js so i dont know how to make it work in all the direction

let plane = new THREE.Plane();
plane.setFromCoplanarPoints(new THREE.Vector3(), new THREE.Vector3(1, 0, 0), new THREE.Vector3(0, 0, 1));

Can you please help me with this so i can get points in x,y,z in all the planes

Thanks

4

Hm - I don’t understand how you’d imagine that to behave :thinking:

If you use the second option, z-value is the z-position of the plane - so it’s kinda faked, otherwise z is any value between -Infinity and +Infinity (there’s no way to determine depth without a reference object / point.)

If you’d like z to be taken from object over which mouse is placed, you can try the first option.

5

Sorry if i mis understand something because i am new to this.

My goal is to have a dynamic line on mouse cursor move

raycaster.ray.intersectPlane(plane, pointOfIntersection);

so due to my plane settings i am able to create a dynamic line in x,z plane but i need this line to measure distance like a measurement tool so i can move in all the direction so your first point is not valid to my use case

6

The first point seems to be exactly what you’d need though (see this example.)

If it’s not - can you link any app example that used the behaviour you have on mind?

7

Sure,

Please see this.

Here i also want to learn how to manage the cursor because my cursor always far from the line.

Thanks

8

In your example its only working when the mouse is over the point cloud but in my use case we may have objects at the plane or in the air so let say one object is at ground and one is in the air so i need to measure the distance between them and also show it like a measurement tool so how i can

9

[…] we may have objects at the plane or in the air so let say one object is at ground and one is in the air […]

I don’t understand how that’s different - please take a look at the example and the code, try to use it before judging that’s not it.

(Position in 3D space has no context of “being on the ground” or “being in the air”. You can raycast any 2 objects and calculate the difference / line between hit points - these are just vectors.)

10

ok i am trying your suggestion

11

Within 4 minutes between our replies you managed to give it a try and concluded it is not going to work?

(If you want someone to do the reading / learning / coding for you, please post on #jobs.)

12

Because i am doing r&d from long time and let me try this please dont mind and your help is appreciable as always :slight_smile:

13

No worries. If you get to a point that you get stuck on something specific - and can share a live example on codepen / jsfiddle - it’ll be much easier to help you out.

But please try things before judging they just won’t work. :man_shrugging:

1 Like
14

The solution worked for me thanks to the community and the members for the solution!

15

Can you share the fiddle