改变CSS3DObject的方向

我有一个3D场景，我想旋转一堆CSS对象，以便它们都指向空间中的一个点。改变CSS3DObject的方向

我的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程序员在这里。

来源

2017-04-07 DukeOf1Cat

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

如果你想在对象的内部正x轴的所需点的方向点，您可以使用此模式：

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

three.js所r.84

来源

2017-04-07 15:15:19 WestLangley

这工作！在使用lookAt之后，我做了旋转拨弄，但似乎无法围绕正确的轴旋转正确的数量。还没有在我的大脑中获得思维模式。谢谢！ – DukeOf1Cat

改变CSS3DObject的方向

回答

相关问题