Situation
Imagine a scenario where there is a floor and an object hovering directly above it.
My Goal
I am attempting to create a function where, upon clicking on a face of the object, the entire object will rotate so that the clicked face is facing the floor.
My Attempts So Far
- Clicking on any face of the object triggers the Raycaster to select the first face.
- I then replace the object's upward vector with the normal vector of the clicked face using:
object.up.copy(face.normal)
- Lastly, I call
object.lookAt(floor.position)
My expectation was that, due to the new up vector adjustment, the object would align itself to look at the floor based on the clicked face orientation.
However, the rotation does not perform as anticipated. What could be missing in my approach?
Here is the snippet of relevant code:
var intersects = raycaster.intersectObject(cylinder);
if(intersects === undefined || intersects.length === 0) return;
let face = intersects[0].face;
// Set cylinder's upward vector to the normal of the intersected face for reorientation
// to ensure the clicked face 'looksAt()' the floor:
cylinder.up.copy(face.normal);
cylinder.up.normalize();
cylinder.lookAt(floor.position);
The Complete Code
http://codepen.io/anon/pen/EWRdZq
(UPDATE) The Revised Code
With guidance from @WestLangley's response: http://codepen.io/anon/pen/ryZOvx