How to put an object on a selected surface/triangle?

I have stuck with rotating objects in THREE.js. My situation looks like that. I click on the surface and I detect what triangle is it. Next, I get the normal vector of my selected triangles and the normal vector for my floor and I want to rotate the object so that the selected triangle lies on the floor. But always when I calculate Quaternion from my floor normal vector and triangle normal vector and I try to apply to my object, that rotation is completely wrong

let triangleNormal: Vector3 = new Vector3();
console.log('Triangle normal', triangleNormal);

const normals = floor.geometry.getAttribute('normal');
const floorNormal = new Vector3();
floorNormal.fromBufferAttribute(normals, i);

const quaternion = new THREE.Quaternion();
quaternion.setFromUnitVectors(floorNormal, triangleNormal);

Does someone have an idea what I’m doing wrong?

Rotate To N.html (5.4 KB)

It’s not a full answer because it’s working only for the green face. Can you explain your approach?

That doesn’t make any sense to me. The script changes the pyramid orientation so the colored face is parallel to the plane. 4 different buttons for each face.

Okej. I figured out what exactly missing in my code and I want for to explain to me why you do something like that:

x3d.q.setFromUnitVectors( x3d.v.set(...univ[x]), x3d.emg.geometry.faces[x].normal.clone().negate() );

Because I wonder where you take this? It’s some kind of math formula for that?