Point projection onto rectangular mesh

Questions
, , , ,
1

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

back
back1431×919 29.8 KB

floor
floor1426×920 33 KB

right
right1431×917 26.3 KB

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

How can I achieve the result?

Thank you!

2

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
3

Thanks for your reply!

I’ve got the idea and I have actually tried this one. Faced some problems with turning the meshes so the direction of its’ faces are in needed direction but solved it eventually.

Another problem that i’ve got with raycaster casting on the plane from any origin is that sometimes the intersection point may not be correct (due to precision error). Tried to explain it in this question. Do you have any ideas how I can deal with it?

Thank you!