改变 CSS3DObject 的朝向

Question

我有一个 3D 场景，其中包含我想要旋转的一堆 CSS 对象，以便它们都指向空间中的一个点。

我的 CSS 对象是简单的矩形，它们的宽度远大于高度：

var element = document.createElement('div');
element.innerHTML = "test";
element.style.width = "75px";
element.style.height = "10px";

var object = new THREE.CSS3DObject(element);

object.position.x = x;
object.position.y = y;
object.position.z = z;

默认情况下，创建的对象被定义为“面向”z 轴。这意味着如果我使用lookAt() 函数，对象将旋转，以便“测试”文本面向该点。

我的问题是我宁愿旋转，以便 div 的“右边缘”指向所需的点。我试过摆弄向上向量，但我觉得那行不通，因为我仍然希望向上向量指向上方。我还尝试先沿 y 轴旋转对象 Math.PI/2，但 lookAt() 似乎忽略了任何先前设置的旋转。

似乎我需要重新定义对象的局部 z 向量，以便它与全局 x 向量一起运行。这样，对象“看”的方向将在场景中向右，然后lookAt() 将正确定位它。

抱歉，这里可能会混淆术语，新手 3D 程序员。

Answer 1

Object.lookAt( point ) 将定向对象，使对象的内部正 z 轴指向所需点的方向。

如果您希望对象的内部正x轴指向所需点的方向，您可以使用这种模式：

object.lookAt( point );
object.rotateY( - Math.PI / 2 );

three.js r.84