如何通过旋转对象使 Object3D 的脸看着另一张脸（例如地板）

Question

坐姿

一个场景，有一个地板和一个漂浮在其正上方的物体。

我想做什么

当我单击对象的一个面时，我希望整个对象旋转，使单击的面朝向地板。

到目前为止我尝试了什么

点击任何对象的 face：Raycaster 拾取第一个 face。
用点击的 face 的 normal 替换对象的 up 向量：object.up.copy(face.normal)
致电object.lookAt(floor.position)

我希望由于新的 up 矢量，对象会以基于单击的面的方向看向地板。

但是，旋转没有按预期工作。我错过了什么？

相关代码部分：

var intersects = raycaster.intersectObject( cylinder );
    if(intersects === undefined || intersects.length === 0) return;


    let face = intersects[0].face;

    // Set cylinders up to the normal of the intersected face to reoriented object
    // to make the clicked-on face `lookAt()` the floor:
    cylinder.up.copy(face.normal);
    cylinder.up.normalize();
    cylinder.lookAt(floor.position);

整个代码

http://codepen.io/anon/pen/EWRdZq

（更新）固定代码

基于@WestLangley 的回答： http://codepen.io/anon/pen/ryZOvx

Answer 1

您想旋转对象，使面的法线指向特定方向。

在您的示例中，所需的方向是负 y 轴的方向，但您可以指定任何方向矢量，只要它具有单位长度即可。

您可以使用这样的模式：

let direction = new THREE.Vector3( 0, - 1, 0 ); // create once and reuse

...

let object = intersects[ 0 ].object;
let normal = intersects[ 0 ].face.normal;

object.quaternion.setFromUnitVectors( normal, direction );

请注意，您的问题陈述没有唯一解。例如，对象可以 "spun" 在一个轴上并且仍然具有面向所需方向的面。

three.js r.84

如何通过旋转对象使 Object3D 的脸看着另一张脸（例如地板）

How to make an Object3D's face look at another face (eg. floor) by rotating the object

javascript

vector

three.js

rotation

normals

坐姿

我想做什么

到目前为止我尝试了什么

整个代码

（更新）固定代码