How to Convert Vector3 to Vector2?

Questions
1

Hi, I use Raycaster to get the coordinates of the point that the user clicks on. These coordinates are created through the following code:

const intersects = raycaster.intersectObjects(scene.children);
const p = intersects[0].point;

Now I want to draw the circle at the clicked point with the following code:

let g = new THREE.BufferGeometry().setFromPoints(
 new THREE.Path().absarc(p.x, p.y).getSpacedPoints(20)
);

The Path class is built for 2D objects and I need to convert the length and width (x, y) of these 3D coordinates to 2D.

My question is how to convert 2D coordinates to 3D?

It means converting Vector3 to Vector2

Thankful

2

Why would you need to convert the 3D point to a 2D point if the x y position is already where you clicked in the window? :thinking: eg…

const screenMouse = new THREE.Vector2() 

function onClick( event ) {
  screenMouse.x = event.clientX
  screenMouse.y = event.clientY
}

EDIT: rereading your question again, you either mean what I’ve suggested above or I think you could mean simply using the x z components of the intersects[0].point if the plane is “on the ground”

3

Your onClick function only takes the coordinates of the place on the page where the mouse clicks.

But I want the coordinates of the place in the mesh where they are clicked.

I used the Raycaster class and this way I get the coordinates of the clicked point from the mesh.
Therefore, my output is a 3D Vector. But the path class that I use to draw a circle is a two-dimensional class.

I now need to convert Vector3 to Vector2.

My question is, how should this be done?

4

In that case you should just be able to use the x and z coordinates of the intersected point if the plane is laying horizontally… Any chance you can provide a live example?

5

I need Vector3 to be converted to Vector2.

My question is, please answer this question

6

add the line

console.log(intersects[0])

and look at all the extra information given to you.

Maybe one of the other properties is what you are looking for.
uv is one of them, it maybe useful to you.
It is already a Vector2

1 Like
7

The answer is you can’t “convert” a vector3 to a vector2 afaia, you can however set a new vector2 from the xy or xz or yz components of the vector3 as suggested. Otherwise as @seanwasere has suggested use the uv coordinate of the intersects result…

8

Thank you, seanwasere!

Your message made me change the way I draw circles and use CircleGeometry instead.

this is my final code:

 const intersects = raycaster.intersectObjects(scene.children);
 const p = intersects[0].point;

 // Coordinates & Vectors 3D
 var points = new THREE.Vector3(p.x, p.y, p.z);

 // Draw a circle with the above coordinates 
 let geometry = new THREE.CircleGeometry(Math.PI * 2, 60);
 let material = new THREE.LineBasicMaterial({ color: 0x00ff1a });
 let mesh = new THREE.LineLoop(geometry, material);
 mesh.position.set(points.x, points.y, points.z);
 scene.add(mesh);
1 Like
9

Thank you also Lawrence3DPK