How to place a box object along two points on a face?

Questions
1

Assume: two surface point: a ,b ,center of a and b: cab, face normal :fn ,vector a-b :vab, box position (0,0,0) , no roation, box z length same as distance a and b, place box along box z axis.

my code not working as i thought

function placeBoxToFace(obj, cab, fn, vab) {
        //clone and normalize
        const upCopy = new THREE.Vector3();
        const fnCopy= new THREE.Vector3();
        const vabCopy= new THREE.Vector3();
        const boxYDirection= new THREE.Vector3(0,1,0);
        const boxZDirection= new THREE.Vector3(0,0,-1);
        upCopy.copy(box.up).normalize();
        fnCopy.copy(fn).normalize();
        vabCopy.copy(vab).normalize();

        //get thickness as y
        const objBox = new THREE.Box3();
        const objSize = new THREE.Vector3();
        objBox.setFromObject(obj);
        objBox.getSize(objSize);
        const thickness = objSize.y;

        //rotate box to face
        obj.quaternion.setFromUnitVectors(boxYDirection, fnCopy);

       //set object postion
        obj.position.copy(cab).add(fnCopy);
        obj.position.add(fnCopy.multiplyScalar(thickness / 2));

        //rotate box to vab (not working as i thought)
        const quaternion = new THREE.Quaternion();
        quaternion.setFromUnitVectors(boxYDirection, fnCopy);
        boxYDirection.applyQuaternion(quaternion).normalize();
        obj.quaternion.setFromUnitVectors(boxYDirection, vab);
     }
}

did i do something wrong? please help.

demo
demo.png732×269 5.37 KB

2

Can you please demonstrate the usage of your function in a live example? Use the following demo which contains a basic three.js scene with a box and placeBoxToFace().

https://jsfiddle.net/5dq1028g/2/

3

Thank your attention Mugen87, i use rotateOnAxis and calculate rotate angle of two vector to work around this problem , maybe something i misunderstood the usage of Quaternion, need more study :smile: