Three.js - 如何旋转对象以观察一个点并朝向另一个点 [英] Three.js - How to rotate an object to lookAt one point and orient towards another

问题描述

总的来说，我是 Three.js 和 3d 编程的新手，所以这似乎是一个非常简单的问题.理想情况下，我希望答案可以帮助我理解基本原理.

I'm new to three.js and 3d programming in general, so this may seem like a very simple question. Ideally, I hope the answer can help me understand the underlying principles.

我有一个对象需要指向"另一个点(在这种情况下，为简单起见，原点)，这可以使用 Object3D.lookAt(point) 函数轻松完成.这很好地将对象的 Z 轴指向该点.

I have an object that needs to "point" at another point (the origin, in this case, for simplicity), which can be done easily with the Object3D.lookAt(point) function. This points the Z axis of the object at the point nicely.

我还想围绕其 Z 轴旋转名为 looker 的对象，使其 X 轴通常指向另一个对象 refObj.我知道 X 轴不能直接指向 refObj 除非该对象与原点形成直角.我希望 looker 的 X 轴位于由 origin、refObj 和 looker 创建的平面上，如图下面:

I also want to rotate my object, called looker, around its Z axis such that its X axis points generally towards another object, refObj. I know that the X axis can't point directly at the refObj unless that object happens form a right angle with the origin. I want the X axis of looker to lie on the plane created by origin, refObj and looker, as diagramed below:

最简单的旋转方式好像是修改looker.rotation.z，但是我不知道如何计算该值应该是多少.

The simplest way of doing the rotation would seem to be to modify looker.rotation.z, but I don't know how to calculate what the value should be.

一般来说，我想要一个扩展版本的 lookAt 函数，它采用 X 轴所指向的第二个坐标.像这样:

In general, I would like an extended version of the lookAt function which takes a second coordinate to which the X axis would be oriented. Something like this:

function lookAtAndOrient(objectToAdjust, pointToLookAt, pointToOrientXTowards)
{
  // First we look at the pointToLookAt
  objectToAdjust.lookAt(pointToLookAt);

  // Then we rotate the object
  objectToAdjust.rotation.z = ??;
}

我已经创建了一个 jsFiddle 上面的例子

推荐答案

您真正要说的是您希望对象的 y 轴(对象的 up-vector)与飞机.

What you are really saying is you want the y-axis of the object (the object's up-vector) to be orthogonal to the plane.

您所要做的就是在调用 lookAt( origin ) 之前设置对象的 up-vector.

All you have to do is set the object's up-vector before you call lookAt( origin ).

您可以通过计算已知位于平面中的两个向量的叉积来计算所需的 up 向量.

You compute the desired up vector by taking a cross-product of two vectors you know lie in the plane.

这是一个工作小提琴:http://jsfiddle.net/rQasN/43/

请注意，您的问题有两种解决方案，因为计算出的向量及其否定都将与平面正交.

Note that there are two solutions to your problem, as both the computed vector and it's negation will be orthogonal to the plane.

小提琴更新为three.js r.71

fiddle updated to three.js r.71

这篇关于Three.js - 如何旋转对象以观察一个点并朝向另一个点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！