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-vector，以便它与全局x-vector一起运行。这样，“查看” - 方向的对象将在场景中的右侧，然后lookAt()将正确定位它。

对不起，可能会在这里修改术语，新手3D程序员。

Answer 1

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

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

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

three.js r.84

改变面向CSS3DObject的方向

1 个答案: