# Point projection onto rectangular mesh

Hello everyone!
I’m trying to project points on the meshes with rectangular bufferGeometry

``````const { width, height } = this.size
const vertices = new Float32Array([
-width / 2, 0, 0,
-width / 2, height, 0,
width / 2, height, 0,
width / 2, 0, 0,
])
this.geometry.setIndex([
0, 1, 2,
0, 2, 3
])
this.geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3))
``````
``````const { width, depth } = this.size
const vertices = new Float32Array([
-width / 2, 0, -depth / 2,
-width / 2, 0, depth / 2,
width / 2, 0, depth / 2,
width / 2, 0, -depth / 2
])
this.geometry.setIndex([
0, 1, 2,
0, 2, 3
])
this.geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3))
``````

The approximate result that i want are shown on the images

full demo here (Can’t import OrbitControls in sandbox for some reason)

How can I achieve the result?

Thank you!

Is normal vector / direction of the plane equivalent to the direction in which you’d like to do the projection?

If yes, you can just use a Raycaster.set 4 times to calculate the projected placements (assuming the plane is not parallel to the surface you’d like to cast it onto, otherwise you can just do the raycasting once) - use each vertex as the `origin` of the raycaster and the direction of the mesh as the direction of the ray. First `intersection.point` vector will then be the projected position.

2 Likes