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

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

//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);
}
}
``````

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()`.