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

Questions
1

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();
triangle.getNormal(triangleNormal);
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);
targetObject.applyQuaternion(quaternion);

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

2

Screen_Capture
Screen_Capture1280×720 19.9 KB

Rotate To N.html (5.4 KB)

3

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

4

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.

5

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() );
x3d.emg.applyQuaternion(x3d.q.inverse());

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