Align Geometry to Plane selecting 3 intersected points - math

Question

I have a few days trying to align the 3D object selecting 3 points intersected on the 3D object.
I have to align the GEOMETRY to the the plane.
I started getting the crossVectors from the 3 points.
First Step i did is to move the first point selected to the 0,0,0 position:
After move, as you can see the points are not updated.
let matrixToApply = new Matrix4().makeTranslation(
-this.aligningPoints[0].x,
-this.aligningPoints[0].y,
-this.aligningPoints[0].z
);
this.mesh.geometry.applyMatrix4(matrixToApply)
After this step, the next is to rotate the first point and the second one, getting the angle between, it's so stupid code, I need some help to get some better solution for tha, like apply quarention on euler. I just need to rotate and match to the plane.
if (crossVectors.x > 0 && crossVectors.y > 0 && crossVectors.z < 0) {
console.log('+ + -');
var rotateX = new THREE.Vector3(0, 0, 100).angleTo(new THREE.Vector3(0, crossVectors.y, crossVectors.z));
this.mesh.geometry.rotateX(rotateX);
} else if (crossVectors.x > 0 && crossVectors.y < 0 && crossVectors.z < 0) {
console.log('+ - -');
var rotateX = new THREE.Vector3(0, 0, -100).angleTo(new THREE.Vector3(0, crossVectors.y, crossVectors.z));
this.mesh.geometry.rotateX(rotateX);
} else if (crossVectors.x > 0 && crossVectors.y < 0 && crossVectors.z > 0) {
console.log(' + - +');
var rotateX = new THREE.Vector3(0, 0, 100).normalize().angleTo(new THREE.Vector3(crossVectors.x, 0, crossVectors.z).normalize());
this.mesh.geometry.rotateY(-rotateX);
} else if (crossVectors.x < 0 && crossVectors.y < 0 && crossVectors.z > 0) {
console.log('- - +');
var rotateX = new THREE.Vector3(0, 0, 100).normalize().angleTo(new THREE.Vector3(0, crossVectors.y, crossVectors.z).normalize());
this.mesh.geometry.rotateX(-rotateX);
} else if (crossVectors.x < 0 && crossVectors.y < 0 && crossVectors.z < 0) {
console.log('- - -');
var rotateX = new THREE.Vector3(0, 0, -100).normalize().angleTo(new THREE.Vector3(0, crossVectors.y, crossVectors.z).normalize());
this.mesh.geometry.rotateX(rotateX);
} else if (crossVectors.x > 0 && crossVectors.y > 0 && crossVectors.z > 0) {
console.log('+ + +');
var rotateX = new THREE.Vector3(0, 0, 100).normalize().angleTo(new THREE.Vector3(0, crossVectors.y, crossVectors.z).normalize());
this.mesh.geometry.rotateX(rotateX);
} else if (crossVectors.x < 0 && crossVectors.y > 0 && crossVectors.z < 0) {
console.log('- + -');
var rotateX = new THREE.Vector3(0, 0, 100).normalize().angleTo(new THREE.Vector3(0, crossVectors.y, crossVectors.z).normalize());
this.mesh.geometry.rotateX(rotateX);
} else if (crossVectors.x < 0 && crossVectors.y > 0 && crossVectors.z > 0) {
console.log('- + +');
var rotateX = new THREE.Vector3(0, 0, 100).normalize().angleTo(new THREE.Vector3(0, crossVectors.y, crossVectors.z).normalize());
this.mesh.geometry.rotateX(rotateX);
}
else {
alert('IMPOSSIBLE TO ALIGN');
}
And the last step align the 2 and 3 point, calculating the angle beween.
I there any solution for that?
Really thanks guys, i'm getting a little crazy, i'm new on that.
I would like to have a simpler code for that, i'm 90% sure it exists a better way to do that.
The idea is to have the object on the plane aligned by the 3 points:
Desired result, as you can see the foot is aligned with the floor plane.
Really thanks!

Answer 1

I have solved this with the response of #WestLangley, really thanks for your help.
There is the code to align the mesh to match the plane:
let subvector1, subvector2, crossVectors = new THREE.Vector3();
// Create the cross vector with the 3 points
subvector1.subVectors(this.aligningPoints[0], this.aligningPoints[2]);
subvector2.subVectors(this.aligningPoints[0], this.aligningPoints[1]);
crossVectors.crossVectors(subvector1, subvector2);
// Move the mesh (0,0,0) plane
this.mesh.geometry.applyMatrix4(new Matrix4().makeTranslation(-this.aligningPoints[0].x, -this.aligningPoints[0].y, -this.aligningPoints[0].z))
// Align the mesh to the plane with quaternion and matrix4
const quaternion = new THREE.Quaternion();
quaternion.setFromUnitVectors( crossVectors.normalize(), new THREE.Vector3(0,0,1).normalize() );
let matrix4 = new THREE.Matrix4()
matrix4.makeRotationFromQuaternion( quaternion );
this.mesh.geometry.applyMatrix4( matrix4 );